Developing Mobile App with React Native and Expo

System requirements:

Node.js (LTS)
macOS, Windows (Powershell and WSL 2) or Linux

Create a project

To create a new project, run the following command:

$ npx create-expo-app@latest

Initialize a project using a template:

$ npx create-expo-app@latest --template default

Template can be default, blank, blank-typescript, tabs or bare-minium.

Initialize a project using an example:

$ npx create-expo-app@latest --example with-router

See from expo/examples: https://github.com/expo/examples

Set up your environment

Set up an Android device with a development build

Setup Prerequisites

Install Watchman

Install Cargo first:

$ sudo apt  install cargo
$ cargo version

(Recommended) Building from source:

$ git clone https://github.com/facebook/watchman.git

$ cd watchman
# Optionally, to save time, you can ask Watchman's build process to install system dependencies
$ sudo ./install-system-packages.sh
$ ./autogen.sh

Using Prebuilt Binaries:

Download and extract from the latest release: https://github.com/facebook/watchman/releases/latest

$ unzip watchman-*-linux.zip
$ cd watchman-vYYYY.MM.DD.00-linux
$ sudo mkdir -p /usr/local/{bin,lib} /usr/local/var/run/watchman
$ sudo cp bin/* /usr/local/bin
$ sudo cp lib/* /usr/local/lib
$ sudo chmod 755 /usr/local/bin/watchman
$ sudo chmod 2777 /usr/local/var/run/watchman

(TO REVIEW) Configure Linux inotify Limits:

The inotify(7) subsystem has three important tunings that impact watchman.

/proc/sys/fs/inotify/max_user_instances impacts how many different root dirs you can watch.
/proc/sys/fs/inotify/max_user_watches impacts how many dirs you can watch across all watched roots.
/proc/sys/fs/inotify/max_queued_events impacts how likely it is that your system will experience a notification overflow.

Verify the installation:

$ watchman version

Install OpenJDK

Update the Package List:

$ sudo apt update

Install the default OpenJDK:

$ sudo apt install default-jdk

Verify the installation:

$ java -version

Setup Android Studio

Download and install Android Studio:
Open the Android Studio app, click More Actions and select SDK Manager.
Open Android Studio, go to Settings > Languages & Frameworks > Android SDK. From the SDK Platforms tab, select the latest Android version (API level).
Copy or remember the path listed in the box that says Android SDK Location.
Click Apply and OK to install the Android SDK and related build tools.
To environment variable pointing to the Android SDK location, add the following lines to your ~/.bashrc config file:

$ nano ~/.bashrc

# Android SDK
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

Reload the path environment variables in your current shell:

$ source $HOME/.bashrc
Finally, make sure that you can run adb from your terminal.

$ adb version

Running your app on an Android device

Install expo-dev-client

Run the following command in your project's root directory:

Enable debugging over USB

To enable USB debugging on your device, you will first need to enable the "Developer options" menu by going to Settings > About phone > Software information and then tapping the Build number row at the bottom seven times. You can then go back to Settings > Developer options to enable "USB debugging".

Plug in your device via USB

Check that your device is properly connecting to ADB, the Android Debug Bridge, by running adb devices in your terminal. You should see your device listed with device listed next to it. For example:

$ adb devices

Run your app

Run the following from your terminal:

$ npx expo run:android

Start developing

Start a development server

To start the development server, run the following command:

$ npx expo start

Open the app on your device

After running the command above, you will see a QR code in your terminal. Scan this QR code to open the app on your device.

If you're using an Android Emulator or iOS Simulator, you can press a or i respectively to open the app.

Make your first change

Open the app/(tabs)/index.tsx file in your code editor and make a change.


   }
 >
   <ThemedView style={styles.titleContainer}>
       <ThemedText type="title">Welcome!</ThemedText>
       <ThemedText type="title">Hello World!</ThemedText>
     <HelloWave />
   </ThemedView>
   <ThemedView style={styles.stepContainer}>

Developer Guides