React Native Router Flux - Little Guide on Tabs

Guide.md

Intro

This is one of the great navigation library, just with too little doc on customization, and unfortunately tab is one of them.

Example

<Scene key="myTabBar" tabs={true} hideNavBar tabBarStyle={style.tabBarStyle}>
  <Scene 
    key="myTab" 
    title="My Tab" 
    icon={MyTabIcon} 
   >
      <Scene key="myTab_1" component={MyTabComponent} />
      <Scene key="myTab_2" component={MyTabComponent} />
  </Scene>
</Scene>

Reference In the following, Tab refer to <Scene> with icon , Child refer to <Scene> wrapped by Tab Tabtree/tabbar refer to Tab's parent <Scene> with tabs=true: <Scene tabs=true>...</Scene>

Not so well mentioned behaviour

0. Tab must has at least 1 Child to enable its own navigation stack
1. Default Actions' behaviour (or scene type) of Tab is JUMP
2. If you want to intercrept Tab tapping or changing the default behaviour, write your own onPress function

  <Scene 
    key="myTab" 
    title="My Tab" 
    icon={MyTabIcon} 
    onPress={()=> {
     ...
    }}
   >

3. You should call the the Tab key in Actions.KEY in order trigger JUMP behaviour when using your own onPress function or from elsewhere, not Child key. (See inner routing)

Actions.myTab({propsToPass})

4. To "reset" the Tab's history and back to the first Child, use

 Actions.myTab_1({type: ActionConst.PUSH_OR_POP, refresh:{propsToPass} });

5. To reuse scenes in tab, put them outside the Tabbar, with props clone=true

//under same root
<Scene key="myTabBar" tabs={true} hideNavBar tabBarStyle={style.tabBarStyle}>
  <Scene 
    key="myTab" 
    title="My Tab" 
    icon={MyTabIcon} 
    onPress={()=> {
      Actions.myTab_1({type: ActionConst.REFRESH});
    }}
   >
      <Scene key="myTab_1" component={MyTabComponent} hideNavBar/>
  </Scene>
</Scene>
<Scene key="info" clone ... />

6. No RNRF lifecycle method is called during switching to mounted tab except props changed.
   • no componentWillUnmount() called by RNRF
   • no componentWillMount() will be called again by RNRF
   • no componentDidMount() will be called again by RNRF
   • At most of the time constructor() will be called only when new instance is created (first load or clonable scene)

Common Tweaking

1. Do something onMount or unMount of Child => seek alternative
2. Intercept => See Detailed Example) for reducer demo
3. Different OS tab behaviour:
   • iOS: static tabbar, tab switching will not destroy the navigation stack and scroll position, but tapping the icon will reset the navigation stack
   • Andriod: tabbar may hide (TBC)

could you please tell me how to get a navbar and tabs at the same time on same page