React Native for Kepler Navigation

The Kepler SDK contains a React Native for Kepler Navigation API, which is based on React Navigation, for Kepler apps.

You can use React Native for Kepler Navigation to navigate between video screens. React Native for Kepler Navigation supports stack and drawer navigation.

React Native for Kepler Navigation is supported in the following ways:

• stack: supports non-native stack navigation (no integration with react-native-screens).

• drawer: supports only permanent as the drawyerType prop.

• Install navigation packages
  • Add dependencies in your code
  • Install the packages
• Import navigation and containers

Install navigation packages

To use React Native for Kepler Navigation, you need to add dependencies in your app and install them with npm.

Add dependencies in your code

In your app’s package.json file, go to the dependencies section and add the following React Native and Kepler dependencies:

"dependencies": {
    "react-native-screens": "~3.1.1",
    "@amzn/keplerscript-react-native-reanimated": "~2.0.0",
    "@amzn/react-native-safe-area-context": "~2.0.0",
    "@amzn/react-navigation__routers": "~2.0.0",
    "@amzn/react-navigation__core": "~2.0.0",
    "@amzn/react-navigation__native": "~2.0.0",
    "@amzn/react-navigation__stack": "~2.0.0",
    "@amzn/react-navigation__drawer": "~2.0.0",
    "@amzn/react-native-screens": "~2.0.0",
    },

Replace <your-path-to-KeplerSDK> with the full path to the SDK.

Install the packages

To install the navigation packages:

1. Open a new terminal session.

2. Build and run the app.

    $ npx react-native build-kepler
    $ kepler run-app
   

3. Restart the Metro bundler.

    $ npm start
   

Import navigation and containers

After you install the navigation packages, you can import the React Native for Kepler Navigation library in your code. You need to wrap your app in the NavigationContainer, a component that manages the navigation tree and contains a navigation state.

import { NavigationContainer } from "@amzn/keplerscript-react-navigation-native";

export const App = () => {

 return (
      <NavigationContainer>

      </NavigationContainer>
  );

Last updated: Sep 30, 2025