navigation-experimental-notes.md

NavigationExperimental notes

Containers

RootNavigationContainer

• You pass the reducer to this, it actually ultimately receives all navigation calls via onNavigate, which is mostly equivalent to Redux dispatch. It setState and persisting state. it is like the redux "store"

NavigationContainer.create

• This is like react-redux's connect but it doesn't pull in any state, it passes in the wrapped component an onNavigate` (as mentioned above, it's like dispatch and ultimately gets called on RootNavigationContainer) that it grabs from the parent context.
• Another key difference is that you can override onNavigate for this component and its children that are also NavigationContainers by providing onNavigate as a prop to this component (see here: https://github.com/facebook/react-native/blob/1c507e62910f00606f61e8ae4b8c9b7ccceec2e6/Libraries/NavigationExperimental/NavigationContainer.js#L21-L41). You might want to do this to prevent navigation from children or to add some information to the action or whatever.

Core

StateUtils

• State can have "parent" states.. parent states are states that have children.
• Defines basic utility functions for modifying navigation state, like push, pop, jumpTo and reset.

Reducers

• Reminder: Reducers functions are that take current state and action and return a new state.
• So in terms of navigation, we take the navigation (pop, push, jumpTo) and add it to the end of the route stack. But in Redux multiple reducers can respond to a single action. Let's look at "push" for example, eg: you have a Home tab and a Profile tab, both respond to the push action, but you only want one to update state (probably the one that is active). This is different from when you update the "Like" count on a post and want that to be reflected on the Profile and Home screens.

StackReducer

• If your navigation state is managed by a single StackReducer, this is simple. It switches on the action type and calls the appropriate StateUtils function to produce the new state.
• Only supports nested reducers through push right now. See https://github.com/facebook/react-native/blob/1c507e62910f00606f61e8ae4b8c9b7ccceec2e6/Libraries/NavigationExperimental/Reducer/NavigationStackReducer.js#L130-L135 push.

FindReducer

• Initialized with a set of subreducers, call that result with action and state and the state will be the result of the first subreducer that responds to the action.

TabReducer

• You provide TabReducer with a tabReducers array which contains the subreducers, one for each of your tabs. This is like combineReducers from Redux, but it uses FindReducer so that the action will only update a max of 1 subreducer at a time. It might not update any, for example if the action is one that the TabReducer itself responds to then (currently) the action won't be passed to any of the subreducers.
• If an action is processed by a different subtab than is currently selected, the selected tabIndex will change to that tab.

Views

NavigationView

• Takes the navigation state and renders a "scene" for each. Each "scene" view is absolute positioned and takes up the full size of container. The scenes are hidden (0 opacity) when they aren't the active component.
• Useful for things like tab navigation where you want the new scene to appear and the other to disappear, without any transition.

NavigationAnimatedView

• This is like NavigationView but rather than doing absolute positioning to full size and setting 0 opacity, NavigationAnimatedView exposes an important AnimatedValue: position. When the navigation state index changes (eg: you push a new scene so you go from 0 to 1), that value is animated using Animated.spring.
• You can get access to the position value through renderOverlay (which is meant for things like nav bars or modals, something that overlays content) and renderScene. This allows you to create animated transitions. You don't want to do this work yourself all the time (although it's great that we can customize this!), so there are a few built in components that provide good animation support for you.

CustomComponents

CardView

• Use this inside of renderScene for NavigationAnimatedView and pass it the position and layout (another value provided by NavigationAnimatedView in the renderScene fn, see Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js ).
• The CardView gives you the typical slide-in-from-right-on-push style animation that you expect on iOS.

NavigationHeader

• Use this with renderOverlay on NavigationAnimatedView, pass the position into it as a prop (see same example as above).
• Gives you the animated transitions that go along with the CardView.