Navigating Between Screens
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide points to the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use React Navigation. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS.
If you're integrating React Native into an app that already manages navigation natively, or looking for an alternative to React Navigation, the following library provides native navigation on both platforms: react-native-navigation.
React Navigation is the only 3P community package available on Kepler platform for navigation between multiple screens. Kepler platform does not support react-native-navigation
.
React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.
The current React Navigation on Kepler Platform supports React Navigation version 6.x
Warning: The version of React Navigation has been updated to 6.x, please check the React Navigation website to review any breaking changes.
Breaking changes example
drawerType="permanent"
option has been moved under the screenOptions
prop,
<NavigationContainer>
<Drawer.Navigator
drawerType="permanent"
>
The above snippet should be updated as shown below:
<NavigationContainer>
<Drawer.Navigator
screenOptions={{
drawerType: 'permanent',
...
}}
>
Please visit Offcial Migration doc to review other breaking changes.
Installation and setup
First, you need to add your desired React Navigation dependencies in your project's package.json
:
Warning: Due to recent dependency update in React Navigation,
"@amzn/react-native-screens": "~2.0.0"
is now required to be added as a dependency for any package that uses Navigation, failure to do so will result in app crash.
{
"@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",
}
react-navigation/native-stack
is not supported on Kepler Platform.@amzn/keplerscript-react-native-reanimated
and @amzn/keplerscript-react-native-safe-area-context
were created to rectify build issues found when supporting @amzn/keplerscript-react-navigation-*
packages.Next, install the required peer dependencies to your project's package.json
:
{
"react-native-gesture-handler": "~2.13.0",
}
You might get warnings related to peer dependencies after installation. They are usually caused by incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds.
Now, you need to wrap the whole app in NavigationContainer
. Usually you'd do this in your entry file, such as index.js
or App.js
:
import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@amzn/keplerscript-react-navigation-native';
const App = () => {
return (
<NavigationContainer>
{/* Rest of your app code */}
</NavigationContainer>
);
};
export default App;
Now you are ready to build and run your app on the device/simulator.
Usage
Now you can create an app with a home screen and a profile screen:
import * as React from 'react';
import { NavigationContainer } from '@amzn/keplerscript-react-navigation-native';
import { createStackNavigator } from '@amzn/keplerscript-react-navigation-stack';
const Stack = createStackNavigator();
const MyStack = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Welcome' }}
/>
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
In this example, there are 2 screens (Home
and Profile
) defined using the Stack.Screen
component. Similarly, you can define as many screens as you like.
You can set options such as the screen title for each screen in the options
prop of Stack.Screen
.
Each screen takes a component
prop that is a React component. Those components receive a prop called navigation
which has various methods to link to other screens. For example, you can use navigation.navigate
to go to the Profile
screen:
const HomeScreen = ({ navigation }) => {
return (
<Button
title="Go to Jane's profile"
onPress={() =>
navigation.navigate('Profile', { name: 'Jane' })
}
/>
);
};
const ProfileScreen = ({ navigation, route }) => {
return <Text>This is {route.params.name}'s profile</Text>;
};
The views in the stack navigator use native components and the Animated
library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be customized.
React Navigation also has packages for different kind of navigators such as tabs and drawer. You can use them to implement various patterns in your app. React Navigation on Kepler Platform currently does not support native navigation Native Stack Navigator since we do not support react-native-screens
community package yet.
Further Documentation and Examples
React Navigation also has packages for different kind of navigators such as tabs and drawer. You can use them to implement various patterns in your app.
For a complete intro to React Navigation, follow the React Navigation Getting Started Guide.
React Native Navigation
As stated above, react-native-navigation is another solution for navigation in react native applications. It is a library that offers solutions for both basic and advance navigations.
For a complete intro to React Native Navigation, follow the React Native Navigation Getting Started Guide.
Last updated: Sep 30, 2025