How to develop your first React Native Application?

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. Youll 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 youve not yet explored this profitable framework, its 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. Lets 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 itoffers 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 developerscan 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 commandnpm install -g expo-cliin your terminal for installing the Expo CLI.

Step#2

Use the Expo CLI for creating a new React Native project; run the codeexpo init my-appin 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 commandcd my-appin your terminal to navigate to your project directory.

Step#5

Run the commandnpx expo startoryarn expo startto 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 apps code and then save the files. Your changes will be reflected on the Expo Go app in real time.

Step#8

Thereafter, run the commandexpo build: androidorexpo build: iosto create a production-ready version of your app.

This way, youll 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 Natives 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. Its 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 Nodes version managers for Windows. If you have a Node version already installed on your machine, ensure that its 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 commandchoco 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 youve 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 ReactNative. 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. Its 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 youve successfully run the application, you can make the required changes. This is how you need to do it. Pick a text editor and openApp.tsxin it. Then, edit some lines. For viewing the modifications, either clickReloadfrom the Developer Menu or press theRkey two times.

How to create a basic component in React Native?

Now that youve set up your app, open the project directory in your preferred code editorand 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

TextHello 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, youll 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 filestyles.js. This file will contain your styles.

Step#2

Import theStyleSheetAPI from React Native in yourstyles.jsfile

import { StyleSheet } from 'react-native';

Step#3

Use theStyleSheet.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.

Heres an example in which we define two styles-containerandtext

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 yourstyles.jsfile.

Step#5

Import your styles in your React Native component

import styles from './styles.js';

Now, use thestyleprop to apply the styles to your component

View style={styles.container}

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

/View

Here, weve applied thecontainerstyle to aViewcomponent and thetextstyle to aTextcomponent.

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 doesnt offer the control and flexibility you need for integrating complex app functionalities.