Repository files navigation

A native wrapper component aroundUINavigationController for react-native.

• Currently in development... 😅 (SeeTODO.md for current progress).
• The documentation is incomplete (some parts/sections are marked asTBA i.e. "to be added").
• Some of the links in the documentation are broken (i.e. the URL points toPLACE_HOLDER_LINK).

😌💬 Hey there, if you're just checking this library out, I recommend jumping to theShowcase, Tests, and Demos section (It has a bunch of gifs showing all the various features).

Before you use this library, please first consider looking atreact-navigation,react-native-navigation, andreact-router. They offer more features, are battle-tested, well maintained, and most importantly: cross-platform. This library is more of a personal pet project 😌.

This is a wrapper library, so the goal is (for better, or for worse) to expose almosteverything to react-native.

I tried to expose, in some way or another, all the ways theUINavigationController,UINavigationBar, andUIViewController could be configured and customized. Unfortunately, this means that the API + documentation is a little dense/complex, and might be a little bit confusing to non-iOS developers (so I tried to include as much explanations, examples + gifs and images as I could).

Basically,react-nativedeprecated the built-inNavigatorIOS component starting on version0.58.

One thing that I liked aboutNavigatorIOS is that it behaved like any regular old<View/> component. Which is fun since you can just plop it down anywhere in your app, and it'll just "work" (this included the weird quirk of having multiple navigators 🤷‍♀️).

• Modal support is handled viareact-native-ios-modal (WIP)
• Adding menu's/submenu's in the navigation bar is handled viareact-native-ios-context-menu (WIP)

💡Tip: You can also just browse through the gifs/images in theShowcase, Tests, and Demos section.

• Support for using native routes (e.g.UIViewController). Allows you to combine js/react routes and native routes together.
  • Support for controlling the navigator from native/swift-side (e.g. pushing routes, etc.)
  • Support for passing data (i.e.routeProps) between native and JS/React routes.

• Support for multiple initial react/native routes (useful for state-restoration, e.g. restoring the navigation stack on app startup).
• Support for using custom transitions (e.g. crossfade, slide, flip, etc).
• Support for customizing the navigation bar either through the "legacy" API (iOS 11 and below), or the newer appearance API (iOS 13+).
  • This includes per-route customizations using either the "legacy" or "appearance" modes.
  • Support for:
    • Using routes with aUISearchBar in the navigation bar.
    • Using either custom react components or standard navigation bar controls (e.g. buttons, text, icons) for the navigation bar items (e.g. navigation bar title, left items, right items).
    • Customizing the font style of the navigation bar title + large title.
    • Per-route navigation bar visibility and status bar style.
    • Customize the navigation bar tint, background color, background image, back indicator, blur effects, shadow, etc.
    • Support for generating images (e.g. solid colors, gradients, rounded rects, etc) that can be used as the navigation bar background, navigation bar items... basically, anywhere that accepts an image.
    • Etc.

• Exposes almost all of theUINavigationController/UIViewController-related events.
• Exposes all of the things that can be configured in the view controller'sUINavigationItem (title,prompt,largeTitleDisplayMode,backBarButtonItem, etc).
• Etc.

# install via npm...npm install react-native-ios-navigator# or install via yarn.yarn add react-native-ios-navigator# then run pod install (uses auto-linking)cd ios&& pod install

📝Note: This library is written in swift, so if you're having troubles building your project, try adding an empty swift file so that Xcode will generate abridging-header.h file for your project.

In your project'sInfo.plist file, set the "View controller-based status bar appearance" key fromNO toYES. Toggling this property allows you to set the status bar style on a per-route basis.

The following build errors can usually be resolved by adding an empty swift file:

However, the older versions of the react-native template (e.g.0.63 and below) hard codes the swift library search paths to use swift5.0 (which causes the linker to mismatch the swift system libraries bundled with Xcode + iOS version). To fix this issue, just remove the following entries from the project config's library search path:

This snippet is an excerpt from theNavigation Hello World section.

import*asReactfrom'react';import{SafeAreaView,TouchableOpacity,Text}from'react-native';import{NavigatorView}from'react-native-ios-navigator';// Route to show in the navigatorfunctionExampleRoute(props){return(<SafeAreaView><TouchableOpacityonPress={()=>{props.navigation.push({routeKey:'routeA'});}}><Text> Push: 'RouteA'</Text></TouchableOpacity></SafeAreaView>);};exportfunctionApp(){return(<NavigatorViewinitialRoutes={[{routeKey:'routeA'}]}routes={{routeA:{renderRoute:()=>(<ExampleRoute/>),}}}/>);};

