navigator deep dive

navigator.md

What's navigator'?

navigator' :: forall r eff. Prop (NavigatorProps r eff) -> r -> SceneRenderer r -> ReactElement
navigator' p initialRoute renderScene = navigatorU $ unsafeApplyProps {initialRoute, renderScene} p

Wrapper around https://facebook.github.io/react-native/docs/navigator.html and the unsafe constructor navigatorU.

What's r?

newtype Navigator r = Navigator (forall props state. ReactThis props state)

r is a combination of props and state type under a "this" context.

What's NavigatorProps?

type NavigatorProps r eff = {
    ref :: RefType (Navigator r)
  , configureScene :: SceneConfigurer r
  , initialRoute :: r
  , initialRouteStack :: Array r
  , navigationBar :: ReactElement
  , navigator :: ReactElement
  , onDidFocus :: UnitEventHandler eff
  , onWillFocus :: UnitEventHandler eff
  , renderScene :: SceneRenderer r
  , sceneStyle :: Styles
  , style :: Styles
}

NavigatorProps is a spec describing initial state, styles, transitions, and events liking "scenes"

Also, Prop is just a helper to make using record syntax easier:

type Prop a = a -> a

What's a SceneRenderer?

newtype SceneRenderer r = SceneRenderer (Fn2 r (Navigator r) ReactElement)

Takes this, applies it to a navigator and gets a ReactElement

So in the end, what is navigator'?

Given a route -> spec, some initial props, and a way to render scenes, give me an Element.