Creating your first mobile project using React Native

Getting started

Before creating a new React Native project, you need to set up your development environment. Ensure that Node.js and npm are installed on your system.

You can download them here

Using Expo CLI

The easier one

Expo CLI provides a user-friendly and very efficient approach for building mobile apps compatible with both iOS and Android devices. Expo CLI streamlines the development process by offering a unified workflow and eliminating the need for complex configurations. It provides a broad selection of ready-to-use components, APIs, and libraries, enabling developers to quickly develop and deploy mobile applications. Expo CLI handles platform-specific details, allowing us to focus on designing user interfaces and implementing the app's logic.

Let's start building our app using Expo, shall we?

Step 1 - Installing CLI

To use Expo CLI, firstly we need to install it using the following command:

npm install -g expo-cli

Step 2 - Creating project

Once Expo CLI is installed, execute the following command to create a new project:

npx create-expo-app MyFirstProject

You may replace MyFirstProject with your desired project name. This command will create a new React Native project with the specified name.

Step 3 - Running the application

You can download the Expo Go app on your mobile device to view your newly built project directly, or you can also view it on the web.

In order to run the project, just run the following command:

npm start

There will be various prompts in the console window, guiding you to different actions

In order to open the app on your phone, switch to Expo Go mode in the console (done by pressing s key) and scan the QR code using Expo scanner. Note: Your devices must be on the same network

The app should greet us with the following screen after opening it:

If you want to open the app in the web, press the corresponding prompt button in the console (w), and the new tab shall open in your default browser:

Using React Native CLI

The more complex one

Using React Native CLI to create a React Native application offers developers a flexible and powerful method for building mobile apps for both iOS and Android platforms. With React Native CLI, developers have direct access to the underlying React Native framework, allowing for more precise control and customization. This approach provides the freedom to integrate native code, use platform-specific APIs, and optimize app performance to meet specific requirements. While it may require more technical expertise, React Native CLI delivers the flexibility and control needed for complex app development scenarios.

Let's begin building our new React Native project then!

Step 1 - Installing CLI

As with the Expo CLI, we need to install React Native CLI in order to use it. It can be installed using the following command:

npm install -g react-native-cli

Step 2 - Creating project

After React Native CLI is installed, you can create a new project using the next command:

npx react-native init MyFirstProject

Once again, you may replace MyFirstProject with any name of your choosing. It will create a new React Native project with that name.

Step 3 - Setting up Android environment

In order to run the application using this approach, initializing the project and starting it using the commands won't be enough. You must also set up Android development environment on your device

First of all, download and install Android Studio. It can be found on their official website

During the installation, you may be asked whether to install an emulator unit. It's totally up to you whether to do it or not, since you can always install it later and just use your own mobile device to run the application on

Step 4 - Linking your mobile device

After installing the Android Studio and opening up, you must select the active device, onto which will be installed your application. It can be either emulator or your physical device. In this case, I'll cover how to link your mobile phone, for example.

On the right panel of Android Studio there is a Running Devices menu containing all of the active emulators and devices connected to your computer.

In order for your phone to show up in the list, you must either pair devices using Wi-Fi or connect it via USB. Note: Your devices must be on the same network when connecting via Wi-Fi

If it doesn't show up in the list, check if debugging via USB or Wi-Fi is enabled on your phone

Step 5 - Running application

After choosing the device from the list, you may proceed to get the project running and launch the application on your device. Use the following commands to achieve that:

react-native run-android - runs application on android

react-native run-ios - runs application on iOS

Note: To run application on iOS, you need to set up iOS simulator

Conclusion

Congratulations! You've successfully created your first React Native app. Now, dive into React Native’s extensive ecosystem and start building amazing cross-platform applications. Happy coding!