React Native | Getting Started

General Readings

• https://reactjs.org/
• https://reactnative.dev/
• https://facebook.github.io/metro/
• https://expo.io/

Create App

Expo CLI Quickstart

Assuming that you have Node 12 LTS or greater installed, you can use npm to install the Expo CLI command line utility:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">npm install -g expo-cli

Then run the following commands to create a new React Native project called „GettingStarted“:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">expo init app-getting-started
cd app-getting-started
npm start # you can also use: expo start

React Native CLI Quickstart

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">npx react-native init app-getting-started

or create new project based on a template

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">npx react-native init app-getting-started--template react-native-template-typescript

Start App

Step 1: Start Metro

First, you will need to start Metro (Docs), the JavaScript bundler that ships with React Native. Metro „takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies.“

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">npx react-native start

Step 2: Start your application

Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title=""># For running app on iOS
npx react-native run-ios

# For running app on Android
npx react-native run-android