Beginner's Guide to Mobile App Development with React Native

If you’re already comfortable with React, building mobile apps for iOS and Android is a new adventure to put your current React skills to use.

React and React Native are popular JavaScript libraries for creating web and mobile apps. React Native is a React-based framework for developing native mobile apps.

In this article, we’ll go over the fundamentals of React Native and how to get started with mobile app creation.

What is React Native?

React Native is a mobile application development framework that was developed by Facebook. It allows developers to use React to build native mobile applications for iOS and Android.

React Native uses the same fundamental UI building blocks as regular iOS and Android apps. This means that your application will have the same look and feel as other native mobile apps. React Native also has many benefits, such as faster development time, easier code sharing across platforms, and a large community.

When you build a React Native app, the Javascript code is compiled to native code for the respective platform.
For example, if you are building an iOS app, the JavaScript code is compiled to native Objective-C or Swift code. Similarly, if you are building an Android app, the JavaScript code is compiled to native Java or Kotlin code.

This allows the app to run as a native app on the device, with access to all of the device’s native capabilities.

Why use React Native for mobile app development?

• Easy to learn: If you’re coming from a web development backend. React native is a boost to your mobile app development journey. You don’t have to learn new programming languages (Java, Kotlin, or Swift) allowing you to use your web development skills and reapply them in react native.
• Cross-platform compatibility: React Native allows you to build applications that work across multiple platforms, such as iOS and Android, using a single codebase. This can save time and development costs, as you don’t need to create separate codebases for each platform.
• Faster development: React Native has a large library of pre-built components, which can speed up development time and reduce the need for custom coding.

Additionally, React Native’s hot reloading feature allows developers to see changes in their code in real-time just like you do in a React web application, making the development process faster and more efficient.

Setting up React Native?

To get started with React Native, you need to have Node.js installed on your local machine.

To proceed, we’re going to be using React Native with Expo.

Expo is an open-source platform for building and deploying React Native applications easily.

They do the heavy lifting of setting up your React Native application so you can have your app up and running in a matter of minutes.

Fun fact: Expo not only enables you to create mobile apps using your React Native source code, but it also allows you to build web applications. That means you can create Android, iOS, and a website with one code.

Mindblowing right??

To develop applications with Expo, you need two tools:

• the command-line tool called Expo CLI to serve your project.
• Expo’s mobile client app is called Expo Go to open the project on Android and iOS platforms.

To install Expo CLI with npm run:

npm i -g expo

You can download Expo Go on your physical device by going to your app store.

To create your React Native app, open up your terminal and run

npx create-expo-app my-app

If it prompts you to install create-expo-app, simply Press y and Enter

Once that is done run:

cd my-app

To start your expo app run

npx expo start

Once the app server starts, you should see a QR code on your terminal.

Opening your App

There are two ways to open your react native app

Using a physical device

Firstly, make sure you have downloaded Expo Go from your app store.

Also, Ensure to be connected on the same network as the computer running the app server (through WiFi or something else)

Open Expo Go

Expo GO dashboard

You should see a section like this

Tap on the App

You should get a loading screen of the app bundling.

Once it completes you will get the default screen

Using a simulator/emulator

If you’ve not set-up a simulator then you should watch these videos for Windows or Mac

Once you have your simulator started

Simply go to the terminal where the app server is running and press `i` for ios simulator or `a` for android

This will search for your active simulators, and if Expo Go is not installed it will prompt you to press Y on the terminal to install it on the simulator.

If it is already installed it will open up your App

You should see the default screen of the App

Congratulations!!!

Let’s look a bit into the code

In the root directory of your app, open up the App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';


export default function App() {
 return (
   <View style={styles.container}>
     <Text>Open up App.js to start working on your app!</Text>
     <StatusBar style="auto" />
   </View>
 );
}


const styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: '#fff',
   alignItems: 'center',
   justifyContent: 'center',
 },
});

Let’s tinker a bit with the code.

Change the background color to #24a1fc and save it

You should notice that once you changed it and updated it with the color you specified.

You could go ahead and changes the character in between the <Text> component

Once you’re done, save it and you should see the changes reflect

Next Steps

To improve your practical skills in react native, here are some youtube channels you should be following

notJust.Dev

Esteban Codes

JS Mastery

Conclusion

In this article, we covered the basics of React Native and how to get started building your first app. Now that you have a basic understanding of React Native, you can start exploring its many features and building your own amazing mobile apps.

Follow me on Twitter and do well to send me a message showing your progress

As we’ve learned, React Native is a powerful framework for building native mobile applications using React. With its fast development time, easy code sharing across platforms, and large community, it’s a great choice for anyone looking to get started with mobile app development.

If you have any comments, kindly drop them here or send me a message on Twitter for a faster response.

Thanks for reading.