How to develop your first React Native Application?

Information is out of date

React Native is one of the most sought-after mobile app development frameworks. This Facebook-created framework has React as its base and uses JavaScript to build cross-platform applications. React Native apps share a single codebase for the Android and iOS operating systems. Developers write these apps in JSX and compile them into the native code. You’ll be able to customize this native code to suit specific project development requirements. As such, one could barely distinguish the cross-platform apps built with React Native from truly native apps.

Since React Native development teams can target several platforms and operating systems with the same codebase and development effort, its popularity is sky-high. This framework also comes with multiple other beneficial features. So, if you’ve not yet explored this profitable framework, it’s high time to consider it for your next project. This post provides step-by-step guidance to beginners on how to sail through their first React Native app development project.

Getting Started with Developing a React Native App

There are two options for getting started with the development process. You either employ Expo or the React Native CLI. Let’s explore the offerings and development steps of each of these approaches!

Get Started with Expo

If you are a novice in the mobile app development arena, I would recommend you to use “Expo Go” as it offers an easier and quicker way to build your first React Native application. Expo contains a set of services and tools best suited to the React Native environment. It comes with numerous handy features. Here are the most notable ones!

Using Expo, you get a wide variety of pre-built libraries and components including a feature-packed native runtime with several modules. React Native app developers can speedily prototype, create, and publish applications without having to worry about the underlying native code.

Expo Go speeds up the development process and reduces friction. Developers can effortlessly experiment with their innovative ideas. You only require a mobile phone device or an emulator and the latest Node.js version. You can run the app on a physical device without the need to install Android or iOS native SDKs. Expo Go also allows you to test your application directly on your mobile device when you carry out any modifications.

Expo is a great choice when you are working on simpler projects and need to develop an app quickly. However, with Expo Go, you cannot add customized native code. You can only use the built-in native modules offered by Expo. For using third-party native modules and libraries you need additional development steps.

Here are the key steps for getting started with Expo!

Step#1

Run the command npm install -g expo-cli in your terminal for installing the Expo CLI.

Step#2

Use the Expo CLI for creating a new React Native project; run the code expo init my-app in your terminal.

Step#3

Select your preferable template for the project. Some examples are “tabs,” “blank,” etc. Follow the prompts for setting up your project.

Step#4

After you create the project, run the command cd my-app in your terminal to navigate to your project directory.

Step#5

Run the command npx expo start or yarn expo start to start the development server.

Step#6

Install the “Expo Go” app on your Android or iOS mobile device. Connect it to the same wireless network that your computer is using. Now, use the “Expo Go” app to scan the QR code on your mobile device for viewing the app in development. For iOS devices, you can use the in-built QR code scanner provided by the default Camera app of iOS.

Step#7

Now, try making changes. Modify your app’s code and then save the files. Your changes will be reflected on the Expo Go app in real time.

Step#8

Thereafter, run the command expo build: android or expo build: ios to create a production-ready version of your app.

This way, you’ll be able to create a standalone build of your React Native software solution. You can upload it to the Apple App Store or Google Play Store.

Get Started with React Native CLI

If you have some prior experience in creating mobile applications or have more complex development requirements, the React Native CLI is a preferred pick. Using React Native’s command-line interface, developers enjoy more flexibility and control over the development process. One can access the entire React Native API and can integrate the necessary native modules and libraries into the application. This approach proves particularly beneficial for developing complex apps that need advanced features and custom integrations.

Here are the key steps for getting started with React Native CLI!

Step#1: Install Dependencies

Install the React Native CLI and all the necessary dependencies for getting started. The official documentation includes the installation instructions based on your OS. These are the major steps:

• Download and install Node.js and npm on your machine from the official website of Node.js at https://nodejs.org/en. You can use the popular Windows Package Manager “Chocolatey” for installing Node. It’s advisable to use an LTS version of Node. And, if you need to switch between various versions, you can use the “nvm-windows,” one of Node’s version managers for Windows. If you have a Node version already installed on your machine, ensure that it’s Node 14 or a more advanced version.

