Estimated Time: 1 hour

<aside> 💡 Welcome to CodeLab's article on React Native. Here, you'll learn the basics of React Native, a mobile development framework used commonly for cross-platform development on both iOS and Android devices using the popular web programming framework React.

As always, you can follow along with the source code here.

</aside>

Prerequisites

Overview

What is React Native?

React Native is an open-source cross-platform mobile development framework created by Facebook. It offers a way to write a mobile app for both iOS and Android devices (both of which are powered by different programming languages and platforms) using just one programming language and interface.

Why React Native?

React Native offers significantly faster development speeds for beginners - it only requires writing one app for two different platforms. It’s also an extension of the React framework itself, meaning developers familiar with React (and web development in general) will have an easier time transitioning to a mobile development environment.

React Native

Environment Setup

https://youtu.be/rCfwni7KaI0

• To create or run a React Native application, you need Expo CLI, which you can get by running npm install -g expo-cli.
• To create your own React Native project, run expo init TestProject.
  • To run the project, run cd TestProject and then npm start.
• To actually run your app, you have several options
  • Option 1 (Web): Click the local host link in your console after running npm start - you can then select Run in web browser to run your app in a simulated web browser
  • Option 2 (Mobile):
    • Note that your mobile device must be on the same network as your computer.
    • You first need to install the “Expo Go” app from your respective app store.
    • You simply need to scan the mobile QR code (using the Camera app on iOS, or the Expo Go app on Android) to start the application on your phone.
  • Note that both methods have hot reloading, just like regular React apps. Web development can be easier, however, if you just want to make a few small changes or debugging.
    • Of course, a web simulator doesn’t represent a “real” mobile environment, and all changes should eventually be tested on a real mobile device using Expo Go.

Core Components & File Structure