React Native

Setup

The Navigation router is a 100% native navigation library for React Native. It provides the same out-of-the-box experience that you'd get if you were building a native app without React Native. For example, the TabBar component renders to the UITabBarController from UIKit or the BottomNavigationView from Android's Material Design library. Because the Navigation router contains native code, you have to create your application using react-native init or a custom development build of Expo.

Install the three navigation packages from npm.

npm install navigation navigation-react navigation-react-native

Run the pod install command.

Replace the code in App.js with the following:

import React from 'react';
import {StateNavigator} from 'navigation';
import {NavigationHandler} from 'navigation-react';
import {NavigationStack} from 'navigation-react-native';

const stateNavigator = new StateNavigator([
]);

const App = () => (
  <NavigationHandler stateNavigator={stateNavigator}>
    <NavigationStack>
    </NavigationStack>
  </NavigationHandler>
);

export default App;

If you want to use Material Design 3 on Android then configure a Material3 theme in styles.xml. For example,

<style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">