🏠 Blog Home

Get Started with React Native and Expo

18 minutes, 11 seconds

React Native is a framework to make a real native iOS and Android apps using JavaScript. React Native renders the UI elements into native based on platform. On the data-flow side it’s uses JavaScript engine to work on app’s logic.

Using Expo make the development with React Native easier to get started. Nevertherless, you might feel overwhelming with the tools that need to be installed on your computer.

We will be using Terminal or Command Prompt sometimes, so be ready.

1. Environment Setup

Setup the environment might take some time.

1.1 Set your machine Ready

  1. Get a nice code editing tool VS Code.
  2. Install NodeJS on your computer.
  3. Download and Install Watchman.
  4. Install Yarn, a dependancy manager.

1.2 Setup Expo

  1. Go ahead to http://expo.io and register an account.
  2. Install Expo CLI with this command line. We gonna use terminal sparingly to install stuff.

npm install -g expo-cli

  1. Install Expo Mobile Client app for iOS or Android.

Download Links

  1. Apple App Store
  2. Google Play

1.3 Install Simulator / Emulator

While having the mobile client is good thing to see on your mobile device but, there is a need to use Simulator / Emulator on you platformto test out quickly the coding result.

If you on Windows, follow this Android Studio emulator guide to set up Android emulator.

Once the emulator is open, you can build from the Expo XDE run on the opened emulator.

If you on Mac, install Xcode throught the Mac App Store.

2. Let’s get Started!

2.1 Create React Native App with Expo CLI

OK back to your terminal, now you need to know ‘where’ you are by hitting pwd command. You can use cd (change directory) to go to Home directory, see other files by hitting ls, make a new folder (if you may) called Expo by typing mkdir Expo, cd Expo to go to the folder. Now, you are ready, create a new React Native blank project on that directory, run this command to install, it might take a while to download.


expo init first-rn-app

Then go to the created project.


cd first-rn-app

And finally just try to start up the project with this command.


expo start

It will start up a ‘Metro bundler’ webpage on your browser like this.

Now, what you have to do is run the app on iPhone Simulator (on Mac) or Android emulator ( on Mac or Windows ).

If you want run on Android Emulator, make sure you download Android Studio, setup a emulator and run it. Expo XDE will recognize your emulator and will install Expo Client app on the emulator and run your React Native app.

OK, for me I will try to make the app run on an iPhone Simulator, I have my Xcode, I open the Xcode to make sure Xcode can run, because you have to configure some initial setup for Xcode.

Once done, on the Metro Bundler on the web, you hit ‘Run on iOS simulator’ on the left panel. It will call the iPhone Simulator to boot up and run your app.

It will looks like this on Mac computer with simulator up and running.

2.1 Edit Code with VS Code

Now you have stop the bundler for a while by hitting ‘Control+C’. Open the folder on using Finder by hitting open . command.

Now open Visual Studio Code, open root of the project folder by using menu bar or drag the folder to the VS Code icon on the dock.

The best way to do this is open the Visual Studio Code from Terminal with command code .. Here is guide to configure that. Link

We will create a folder named ‘src‘ as source on the root folder. We will add these folders inside src folder: components, img, navigators, redux, and screens. Those name are useful when we going to do full-fledge mobile apps, maybe we are not going to use all of them, but you will in the future.

OK, so we already done with the boilerplate setup with folders. Let’s get to know, what is the first file that being called upon React Native app bootstraping: App.js.

It’s basically show everything that shows up on the simulator just now.

Now, open App.js file, it’s hard but what I want you to do is to delete all the content of the App.js and rewrite this code.

It’s important write on your own first.


import React , { Component } from 'react'
import { View, Text } from 'react-native'

class App extends Component {
  render(){
    return (
      <View style={styles.container}>
        <Text>App</Text>
      </View>
    );
  }
}

const styles = {
  container:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  }
}

export default App;

2.2 Understanding the File

OK, let’s go into JavaScript stuff, I break it into 4 components, see below.

1 – Importing libraries, React, and React Native. The first line is will be used for almost all classes in React Native development. The second line, which use the curly bracket ‘{}’ and inside that there are the React Native components that we want to use for this class.

2 – Mentioning about object oriented programming’s class, it’s basically a definition of a component, alas extends from React’s Component, because the it’s the first class that being called in the project, it is act like a app’s main controller.

