Let's make app in an hour

• expo: 32.0.0 / React Native: 0.57

What you learn from the tutorial

Learn how to use state by creating a simple counter app. This project also covers the following items. Please read it if you are not familiar with them.

• Data Control

  • State

• Style

  • Layout with Flexbox

• UI Components

  • View
  • Text
  • ImageBackground
  • TouchableOpacity

Setup dev environment

1. Download VSCode from here
2. Download and setup expo following the instruction
3. Download the latest Xcode from the Apple Store

Full procedure

1, Create Project

• Open terminal
• cd ~/Desktop/
• expo init {your-project-name}

2, Assets

• Please download background image from here.
• Set the image under assets folder.

3, Run on iOS simulator

• Go to terminal
• cd ~/Desktop/{your-project-name}
• expo start
• Click Run on iOS Simulator

4, Edit App.js

★ It's preferable to write following code yourself. It will help you to understand code more.

import React from 'react';
import { StyleSheet, Text, View, ImageBackground, TouchableOpacity } from 'react-native';

import bgImg from './assets/bg.jpg'

export default class App extends React.Component {
  state = {
    count: 0,
  }

  onUp = () => {
    const { count } = this.state
    this.setState({ count: count + 1 })
  }

  onDown = () => {
    const { count } = this.state
    const newCount = count > 0 ? count - 1 : 0
    this.setState({ count: newCount })
  }

  onReset = () => {
    this.setState({ count: 0 })
  }

  render() {
    const { count } = this.state
    return (
      <ImageBackground style={styles.container} source={bgImg}>
        <View style={styles.headerContainer}>
          <Text style={styles.title}>{count}</Text>
        </View>
        <View style={styles.bodyContainer}>
          <TouchableOpacity style={styles.button} onPress={this.onUp}>
            <Text style={styles.buttonTitle}>Count Up!</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button} onPress={this.onDown}>
            <Text style={styles.buttonTitle}>Count Down</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button} onPress={this.onReset}>
            <Text style={styles.buttonTitle}>Reset</Text>
          </TouchableOpacity>
        </View>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  headerContainer: {
    flex: 2,
    width: '100%',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  bodyContainer: {
    flex: 1,
    flexDirection: 'column',
    alignSelf: 'stretch',
    justifyContent: 'space-between',
    paddingBottom: 20,
  },
  button: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    marginVertical: 15,
    marginHorizontal: 20,
    borderRadius: 60,
  },
  title: {
    color: 'white',
    fontSize: 140,
    fontWeight: 'bold',
  },
  buttonTitle: {
    color: 'black',
    fontSize: 16,
    fontWeight: 'bold',
  },
});