Search code examples
react-nativereact-native-router-flux

Maintaining tabs across all scenes using React Native Router Flux


Does anyone know if it is possible to maintain the tabs (tab bar) across all scenes in React Native Router Flux?

Example of what I am trying to achieve is, in the below example, I want to show the tabs "Home" and "PictureList" on all scenes, in the example also the "PictureDetail" scene. But I do not want PictureDetailScene to be included as a tab in the actual tab bar. Basically want to maintain a tab bar as a global navigation across all other scenes.

Is this possible? Or would I need to create my own tab bar and maintain it outside RNRF?

<RootScene>
  <Tabs>
     <HomeScene>
     <PictureListScene>
  </Tabs>
  <PictureDetailScene>
</RootScene>

Solution

  • Try adding clone prop to your PictureDetailScene. That whay it will use the Scene it was called from as a template. So if it is called from a tabScene, it will use the tab scene as a template and show the tabbar.

    <RootScene>
      <Tabs>
         <HomeScene>
         <PictureListScene>
      </Tabs>
      <PictureDetailScene clone>
    </RootScene>
    

    Edit

    If you are pushing PictureDetailScene from PictureListScene why don't you place your PictureDetailScene and PictureListScene inside a Scene stack as follows:

    (notice that for a Scene to have nested Scenes in it, the parent should not have a component assigned to it (prop component is not set)

    <RootScene>
      <Tabs>
        <HomeScene>
        <Scene key="YOUR_PICTURE_LIST_KEY">
          <PictureListScene>
          <PictureDetailScene clone>
        </Scene>
      </Tabs>
    </RootScene>
    

    Let me know if that works for you. If not I'll spin a quick RNRF project and share the working code for yor case with you