Chapter 16: Kick-Starting React Native Projects

In this chapter, you'll get up and running with React Native. Thankfully, much of the boilerplate code involved with the creation of a new project is handled for you by the command-line tools. We will look at the different CLI tools for React Native apps and create our first simple app that you will be able to upload and start right on your device.

In this chapter, we'll cover the following topics:

• Exploring React Native CLI tools
• Installing and using the Expo command-line tool
• Viewing your app on your phone
• Viewing your app on Expo Snack

Technical requirements

You can find the code files of this chapter on GitHub at https://github.com/PacktPublishing/React-and-React-Native-4th-Edition/tree/main/Chapter16/my-project.

Exploring React Native CLI tools

To simplify and speed up the development process, we use special command-line tools that install blank projects with application templates, dependencies, and other tools for starting, building, and testing. There are two major CLI approaches we can apply:

• React Native CLI
• Expo CLI

React Native CLI is a tool created by Meta. The project is based on the original CLI tool and has three parts: native iOS and Android projects and a React Native JavaScript app. To get started, you will need either Xcode or Android Studio. One of the main advantages of React Native CLI is its flexibility. You can connect any library with a native module or directly write code to the native parts. However, all of this requires at least a basic understanding of mobile development.

Expo CLI is just one part of the big ecosystem for developing React Native apps. Expo is a framework and a platform for universal React applications. Built around React Native...

Installing and using the Expo command-line tool

The Expo command-line tool handles the creation of all of the scaffolding that your project needs to run a basic React Native application. Additionally, Expo has a couple of other tools that make running our app during development nice and straightforward. But first, we need to install the Expo command-line tool:

1. In your command-line terminal, type in the following command:

   npm install -g expo-cli

2. Once this installation is complete, you'll have a new expo command available on your system. To start a new project, we can run the expo init command, as follows:

   expo init my-project

3. In this case, the name of the project that will be created is my-project. Next, the process will ask you about your project. You should see something like this in your terminal:

   ? Choose a template: ' - Use arrow-keys. Return to submit.
       ----- Managed workflow -----
      blank - a minimal app as clean as...

Viewing your app on your phone

In order to view your React Native project on your device during development, we need to start the Expo development server:

1. In the command-line terminal, make sure that you're in the project directory:

   cd path/to/my-project

2. Once you're in my-project, you can run the following command to start the development server:

   npm start

3. This will show you some information about the developer server in the terminal:

   Starting project at /Users/sakhniuk/React-and-React-
   Native-4th-Edition-/Chapter16/my-project
   Developer tools running on http://localhost:19002
   Starting Metro Bundler
   ' Metro waiting on exp://192.168.1.233:19000
   ' Scan the QR code above with Expo Go (Android) or the
     Camera app (iOS)

4. It will also open a browser tab with the Expo developer tools for managing where the application is run, viewing logs, and other miscellaneous activities. Figure 16.1 shows what the Expo developer tools look like:

...

Viewing your app on Expo Snack

The Snack service provided by Expo is a playground for your React Native code. It lets you organize your React Native project files just like you would locally on your computer. If you end up putting something together that is worth building on, you can export your Snack. You can also create an Expo account and save your Snacks to keep working on them or to share them with others. You can find Expo Snack by the link: https://snack.expo.dev/.

We can create a React Native app in Expo Snack from scratch, and it will be stored in an Expo account, or we can import existing projects from a Git repository. The nice thing about importing a repository is that when you push changes to Git, your Snack will also be updated. The Git URL for the example that we've worked on in this chapter looks like this: https://github.com/PacktPublishing/React-and-React-Native-4th-Edition-/tree/main/Chapter16/my-project.

We can click on the Import git repository button...

Summary

In this chapter, you learned how to kick-start a React Native project using the Expo command-line tool. First, you learned how to install the Expo tool. Then, you learned how to initialize a new React Native project. Next, you started the Expo development server and learned about the various parts of the development server UI.

In particular, you learned how to connect the development server with the Expo app on any device that you want to test your app on. Expo also has the Snack service, which lets us experiment with snippets of code or entire Git repositories. You learned how to import a repository and run it on virtual iOS and Android devices.

In the next chapter, we'll look at how to build responsive layouts in our React Native apps.