Matt Shirley

JavaScript enthusiast and Web Developer

Getting Started with React Native Navigation on Android

Navigators (or routers) are a core part of a React Native application however it is quite confusing with having a few options out there, such as React Navigation and ex-navigation built using JavaScript.

Personally, I have found React Native Navigation the most user-friendly solution. RNN is a implementation using the native Android and iOS libraries with a simple JavaScript API.

I'll help guide you through the installation as it is a bit trickier to install compared to other navigators. If you are an expo user you'll need to detach your project.

Installation

Before starting, ensure you are using at least react-native 0.43 or greater and have yarn (or NPM) installed.

When you're ready, install the package by using yarn add [email protected] or npm install --save react-native-navigation.

Setting it up

Open up Android/settings.gradle and add the following code at the end.

Now, open android/app/build.gradle and update the compileSdkVersion and buildToolsVersion. Also add the extra line in the dependencies.

Dive a little deeper into the src/ folder and find MainActivity.java and replace the whole file with this block, without removing your package line.

Now open MainApplication.java and replace the entire file, again, leaving your package line.

Compile the project using react-native run-android.

Now that you've got it all setup, you can follow this example to learn how to create a screen, navigate and other UI features.