Navigator Best Practices in React Native

Navigator Best Practices in React Native

Navigator is the default navigator for React Native. The navigator component maintains a stack of root objects and provides methods for managing that stack. Manage the route stack. First, pay attention to the InitialRoute Prop.

The root is just a JavaScript object; it can take any shape and value. This is the primary way to pass values and methods between components in the navigation stack. The navigator knows what to render based on the value returned by the renderScene property.

Consider the implementation of ExampleScene in this example. Configure the navigator. You can use the configure scene prop to configure the navigator transitions. This is a function that you have passed a root object and should return a configuration object. The available configuration objects are:

Navigator.SceneConfigs.PushFromRight(default)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump

You can return one of these objects unchanged or modify the configuration object to customize the navigation transition. For example, change the edge hit width to more closely emulate the Interactive PopGestureRecognizer in the iOS UINavigationController.

Manage the navigation bar

Manage the navigation bar

The navigator component comes with a navigationBar prop that can theoretically contain a well-configured React component. However, the most common implementation uses the default Navigator and NavigationBar. This requires a routeMapper prop that allows you to configure the appearance of the navigation bar based on the route. routeMapper is a regular Javascript object with three functions: Title, RightButton, and LeftButton.