Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tabs section under the navbar.

See original GitHub issue

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.

Issue Analytics

State:
Created 6 years ago
Reactions:3
Comments:10

Top GitHub Comments

5reactions

julien-mustierecommented, Mar 21, 2018

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

ex.

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

3reactions

pgonzalez-santiagocommented, Mar 2, 2018

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>