React-native-router-flux: Tabs section under the navbar.

[pgonzalez-santiago]

Version

• react-native-router-flux v4.0.0-beta.21
• react-native v0.48.3

Right now I have a screen in my RN application that need 3 tabs in the top. My question is: It is possible to place the tabs under the navbar?

right now its looking like this:

The structure is:

           <Scene
              key="mediaContainerScreen"
              panHandlers={null}
              hideNavBar
            >
                <Tabs
                    key="mediaContainerTabs"
                    swipeEnabled
                    showLabel={true}
                    tabBarPosition='top'
                    tabBarStyle={{ backgroundColor: Colors.navBar }}
                    labelStyle={{ color: Colors.primaryColor }}
                    indicatorStyle={{ backgroundColor: Colors.primaryColor }}
                    activeBackgroundColor="white"
                    lazy
                    >
                      <Scene
                        key="Images"
                        component={MediaContainerScreen}
                        title="MediA Images"
                        tintColor={Colors.primaryColor}
                        back={false}
                      />
                      <Scene
                        key="Videos"
                        component={MediaVideoContainerScreen}
                        title="MediA VideoS"
                        tintColor={Colors.primaryColor}
                        back={false}
                      />
                      <Scene
                        key="Pdfs"
                        component={MediaPdfContainerScreen}
                        title="MediA Pdfs"
                        tintColor={Colors.primaryColor}
                        back={false}
                      />
                </Tabs>
            </Scene>
          </Scene>

I need to see the tabs down the navbar.

[filiipake]

same here

[pgonzalez-santiago]

Finally I got success with a custom navBar, the only problem with it is that I can not refresh the props of the navBar from the child components(tabs).

My structure:

           <Scene
              key="mediaContainerScreen">
              <Tabs
                  key="mediaContainerTabs"
                  swipeEnabled
                  showLabel={true}
                  tabBarPosition='top'
                  tabBarStyle={{ backgroundColor: Colors.navBar }}
                  labelStyle={{ color: Colors.primaryColor }}
                  indicatorStyle={{ backgroundColor: Colors.primaryColor }}
                  activeBackgroundColor="white"
                  navBar={MediaNavBar}
                  lazy
                  >
                    <Scene
                      key="Images"
                      component={MediaContainerScreen}
                      title="MediA Images"
                      tintColor={Colors.primaryColor}
                      hideNavBar
                      back={false}
                    />
                    <Scene
                      key="Videos"
                      component={MediaVideoContainerScreen}
                      title="MediA VideoS"
                      tintColor={Colors.primaryColor}
                      hideNavBar
                      back={false}
                    />
                    <Scene
                      key="Pdfs"
                      component={MediaPdfContainerScreen}
                      title="MediA Pdfs"
                      tintColor={Colors.primaryColor}
                      hideNavBar
                      back={false}
                    />
              </Tabs>
            </Scene>

[thomashagstrom]

I don't get any tabs at all on Android. Tabs are there, you can swipe between them, but icon and title doesn't show.
Works fine on iOS.
Works fine as long as you don't put flex: 1 style on <Tabs> component

[julien-mustiere]

adding wrap={false} to tabs component save me !!

ex.

<Stack title="Events" .... panHandlers={null} > <Tabs ... headerMode="screen" wrap={false} > <Scene/> <Scene/> </tabs> </Slack>

[Blapi]

It looks solved

[thegourav]

@pgonzalez-santiago Thanks buddy u saved my DAY i too had the same probs

[Mozartted]

@GreenCame thanks man... the wraps props was definitely the best way to solve it, but take care to avoid a Scene or a Stack on the outside in order to avoid another navbar above the Tab's navbar

<Tabs
       swipeEnabled
       type="replace"
    key="tribeSummary"
    title="Tribe summary"
    showLabel={false}
    back
    wrap={false}
>
    <Scene key="overview" title="overview" icon={TabIcon} component={TribeOverviewComponent} />
        <Scene key="harvest" title="harvest" icon={TabIcon} component={TribeHarvestComponent} />
        <Scene key="seeds" title="seeds" icon={TabIcon} component={TribeSeedsComponent} />
</Tabs>

[edoantonioco]

So as @pgonzalez-santiago stated the way to fix this is with navBar={MediaNavBar}

but what about a Scene that is a Drawer? SInce it has no component attached (to be replaced with MediaNavBar)

[IgorUsoltsev]

adding wrap={false} to tabs component save me !!

ex.

<Stack
 title="Events"
 ....
 panHandlers={null}
 >
    <Tabs
    ...
    headerMode="screen"
    wrap={false}
    >
      <Scene/>
      <Scene/>
   </tabs>
</Slack>

Adding wrap={false} also did a trick for me. Even with a standard navbar.

[MohitR1999]

Finally I got success with a custom navBar, the only problem with it is that I can not refresh the props of the navBar from the child components(tabs).

My structure:

           <Scene
              key="mediaContainerScreen">
              <Tabs
                  key="mediaContainerTabs"
                  swipeEnabled
                  showLabel={true}
                  tabBarPosition='top'
                  tabBarStyle={{ backgroundColor: Colors.navBar }}
                  labelStyle={{ color: Colors.primaryColor }}
                  indicatorStyle={{ backgroundColor: Colors.primaryColor }}
                  activeBackgroundColor="white"
                  navBar={MediaNavBar}
                  lazy
                  >
                    <Scene
                      key="Images"
                      component={MediaContainerScreen}
                      title="MediA Images"
                      tintColor={Colors.primaryColor}
                      hideNavBar
                      back={false}
                    />
                    <Scene
                      key="Videos"
                      component={MediaVideoContainerScreen}
                      title="MediA VideoS"
                      tintColor={Colors.primaryColor}
                      hideNavBar
                      back={false}
                    />
                    <Scene
                      key="Pdfs"
                      component={MediaPdfContainerScreen}
                      title="MediA Pdfs"
                      tintColor={Colors.primaryColor}
                      hideNavBar
                      back={false}
                    />
              </Tabs>
            </Scene>

Thanks for your code, I was actually stuck at creating a Tabbed Navigation and you helped me a lot :heart: