Get up and running with React Native and Expo in 3 basic steps

This post is for those who have been coding web applications with React for a while and want to start learning React Native. You are 70% there! React Native works mostly like React but there are 3 things you need to know before you can start practicing and building your phone apps: how to create your React Native app with Expo, how to debug it using VSCode, and how to implement Redux in your app.

Go-to resources

The React Native team at Facebook put together great documentation to make it really easy to start right away using the framework. The Getting Started section will guide you through the initial steps for creating your first React Native app. Learn the Basics is also a great tutorial to grasp the basics and differences with React.

The same way we can use create-react-app to build a React app without having to worry about configuring it, React Native has Expo. Expo is not only a boilerplate to initiate a React Native application, it also comes with great development tools like Expo Client or Expo Snack. Download the Expo Client app and directly view Expo projects on your phone, or use Expo Snack to run complete React Native projects in the browser without installation. Expo has another quick step-by-step Get Started With Expo guide.

Outside of the official documentation, Understanding Expo for React Native is a good blog to get introduced to Expo and React Native Express is another great online tutorial that will guide you through Javascript, React and React Native basic concepts. You can use it to have a quick refresh on Javascript features and React/React Native components.

1. Quick Setup

If you followed through the firsts steps from the documentation, you have:

• installed Node.js 8+. Use npm and nvm if you need help in this step. Check this post if you need help checking your node version or changing it.
• installed the Expo command line tool.
• downloaded and installed Expo Client.
• created a new React Native project using expo init my-new-project
• accessed your project directory cd my-new-project and previewed the app expo start
• scanned the QR code printed on the previous step (you can find it in the terminal and a new browser tab opened in the development tools port) with your phone camera and opened the Expo Client application linked to the QR code.

Congratulations, you have created your very first React Native app. It was pretty easy. However, there are still a few steps to get 100% ready to code.

2. Debugging with Expo

With React, you could open your web app in the browser and use the developer tools for debugging. With React Native, the process requires a little setup.

If you are using Visual Studio Code as your code editor follow these basic steps.

• Open the my-new-project directory with VSCode.
• Go to the Debug tab on VSCode. Click on the gear icon and select React Native. This will create a launch.json file on your app (.vscode/) with the debugging functionality.
• Check the packager-info.json file on your app (.expo/) and get the packagerPort number.
• Create a new settings.json file on your app (.vscode/) with the following code:

{
    "react-native": {
        "packager": {
            "port": 19001 //packagerPort from packager-info.json
        }
    }
}

• On the Debug tab on VSCode, select Attach to Packager from the dropdown list and click the green play icon.
• Shake to the right your phone so the Expo Client app displays the menu options. Select and activate Debug Remote JS.

If everything went well, you should read “Established a connection with the Proxy (Packager) to the React Native application” and “Running application “main” with appParams […]” on the Debug Console.

The debugging functionality is now ready (see the top-right debugging-icons bar). Place red points right next to the lines of code you want to debug, code execution will stop there when hitting that line.

You can read more about Debugging in VSCode in the documentation.

3. Redux with Expo

If you look at your React app files, you will find an index.html, index.js and App.js files. On the index.js file, your App component is wrapped with the Provider component from Redux so that the Redux store is available to any nested components that have been wrapped in the connect() function. It might look something like this:

However, your React Native app does not have any index.html or index.js files!

The basic Expo configuration requires a root component from the App.js. On package.json file, you’ll see "main":"node_modules/expo/AppEntry.js". If you check the module file, you’ll see how it’s requested.

import { KeepAwake, registerRootComponent } from ‘expo’;
import App from ‘../../App’;
if (__DEV__) {
   KeepAwake.activate();
}
registerRootComponent(App);

Therefore, our Expo App.js file must render a second component wrapped in the Redux Provider. Now, your Expo app files should look something like this:

Voilà! You have your React Native app seed ready so you can start coding, practicing, and debugging! Enjoy your hacking!