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
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:
- Open a new terminal session.
-
Build and run the app.
$ npx react-native build-kepler $ kepler run-app
-
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