React Native - Getting Started

Edit on GitHub
Jun 24, 2020
React Native & Expo
2 minutes

Running the app

You need to run

1npx react-native start

to start the app. And then

1npx react-native run-android

to start the app in an Android emulator or on device.

The docs are a bit misleading here, as they only mention the rnu-android command. but if you run that directly, you’ll get a red error saying script not found. So npx react-native start first and then in another Terminal, do npx react-native run-android

Seeing changes and debugging

Double tap R on keyboard to reload the app
Press Cmd or Ctrl + M or shake your device to open the debug menu

Linking libraries

From React Native 0.60 and higher, linking is automatic. So you don’t need to run react-native link.

You’d still need to install pods and such to complete the link, e.g.

1npx pod-install ios

First steps

Styles - styled-components
Moving between screens - react-navigation
Fetching data (hooks) - swr

1# install react-navigation
2npm install @react-navigation/native
3
4# install dependencies
5npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
6
7# macOS
8# npx pod-install ios

Now import react-native-gesture-handler as the first thing (otherwise the app may crash) and then wrap your entire app in <NavigationContainer>, like so:

1import 'react-native-gesture-handler'
2import * as React from 'react'
3import { NavigationContainer } from '@react-navigation/native'
4
5export default function App() {
6  return <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
7}

At this point your installation of react-navigation is done. Now come the navigators. There are different kinds: stack, drawer, tab.. Each navigator is it’s own library, so you’ll have to install them separately

1npm install @react-navigation/stack

Notes