Kick-Starting React Native Projects

In this chapter, you’ll get up and running with React Native. Thankfully, much of the boilerplate code involved in 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, which 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-5E/tree/main/Chapter17.

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:

• The React Native CLI
• The Expo CLI

The 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 the 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.

The 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...

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 set up the environment and project:

1. Before we can use Expo, we need to install Node.js, Git, and Watchman. Watchman is a tool for watching files in our project to trigger actions like rebuilds when they change. All of the required tools and details can be found here: https://docs.expo.dev/get-started/installation/#requirements.
2. Once this installation is complete, we can start a new project by running the command:

   npx create-expo-app --template
   

3. Next, the CLI will ask you questions about your future project. You should see something like this in your terminal:

   ? Choose a template: ' - Use arrow-keys. Return to...

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:

   ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
   █ ▄▄▄▄▄ █▄▀▀▄▄▀▀█ █ ▄▄▄▄▄ █
   █ █   █ ███▄█  ▀...

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 with this 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-5E/tree/main/Chapter17/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.