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

How to combine tabs and navbar in react-native-router-flux?


I want to create next structure for my app settings screen header:

|<-  Settings     |
|-----------------|
| Tab 1  |  Tab 2 |
|-----------------|
|                 |
|   Active tab    |
|    content      |
|                 |
|                 |

I tried to do that:

<Provider store={store}>
    <RouterWithRedux>
        <Scene key="root">
            <Scene key="landing" component={Landing} title="Landing" initial={true} />
            <Scene tabs key="rootTabBar" back wrap={false} title="Settings">
                <Scene key="home" component={Home} title="Home" icon={TabIcon} initial />
                <Scene key="search" component={Search} title="Search" icon={TabIcon} />
            </Scene>
        </Scene>
    </RouterWithRedux>
</Provider>

but I get not what I expected, on attached screen is wrong tabs names


Solution

  • This code worked for me

     <Scene key="root" hideNavBar headerStyle={{ marginTop:STATUSBAR_HEIGHT, elevation:0}} >
    
                <Scene key="main" hideNavBar >
    
                    <Scene key="newsList"
                        tabs={true}
                        hideNavBar={false}
                        headerMode='none'
                        navBar={Header}
                        wrap={false}
    
                    >
                        <Scene key="TehcList" component={TehcList} title="Teknoloji" />
                        <Scene key="GameList" component={GameList} title="Oyun" />
                    </Scene>
    
                </Scene>
            </Scene>