It has a render() function which is expected to return a JSX, it looks like HTML by the way, but the things is from React Native, see, we already import all stuff on import library section (#1) inside curly braces; View and Text. So that we can use those components.

Just like HTML, we can use styling too, we can use inline styling or this way, refer to ‘styles’ const.

3 – This is the place we define the styles as const. It’s actually just yet another objects. The format is similar to CSS but not exactly the same, the naming convention using camel casing.

In this case, we added a View, which styled like a container that fill up the whole screen using flex:1. As default the direction of flex for React Native is ‘column’ which mean from top to bottom. You can change the flexDirection:'row' for experiment.

The main axis is y-axis when flex direction is column. First we use justifyContent to align to the main axis. Use ‘center’ to make it center, otherwise you can use: ‘flex-start’, ‘flex-end’.

On the other side, we have the cross axis which, x-axis, which can be configured by alignItems. Similar to justifyContent we can use the similar value to set the property: ‘flex-start’, ‘center’ and ‘flex-end’.

Inside the ‘container’ view, we added a child component which is <Text>. So everything inside the view will be centered by y-axis and x-axis because we have setted the container view to align it’s childs component to be centered in both y-axis and x-axis.

Refer to this cheat sheet for your reference.

4 – Last but not least we have to export the class with default. This is pretty JavaScript thing, we export on the last of the file because someday when it come to advanced integration like redux we will edit this line of code.

Here is our fancy result.

IMAGE

To make our life easier we can make the code as a ‘template’ by typing special keyword. Read the note below.

There is cool feature in VS Code where you can create a snippet by typing magic word like ‘rns’. More info about snippet is here.

2.3 Add State and UI

Let’s do some nice small stuff on what we already have here.

Remember, when we add UI elelement we will put at JSX place which will be rendered.

Before we go to UI let’s talk about state.

2.3.1 State

State is like a variable, but what unique here is when ever we make the state change, we can make it always update with the other UI.

Now we want to make a state, name it as currentText with '' empty string in it. Add these codes before render() function.


state = {
  currentText:'',
}

2.3.2 Text Input

First thing we have to do is to import it. At the top part there is second line reads import { View, Text } from 'react-native, inside the curly braces, add a comma then your new component that you wish to add, in this case is TextInput, add TextInput after comma, it will reads like this.


import { View, Text, TextInput } from 'react-native

Once you import it, you can add it the JSX potion. Now put it inside the View container as child after the Text component.


<TextInput onChangeText={(text)=>this.setState({currentText:text})} style={{width:300,height:40,backgroundColor:'skyblue', paddingHorizontal: 10}}/>

Now, not only we have the TextInput with nice skyblue background, it’s actually doing something when we type on the text field, it will update the state of currentText to whatever text we typed.

To make this into live demo, we adjust the static Text with something like this.


<Text>{this.state.currentText}</Text>

Now, what every you write on the TextInput will be automatically update to the text above, that’s is amazing.

TextInput Doc

2.3.3 Button

OK, now we wanted to create a Button. First, as usual add Button inside library import inside the curly braces, don’t forget the comma as well.


import { View, Text, TextInput, Button } from 'react-native';

Now add the Button below the TextInput with this code.


<Button onPress={()=>{alert('Hi')}} title="Button"/>

The button will apear at the bottom of the ‘skyblue’ TextInput with title Button. Please take note the appearance of Button is diffent from iOS to Android as it’s using the native component. To make app looks coherent accross platform it’s recommended using component like TouchableOpacity.

When you run the app, and tap the button, an alert with body ‘Hi’ will appear.

Here is the challenge, make the alert show what ever you write on TextInput to the alert. Comment your answer below.

Artboard.png

Button Doc

3. React Native Dependancies

Now we will add on an external library to extend the capabilities of our app.

I have mentioned some of awesome libraries here for your reference, the essential one is react-navigation, it’s quite essential for us to make the app can more from screen to another.

Without further ado let’s install it with Yarn package manager. Back to your terminal, on VS Code. Hit ‘Ctrl+tilde(`)’ to show up the terminal at bottom. And run this command on your project directory.

If you are running Metro bundler here, at the VS Code, press ‘+’ to add new terminal at the folder. 


yarn add react-navigation

For starter let’s make a Stack Navigation. It’s basic component that you can go from one screen to the detail screen and then you can go back.

Since we using react-navigation we will make the App.js cleaner by factor out the current content into another place where we called it screen component.

Let’s create our own screen inside the screens folder.

src/screens/HomeScreen.js


import React, { Component } from 'react'
import { View, Text } from 'react-native'

class HomeScreen extends Component {

    state = {
      currentText:'',
    }

    render() {
      return (
        <View style={styles.container}>
          <Text>{this.state.currentText}</Text>
          <TextInput onChangeText={(text)=>this.setState({currentText:text})} style={{width:300,height:40,backgroundColor:'skyblue', paddingHorizontal: 10}}/>
          <Button onPress={()=>{alert(this.state.currentText)}} title="Button"/>
        </View>
      );
    }
  }

  const styles = {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
  };

export default HomeScreen;

Next, we create a second Screen to go to from HomeScreen, name it SecondScreen.js. you may use the template code to create new screen.

src/screens/SecondScreen.js


import React, { Component } from 'react'
import { View, Text } from 'react-native'

class SecondScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>SecondScreen</Text>
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
};

export default SecondScreen;

At App.js we have to revamp our code to this.


import React, { Component } from 'react'

import { createStackNavigator } from 'react-navigation';
import HomeScreen from './src/screens/HomeScreen';
import SecondScreen from './src/screens/SecondScreen';

const RootStack = createStackNavigator({
  home:{
    screen: HomeScreen
  },
  second:{
    screen: SecondScreen
  }
})

class App extends Component {

  render() {
    return (
      <RootStack/>
    );
  }

}

export default App;

What we did here is importing createStackNavigator and we import our HomeScreen and SecondScreen.

Next we create a RootStack where we create a new stack navigator with 2 routes: home and second. The first one become the initial route.

Next on the HomeScreen we will add a new button that can go the second screen.


<Button onPress={()=>{this.props.navigation.navigate('second')}} title="Next Screen"/>

Artboard Copy.png

So here you go. When you tap on the ‘Next Screen’ you will go to the next screen. Hit the back button, boom you back to your first screen.

Well that’s the glimps of what react-navigation can do.

How is it so far with React Native development with Expo CLI leave a comment below.

You may also want to see the source code and it’s open sourced at GitHub. RN First App GitHub Repo

Thank you for reading this.

◀︎ Blog Home