💡Tip: Most of the time, when a type or component is mentioned, you can click it to jump to that item in the README (or its declaration in the source code).

This component is a wrapper aroundUINavigationController, and as such, it also facilitates navigation in a stack-like manner (where in routes are "pushed" and "popped" in and out of the navigation stack). Only one route can be shown at a given time. However it is possible to have multipleNavigatorView instances at the same time.

• Each instance will have their own separate navigation stack, allowing you to show multiple routes at once.
• But do note that the 1st instance will always be treated as the "root" navigation controller, and subsequently, it’ll become responsible for handling things like setting the color of the status bar, etc.

Internally, eachNavigatorView component corresponds to aUINavigationController instance, and conversely, each route in the navigation stack corresponds to aUIViewController instance.

• The “route content” (i.e. the element returned from a route’srenderRoute function) gets wrapped inside a view controller instance.
• That view controller is then sent off to theUINavigationController.

Each route has a correspondingRouteOptions object associated with it. This object is used internally to configure various aspects of theUINavigationController,UINavigationBar,UINavigationItem,UIViewController, etc.

Listed in this section are commands that can be called to control the navigator (e.g. like showing or hiding a route, replacing a route in the navigation stack, etc). Unless specified otherwise, the commands listed here are really just invokingUINavigationController.setViewControllers internally in the native side.

• The navigation commands are asynchronous, and as such, they will return a promise that resolves once the command is completed.
• Due to timing related issues, theNavigatorView internally has a command queue, as such, only one command can be executed at a given time.
• So for example if you callpush, then callpop immediately (i.e. not waiting forpush to complete first before callingpop), they will always be executed in that order (i.e. it will always wait for the previous command to complete).

These are basically "presets" to existing navigation commands i.e. it uses the existing navigation commands available to provide shortcuts to common navigation actions for convenience.

TBA

The purpose of this component is to allow for the customization of a route after it's been pushed (e.g. like dynamically overriding/updating a route'sRouteOptions, or rendering custom components to show inside the navigation bar, etc).

📝Note: The reason why this component has the "portal" suffix is because it's "transporting" things like the route options and the render props somewhere else.

This component is meant to be used inside a route (i.e. it must be used inside therenderRoute function in theNavigatorView.routes prop). This is because internally, this component relies on react context to communicate to the parent route container (i.e.NavigatorRouteView) component.

For some extra background info, theNavigatorRouteView component is responsible for:

• A. rendering the component returned byrenderRoute,
• B. managing the route's lifecycle, and
• C. communicating with the native views/modules, etc.

As such this component doesn't actually render anything directly, it's merely an intermediate component to pass things along.

