how to hide the icon from the tab bar of selected scenes

[smhassan90]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0 (v3 is not supported)
• react-native v0.53.3

<Router navBar = {navBar}>
          <Scene key="root">
            <Scene key="LoginScreen" initial component={LoginScreen} hideNavBar />
            <Tabs key="tabs" tabBarStyle={styles.tabBarStyling}  hideNavBar tabBarPosition='bottom'  showLabel={false} swipeEnabled={false} lazy={true} backBehavior={'initialRoute'}>
              <Scene key="BiographyScreen"  hideNavBar title="Biography" icon={TabIcon}  component={BiographyScreen}/>
              <Scene key="EventLocation" hideNavBar title="EventLocation" icon={TabIcon} component={EventLocation}/>
              <Scene key="EventStream"  hideNavBar title="EventStream" icon={TabIcon} component={EventStream} />
              <Scene key="Settings" hideNavBar title="Settings" icon={TabIcon} component={Settings} />
              <Scene key="MenuList"  hideNavBar component={MenuList}/>
              <Scene key="TableList" hideNavBar component={TableList} />
            </Tabs>
          </Scene>
        </Router>

Expected behaviour

I want to hide icons of MenuList and TableList from tab bar, but want to show tab bar while user is on that scene.

Actual behaviour

It is not showing the icon but it is showing the empty space.

[eyexx]

Me, too !😭

[eyexx]

Does anyone know how to fix this???

[smhassan90]

I fixed it by making it a child of some scene. Let me know if you need more clarification.

[eyexx]

@smhassan90
Thanks, I was able to resolve!

[smhassan90]

How did you resolve? I want to know if there is some good work around

[eyexx]

<Scene>
               <Tabs key="main" style={{ backgroundColor: '#003366' }}
               >
                   <Scene
                       title = "Write"
                       key="writemessages"
                       component={WriteMessages}
                   />
                   <Scene                     
                       rightTitle="Yours"
                       title="Ranking"
                       key="showmessages"
                       component={ShowMessages}                 
                   />

                   <Scene
                       title="MyPage"
                       key="mypage"
                       component={MyPage}
                       direction='vertical'                     
                   />

               </Tabs>
               </Scene>
               <Scene key="sub">
               <Scene
                   title = "Yours"
                   key="showyourmessages"
                   component={ShowYourMessages}
               />
                <Scene
                    title = "Details"
                    key="showdetails"
                    component={ShowDetails}            
                />
               <Scene
                   title = "MyMap"
                   key="showmymap"
                   component={MypageMap}
                  
               />
           </Scene>

I did like this. i made another scene which does not have tag element and I put what i do not wanna show tabs there.

[aksonov]

Closing because of correct solution, thanks @Koshukey