“ showView ” will display the root stack of our native navigation.After these steps, we will be able to display the native screens stack.įor the steps below please use Android Studio.įirst of all, open the “android” directory located in the module’s root directory.Īdd the code below to “android/src/main/java/com/moduleName/ModuleNameModule.kt”.īecause React Native bridge doesn’t support method overloading, we are creating two methods: Then we will add some native screens and we will attach native navigation to the React Native activity. In this step, we have to add navigation to the native part of the app. Import Native Screens Implementation (Android)

import RootNavigation from './navigation/RootNavigation' Ĭreate a “ screens ” directory, then inside of it create “Main.tsx” and “Another.tsx“. In this step, we will add two screens into React Native. npm install install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context install a “navigation” directory, inside of it create “RootNavigation.tsx”. Let’s open the example directory, and install React Navigation using the commands below. We will use an example directory to test our module. The most important question is, “What type of package do you want to develop?” Please choose “Native module in Kotlin and Swift”.īob will generate all the needed files and an example directory with React Native Application. To create the module just use the npm command.īob will ask you some questions about the package name, description, author, etc. Bob is a simple CLI to scaffold and build React Native libraries. The best way to create a React Native module is to use bob. We will create the native screens as a React Native Module.

We will create two RN screens and three native screens.

Another thing it does is offload the JavaScript thread.įor the purpose of this tutorial, I’ve created a simple React Native (RN) app that displays some native and some RN screens. Adding native screens to an app is useful when we need another security layer, for example, if we would like to add a payment screen. We will be able to move between the React Native and native screens. This article is about adding a native screen into a React Native application.ĭuring this tutorial, we will use Kotlin to add native navigation and screens to a React Native app.

Setup android studio for react native