• The components you pass to theRouteViewPortal are actually being rendered in a different place in the component tree.
• Keep this in mind when using things like react context and state (this is a limitation I'm currently trying to fix).

• 📌Declaration:RouteViewPortalExample01.tsx

// 📝 Note: for the sake of brevity, some of the code is omitted...exportfunctionRouteViewPortalExample01(){const[index,setIndex]=React.useState(0);return(<SafeAreaViewstyle={styles.routeContainer}><RouteViewPortalrouteOptions={{// Change the navigation bar title textrouteTitle:`index:${index}`,// Disable large tilelargeTitleDisplayMode:'never',// Set the status bar tint to 'white'statusBarStyle:'lightContent',// Customize navigation bar appearance...navBarAppearanceOverride:{mode:'appearance',useStandardAppearanceAsDefault:true,standardAppearance:{// Set the navigation bar tint to redbackgroundColor:Colors.RED.A700,// Make the back button text whitebackButtonAppearance:{style:'plain',normal:{titleTextAttributes:{color:'white',fontSize:16,fontWeight:'600',},},},// Make the back button icon whitebackIndicatorImage:{type:'IMAGE_SYSTEM',imageValue:{systemName:'chevron.left',weight:'semibold',},imageOptions:{tint:'white',renderingMode:'alwaysOriginal',},},}},}}// Use a custom component for navigation bar titlerenderNavBarTitleItem={({routeOptions})=>(<TouchableOpacitystyle={styles.buttonContainer}onPress={()=>{// Reset the index when pressedsetIndex(0);}}><Textstyle={styles.buttonLabel}>{routeOptions.routeTitle??'N/A'}</Text></TouchableOpacity>)}// Use a custom component for navigation bar right itemrenderNavBarRightItem={()=>(<Viewstyle={styles.navBarLeftItemContainer}><TouchableOpacitystyle={[styles.buttonContainer,styles.buttonRightSpace]}onPress={()=>{// Decrement the index when pressedsetIndex(prevIndex=>(prevIndex-1));}}><Textstyle={styles.buttonLabel}>{`--`}</Text></TouchableOpacity><TouchableOpacitystyle={styles.buttonContainer}onPress={()=>{// Increment the index when pressedsetIndex(prevIndex=>(prevIndex+1));}}><Textstyle={styles.buttonLabel}>{`++`}</Text></TouchableOpacity></View>)}/><Viewstyle={styles.rootContainer}><Textstyle={styles.textTitle}>{`Current Index:${index}`}</Text></View></SafeAreaView>);};

This component allows you to subscribe and listen to the route-related events for the current route (e.g. these events include things like: when a route is about to be pushed or popped, or when a navigation bar item has been pressed, etc).

Similar to theRouteViewPortal component:

• 1. this component doesn't actually render anything, and
• 2. this component is also required to be used inside a route.
  • This is because, like theRouteViewPortal component, this component also relies on react context to communicate to the parentNavigatorRouteView component and receive the route-related events.

Internally, every route has an associated event emitter (i.e. aNavigatorRouteViewEventEmitter instance).

• The "route event emitter" instance, as the name would suggest, emits route-related events. You can use the route event emitter to manually subscribe and listen for events.
• The route's event emitter can be accessed via the route's navigation object (e.g.NavigationObject.getRefToNavRouteEmitter).
• Internally, this component uses the route's event emitter object to subscribe and listen to the route events.
• 💡Tip: As an alternative, there's also theuseNavRouteEvents hook.

Here is a list a list of the event props that this component supports. The various route-related events are documented and explained in theNavigatorRouteViewEvents section.

• Push/Pop-related Events
  • onRouteWillPush
  • onRouteDidPush
  • onRouteWillPop
  • onRouteDidPop

• Focus/Blur-related Events
  • onRouteWillFocus
  • onRouteDidFocus
  • onRouteWillBlur
  • onRouteDidBlur

• Navigation Bar Item-related Events
  • onPressNavBarLeftItem
  • onPressNavBarRightItem

• Search Bar-Related Events
  • onUpdateSearchResults
  • onWillDismissSearchController
  • onDidDismissSearchController
  • onWillPresentSearchController
  • onDidPresentSearchController
  • onSearchBarCancelButtonClicked
  • onSearchBarSearchButtonClicked

import{RouteViewEvents}from'react-native-ios-navigator';// Route to show in the navigatorfunctionExampleRoute(props){return(<SafeAreaView><RouteViewEventsonRouteDidPush={({nativeEvent})=>{console.log(`Route${nativeEvent.routeKey} was pushed...`);}}/></SafeAreaView>);};

A common UI navigation pattern is having a large header at the very top of the screen that acts as the centerpiece for a route.

• That header will either remain at a fixed size, or expand and collapse during scrolling.
• Check outNavigatorShowcase01,NavigatorShowcase02 andNavigatorShowcase03 for some examples.

The navigation bar cannot be easily customized (this is especially true you're trying to change the height).

• As such, this makes things like extending the navigation bar's height to show some custom UI elements underneath the title bar very difficult.
• It's also undesirable to create a custom built solution because the built-in navigation bar has a lot of expected native behaviors/functionality that will be hard to re-create (transitions, the back button, etc).
• To workaround this, some apps (e.g. spotify's album/playlist screen, etc) will just make the navigation bar's background transparent, and then show their custom UI elements underneath it.
  • Other apps (like twitter's profile screen) will simply just hide navigation bar entirely, and show their own custom view (you can also do that using this library by pushing a route withRouteOptions.navigationBarVisibility).

This component uses the "transparent navigation bar" approach. When in use, this component is displayed behind the navigation bar, and is anchored to the top of the screen.

• The header can either have a fixed height, or it can be paired with a scroll view so that the header will expand or collapse as the user scrolls.
• In order for your "custom navigation bar" to receive touch events, setRouteOptions.allowTouchEventsToPassThroughNavigationBar totrue.

TBA

TBA

TBA

TBA

TBA

This library is written using typescript. As such, all of the objects/types mentioned in the documentation (and all of the types exported by the library) will have a corresponding type declaration. Those type declaration can usually be found in thesrc/types directory. If a particular object is not documented here, please refer to those type declaration files instead.

See@dominicstop/ts-event-emitter for documentation.

• 📌Declaration:NavigatorRouteViewEventEmitter,ts

This type represents a route's event emitter that is used to broadcast and listen to route-related events (e.g. route lifecycle, navigation bar-related events, etc). The route event emitter is aTSEventEmitter object instance that is pre-typed with an event map based on theNavigatorRouteViewEvents enum.

These events are triggered when the current route is about to be pushed or popped from the navigation stack.

These events are triggered whenever the current route will receive or lose focus (this usually occurs whenever a route is pushed and popped from the navigation stack).

📝Note: When using a custom navigation bar items (e.g.renderNavBarLeftItem, etc.), theonPressNavBar events will not be triggered.

• Instead, use a button component (e.g.TouchableOpacity), and then wrap your custom navigation bar item inside it.

💡Tip: It's possible to have more than one navigation bar item.

• As such, to differentiate which item is pressed, you can use the properties provided byevent.nativeEvent object that you'll receive from theOnPressNavBarItemEvent.
• Some of those properties arenativeEvent.key (an optional user-defined string), andnativeEvent.index (the item's placement in the group).
  

These events are related to the route's search bar. A route can be configured to have aUISearchBar in the navigation bar via theRouteOptions.searchBarConfig property.

• 📌Declaration:NavRouteConfigItem.ts

This type is a union ofNavRouteConfigItemJS andNavRouteConfigItemNative (i.e. so you can assign either aNavRouteConfigItemJS object or aNavRouteConfigItemNative object).

This type is used to configure a route item. For "JS/React" routes, useNavRouteConfigItemJS, and for native routes useNavRouteConfigItemNative.

This type is used to create and configure a "JS/React" route.

This type is used to create and configure a "native" route.

• 📌Declaration:RouteOptions.ts

The properties that are related to each other are grouped together into their own sections.

• 📌Declaration:NavigationObject.ts

TBA

See "NavigatorView Navigation Commands" section for more info.

See "NavigatorView Convenience Navigation Commands" section for more info.

See "NavigatorView General/Misc. Methods" section for more info.

See "NavigatorView Misc. Convenience Commands" section for more info.

• 📌Declaration:NavRouteItem.ts

TBA

Represents an active route item in the navigation stack. This type extendsNavRouteItem, as such they share the same properties.

Used in theNavigatorView.SetRoutesTransformCallback function. Represents either an active route in the navigation stack, or a route that is about to be created and added to the navigation stack.

Contains properties that can be used to identify an active route in the navigation stack.

Is essentially identical to theNavRouteStackItemMetadata type, except all the properties are optional (i.e. equivalent toPartial<NavRouteStackItemMetadata> in typescript).

• 📌Declaration:NavBarAppearanceConfig.ts

TheNavBarAppearanceCombinedConfig tagged/discriminated union object type is used to customize the appearance of the navigation bar. This object is a union of two objects, namely:NavBarAppearanceConfig, andNavBarAppearanceLegacyConfig and it's separated via the sharedmode property. The former can be used if themode property is set toappearance, and the latter can be used ifmode is set tolegacy.

The navigation bar can be customized either via the "legacy" mode (i.e. using thelegacy customizations-related API), or via the "appearance" mode (i.e. using the iOS 13+UINavigationBarAppearance API).

📝Note Thelegacy mode only exists for backwards compatibility (e.g. for iOS versions that are below iOS 13). As such if you're not planning on supporting iOS 12 and below, you should probably useappearance mode instead.

• There are some things thatlegacy mode can do thatappearance mode can't (and vice versa). For example, vialegacy mode, you can set the global tint of all the navigation bar elements viatintColor.

Example Snippet

constnavBarAppearanceLegacy={mode:'appearance',// `NavBarAppearanceConfig`-related properties// ...};constnavBarAppearance={mode:'legacy',// `NavBarAppearanceLegacyConfig`-related properties// ...};

Object type that lets you customize the navigation bar using the iOS 13+ "appearance" API.

TBA

• 📌Declaration:BarButtonItemAppearance

TBA

• 📌Declaration:NavBarItemConfig.ts

This type is an object tagged union type, with thetype property being the tag that separates the unions. The table below defines the possible valid values that can be assigned to thetype property.

TBA

TBA

TBA

An intersection type that supports a combination of properties fromNavBarItemConfigBase andNavBarItemConfigShared, i.e. equivalent toNavBarItemConfigBase & NavBarItemConfigShared in typescript.

An intersection type that supports a combination of properties fromNavBarItemConfigBase andNavBarItemConfigShared, i.e. equivalent toNavBarItemConfigBase & NavBarItemConfigShared in typescript.

A union type that can either be an array ofNavBarItemConfig or a tuple containing a single element ofNavBarItemConfigCustomBase.

• 📌Declaration:RouteHeaderConfig.ts

This type is an object tagged union type, with theheaderMode property being the tag that separates the unions. The table below defines the possible valid values that can be assigned to theheaderMode property.

TBA

TBA

• 📌Declaration:RouteSearchControllerConfig

TBA

TBA

• 📌Declaration:NavigatorRouteView

TBA

• 📌Declaration:RNINavigatorRouteViewModule

TBA

• 📌Declaration:RNINavigatorViewModule

This type is an object tagged union type, with thetype property being the tag that separates the unions. The table below defines the possible valid values that can be assigned to thetype property.

TBA

• 📌Declaration:RouteSearchControllerState.ts

TBA

TBA

An intersection type that supports a combination of properties fromSearchBarState andSearchControllerState, i.e. equivalent toSearchBarState & SearchControllerState in typescript.

• 📌Declaration:ImageItemConfig.ts

This type is an object tagged union type, with thetype property being the tag that separates the unions. The table below defines the possible valid values that can be assigned to thetype property.

TBA

TBA

TBA

TBA

• 📌Declaration:NavigatorError

TBA

• 📌Declaration:NavBarAppearancePresets

TBA

TBA

Native/Swift Integration

Every route has a corresponding "route options" configuration, and there are multiple ways to provide a "route options" configuration for a given route. At the end, all of the various "route options" are combined together as a single object, and is then applied to the route.

This means that a given "route options" configuration can be overridden by another configuration. The table below will list the order of precedence in which therouteOptions gets applied (ordered by increasing priority).

TBA

TBA

Here's a bare minimum example: a navigator with a single route.

🔗 Full Example

import*asReactfrom'react';import{SafeAreaView,TouchableOpacity,Text,StyleSheet}from'react-native';import{NavigatorView,RouteContentProps}from'react-native-ios-navigator';// Route - 'routeA'// This is the component that gets shown when 'routeA' is pushed.functionExampleRoute(props){return(<SafeAreaViewstyle={styles.routeContainer}><TouchableOpacitystyle={styles.button}onPress={()=>{// when this button is pressed, push a route// with the "route key" value of 'routeA'.props.navigation.push({routeKey:'routeA'});}}><Textstyle={styles.buttonText}>           Push: 'RouteA'</Text></TouchableOpacity></SafeAreaView>);};exportfunctionExampleA01(){return(<NavigatorView// The object that's passed to the `NavigatorView.routes` prop// defines what routes can be used in the navigator.//// The object that is passed to this prop is referred to as the// "route map" (i.e. `NavRoutesConfigMap`).//// The "route map" object defines what route to show for a given// "route key".//// The object that's assigned to the "route key" is referred to// as the "route config" (i.e. `NavRouteConfigItem`).//// In other words, each "route key" in the "route map" has a// corresponding "route config" that defines what route to show.routes={{// This route has a "route key" value of `routeA`.routeA:{// show the `ExampleRoute` component when this route is "pushed".//// The `renderRoute` property accepts a function that returns a// component to show in the route.renderRoute:()=>(<ExampleRoute/>),}}}// This prop controls the initial routes to show when the navigator// first mounts.//// In this case we want to show `routeA` first.initialRoutes={[{routeKey:'routeA'}]}/>);};

The "route config", as the name would suggest, is an object that is used to configure a route. Each route has a corresponding "route config" object.

The route config object'srenderRoute property (e.g.NavRouteConfigItem.renderRoute ) defines what route to show when it gets pushed.

Via the route config object, a route can also be customized and configured further via theNavRouteConfigItem.defaultRouteOptions property (e.g.NavRouteConfigItem.defaultRouteOptions).

🔗 Full Example

// 📝 Note: for the sake of brevity, some of the code is omitted...exportfunctionExampleA02(){return(<NavigatorView// ...routes={{routeA:{// The route can be configured/customized further via the// `NavRouteConfigItem.defaultRouteOptions` property.routeOptionsDefault:{routeTitle:'Hello World',prompt:'Lorum Ipsum',// disable the "large title" for this routelargeTitleDisplayMode:'never',// show a button on the right side of the// navigation barnavBarButtonRightItemsConfig:[{type:'TEXT',title:'ABC',tintColor:'red',}]},renderRoute:()=>(<ExampleRoute/>),}}}/>);};

As mentioned before, theNavigatorView.initialRoutes prop controls what routes to show when the navigator first mounts.

For most cases, you only want one initial route. But you can define multiple initial routes if you want to (e.g. for the purpose of state restoration, etc).

🔗 Full Example

// 📝 Note: for the sake of brevity, some of the code is omitted...exportfunctionExampleA03(){return(<NavigatorView// ...//// show multiple initial routes...// Note: this prop accepts an array of `NavRouteItem` objectsinitialRoutes={[{routeKey:'routeA',routeOptions:{routeTitle:'01 (Root)'}},{routeKey:'routeA',routeOptions:{routeTitle:'02'}},{routeKey:'routeA',routeOptions:{routeTitle:'03'}},{routeKey:'routeA',routeOptions:{routeTitle:'04'}},{routeKey:'routeA',routeOptions:{routeTitle:'05'}},{routeKey:'routeA',routeOptions:{routeTitle:'06'}}]}/>);};

The "navigation object" contains:
A. Information about the current route (e.g.routeKey,routeOptions, etc).,
B. Commands to control the navigator (e.g. pushing and popping routes, etc).,
C. Commands to configure the current route (e.g.setRouteOptions, etc).

There are two ways to get the navigation object. The first way is to simply get the navigation object via the props:

// 1. your route component will automatically receive the `NavigationObject` via props.functionExampleRoute(props){const{ navigation}=props;return(// ...);};// 2. If you are using typescript, you can use (or extend) the `RouteContentProps` type.importtype{RouteContentProps}from'react-native-ios-navigator';functionExampleRoute(props:RouteContentProps){consttext=`The current route key is:${props.navigation.routeKey}`;return(// ...);};

The second way to get the navigation object is via using context:

// 1. For convenience, there's a pre-built hook to get the navigation object// via context.import{useNavigation}from'react-native-ios-navigator';functionExampleRoute(){constnavigation=useNavigation();return(// ...);};// 2. Or altenatively, you can use the `NavigationContext` directly for more// flexibility and control.import{NavigationContext}from'react-native-ios-navigator';functionExampleRoute(){return(<NavigationContext.Consumer>{(navigation)=>(// ...)}</NavigationContext.Consumer>);};

Via the navigation object, you can send commands to the navigator. In other words, you can control the navigator via the navigation object.

For example, you can push a new route into the navigation stack using the "push" command:

// The push command accepts an object...navigation.push({// The "route key" of the route that is to be shownrouteKey:'routeA'});

Using the push navigation command, you can send data (i.e. "route props") to the next route. The data can then be read via the navigation object (i.e.NavigationObject.routeProps).

In other words, the "route props" allows you to transfer information to the next route. In the example below a counter is displayed. Thecount value is then incremented whenever a new route is pushed into the navigation stack. As such, for each time a new route that is pushed into the stack, the counter increments by 1.

🔗 Full Example

// 📝 Note: for the sake of brevity, some of the code is omitted...functionExampleRoute(props){// Get the count from the prev. route.constprevCount=props.navigation.routeProps?.count??0;// Save the count to stateconst[count]=React.useState(prevCount);return(<SafeAreaViewstyle={styles.routeContainer}><TouchableOpacitystyle={styles.button}onPress={()=>{// Push route when this button is pressed...props.navigation.push({routeKey:'routeA',routeProps:{// ... and send the count to the next route.count:count+1,},routeOptions:{routeTitle:`Count:${count}`},});}}><Textstyle={styles.buttonText}>{`Push and Increment Counter`}</Text></TouchableOpacity></SafeAreaView>);};

Setting the "route options" of a route allows you to customize its appearance and behavior. As discussed in the earlier sections, when creating the configuration of a route in theNavigatorView.routes prop, you can optionally provide aRouteOptions configuration object via theNavRouteConfigItemJS.defaultRouteOptions property.

But there areother ways to provide a route with aRouteOptions config. For example, some of the navigation commands lets you set the route's route options. One such navigation command ispush.

The route options that you provide via the push command will be combined with that route's initial route options (i.e. the route options that were provided via the route config:NavRouteConfigItemJS.defaultRouteOptions).

In the example below, we set the new route'srouteTitle and also provide aprompt message to display in the navigation bar.