This package provides flow integration for react-native-navigation as well as some helpers for common options and deep linking support. A wrapper approach (as opposed a flow-typed definition compiled from typescript) was chosen as by refactoring the API, it was possible to take advantage of flow's opaque types and variance, providing additional type safety not possible with the original API. The main motivation of this was to have type-checking between a component key and its props when creating a Layout to display, similar to what React.createElement does.

Keys and Intents

The biggest difference from the original API is the signature of registerComponent . In react-native-navigation, it takes a unique string key plus a component provider, and returns nothing. The provided key is then used to refer to the component when creating layouts. With such a signature, it is impossible to tie the type of the key to the type of the component due to incorrect variance. The wrapped function has a type equivalent (as the following is only valid in flow ≥0.89) to

registerComponent : ComponentClassKey < Props >

In the wrapper, this function refactored so that it takes a component and returns a unique key (whose representation contains the component's name for debugging purposes) to create layouts with. This key is of the opaque type ComponentClassKey<-Props> which witnesses the type of props required by the component and must be matched by a passProps object of that type by Intent() (or the helpers which calls it). This creates an object of another opaque type ComponentIntent which witnesses the type check, (similar to how React.Element witnesses the check done by createElement ), which replaces the untyped {name, passProps} objects in navigation Layout s, which are otherwise the same as in react-native-navigation .

A number of other identifier types are given their own opaque types to prevent accidental mixing with ordinary strings. Component instance IDs are given their own type ComponentId and are wither received through a componentId prop or generated globally with the function makeStaticComponentId(string) . These static IDs are useful for components such as the root stack which must be manipulated from outside their own hierarchy, such as a main stack which gets manipulated by its sibling in a sideMenu layout.

Top bar buttons IDs use the opaque type ButtonId , values is uniquely generated by the function ButtonKey() . This type is both required in button definitions in the options and is provided to event handlers.

Function reference

Keys

makeStaticComponentId : StaticComponentId ; registerComponent : ComponentClassKey < Props > ; Intent : ; ButtonKey : ? ButtonId ;

Options

type Options = { | ... | } ; mergeOptions : void ; setDefaultOptions : void ;

Layouts

type Layout = { | ... | } ; setRootLayout : void ; pushStackLayout : void ; pushStackScreen : void ; popStack : void ; clearStack : void ; replaceStack : void ; pushModalLayout : void ; pushModalScreen : void ; popModal : void ; clearModals : void ; pushOverlay : void ; popOverlay : void ; openLeftMenu : void ; closeLeftMenu : void ;

Events

type CancelBind = => void bindLocalEvents : ( Component & EventObserver ) => CancelBind ; bindGlobalButtonPressed : void ) CancelBind ; bindDeepLinks : CancelBind ;

Entry point

runNavigationApp : mixed ) void ;

Options helpers

A number of objects are included representing commonly-used sets of Options , which can be combined using spread syntax.