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.
If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native
UINavigationController class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following libraries provide native navigation on both platforms: native-navigation, react-native-navigation.
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
Then you can quickly create an app with a home screen and a profile screen:
Each screen component can set navigation options such as the header title. It can use action creators on the
navigation prop to link to other screens:
React Navigation routers make it easy to override navigation logic or integrate it into redux. Because routers can be nested inside each other, developers can override navigation logic for one area of the app without making widespread changes.
The views in React Navigation 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 easily customized.
NavigatorIOS looks and feels just like
UINavigationController, because it is actually built on top of it.
Like other navigation systems,
NavigatorIOS uses routes to represent screens, with some important differences. The actual component that will be rendered can be specified using the
component key in the route, and any props that should be passed to this component can be specified in
passProps. A "navigator" object is automatically passed as a prop to the component, allowing you to call
pop as needed.
NavigatorIOS leverages native UIKit navigation, it will automatically render a navigation bar with a back button and title.
Check out the
NavigatorIOS reference docs to learn more about this component.
You can edit the content above on GitHub and send us a pull request!