• The next vital step is installing React Native CLI globally on your system. For this, open your terminal or command prompt and then enter this command:

     npm install -g react-native-cli

• Also, install a JDK (Java SE Development Kit) via “Chocolatey.” Follow these steps. Open the Administrator Command Prompt and right-click the Command Prompt. Then choose the option “Run as Administrator” and employ the command choco install -y nodejs-lts microsoft-openjdk11. Here, I recommend using JDK11 as issues might crop up if using higher JDK versions.

Step#2: Set a native Development Environment

Install either Xcode (for iOS development) or Android Studio (for Android development) on your machine. Now that you’ve installed Android Studio/Xcode, you need to configure them with React Native. Follow the detailed instructions provided in the official documentation for this purpose.

Create a new React Native project. For this, you need to open your command prompt or terminal and run the following command

npx react-native init MyFirstApp

You need to replace “MyFirstApp” with the name of your project.

Step#3: Run your React Native Application

To begin with, you need to start the JavaScript bundler “Metro.” “Metro ships with React Native. It accepts an entry file and different options and then, generates a single JS file that contains the code and all the dependencies. Then, start Metro by running this command inside your React Native project directory.

npx react-native start

Now, the development server for your project gets started. The Metro Bundler will start and will bundle JavaScript and other assets of the app.

Run your app in a device emulator by opening a new terminal window and navigating to your project directory. It’s necessary to open a new terminal because you need to allow the Metro Bundler to run in its terminal. Run this command Inside the new terminal:

“npx react-native run-android” (for Android apps)

Or

“npx react-native run-ios” (for iOS apps).

This command will launch your app on an emulator or a connected device.

Step#4: Make Modifications

After you’ve successfully run the application, you can make the required changes. This is how you need to do it. Pick a text editor and open App.tsx in it. Then, edit some lines. For viewing the modifications, either click Reload from the “Developer Menu” or press the R key two times.

How to create a basic component in React Native?

Now that you’ve set up your app, open the project directory in your preferred code editor and begin writing the code.

This is how you can create a simple component in React Native.

import React from 'react';

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

const MyComponent = () => {

return (

<View>

<Text>Hello World!</Text>

</View>

);

};

export default MyComponent;

You can use this component in other parts of your application by importing it. Take a look at this example!

import MyComponent from './MyComponent';

const App = () => {

return (

<View>

<MyComponent />

</View>

);

};

export default App;

How to Style Your React Native Components?

You need to create stylesheets for styling your React Native Components. For this, you can utilize the “StyleSheet” API offered by the framework. With this API, you’ll be able to define styles in a separate file. You can import this and apply it to your React Native components.

Step#1

Create a new file in your project directory. Name the file styles.js. This file will contain your styles.

Step#2

Import the StyleSheet API from React Native in your styles.js file

import { StyleSheet } from 'react-native';

Step#3

Use the StyleSheet.create() method for defining your styles. In this method, an object is taken as an argument. Here, every key represents a style name and its value is an object having style properties.

Here’s an example in which we define two styles- container and text

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

text: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

});

Step#4

Now, export your styles. For this, add “export default styles;” at the end of your styles.js file.

Step#5

Import your styles in your React Native component

import styles from './styles.js';

Now, use the style prop to apply the styles to your component

<View style={styles.container}>

<Text style={styles.text}>Hello, world!</Text>

</View>

Here, we’ve applied the container style to a View component and the text style to a Text component.

This way, you can create styles and apply the stylesheets to your React native components.

Final Verdict

These steps will guide you in creating a functional React Native environment on your machine, sail through the app development process effortlessly, and also, style your React Native components. Pick the right approach – React Native CLI or Expo – based on your project development requirements. In a nutshell, the React Native CLI provides you more control over the development process and allows customization, but involves a lengthy configuration and setup process. The Expo approach, on the other hand, offers ease-of usage and streamlines the development process, but doesn’t offer the control and flexibility you need for integrating complex app functionalities.