Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested tabs are not working and Header is removed by nested tabs. #2929

Closed
netsmertia opened this issue Mar 11, 2018 · 2 comments
Closed

Nested tabs are not working and Header is removed by nested tabs. #2929

netsmertia opened this issue Mar 11, 2018 · 2 comments

Comments

@netsmertia
Copy link

Version

Tell us which versions you are using:

"react-native-router-flux": "^4.0.0-beta.28"
"react-native": "0.53.3",

Expected behaviour

Nested Tabs like
Tab 1 (title = STARS)
Tab 2 (Title = REQUESTS)
-> Tab 2.A (tabbar=top, title = REQUESTS)
-> Tab 2.B (tabbar=top, title = REQUESTS)
Tab 3 (Title = ACCOUNT)

whatsapp image 2018-03-11 at 8 02 46 pm

Above navigation is build by React Navigation by putting a TabNavigator in another TabNavigator.

Actual behaviour

issues

  1. No title in 2nd tab (nested tab).
  2. Nested tab not behave as it should be. No tab switching. Primary tabs are still working.
    screen shot 2018-03-11 at 8 45 19 pm

screen shot 2018-03-11 at 8 45 29 pm

Steps to reproduce

Create a tab with title and 3 bottom tabs.
put nested Tab with 3 tabs in 2nd tab of primary. (secondary tab should be under the same title as given by 2nd primary tab).

This is my router structure.

    <Router>
      <Scene key="root">
        <Scene key="mainTab" tabs tabBarPosition="bottom"
          showLabel={false}
          showIcon={true}
          tabBarStyle={styles.tabBarStyle}
          navigationBarStyle={styles.navigationBarStyle}
          titleStyle={styles.titleStyle}
         >
          <Scene key="stars" component={StarsScreen} icon={getTabIcon} tabIndex="stars" title="STARS"></Scene> 
          <Scene key="requests" hideNavBar = {false} icon={getTabIcon} tabIndex="request" title="REQUESTS">
            <Scene key="inner" tabs tabBarPosition="top" hideNavBar = {false} title="googd">
              <Scene key="t1" component={DeclinedTab} icon={getTabIcon} tabIndex="stars" title="STARS"></Scene> 
              <Scene key="t2" component={PendingTab} icon={getTabIcon} tabIndex="stars" title="STARS"></Scene> 
            </Scene>

          </Scene>
          <Scene key="account" component={StarsScreen} icon={getTabIcon} tabIndex="account" title="MY ACCOUNT"></Scene> 
        </Scene>
      </Scene>
    </Router>

I have also tried to put the secondary tab directly under the 2nd tab of primary and different combination of hideNavBar but got the same issues.

@telmen
Copy link

telmen commented Jul 3, 2018

?

@aksonov
Copy link
Owner

aksonov commented Aug 8, 2018

Please try to reproduce it with Example project and latest version 4.0.0-beta.40. Feel free to open if the issue still exists

@aksonov aksonov closed this as completed Aug 8, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants