Remove icon from tab navigator that nested in drawer navigator

Viewed 106

I make drawer.navigator that nested tab.navigator, Then show an icon that I didn't add to the code! and tried to remove it but couldn't...!! Does anybody have an idea?

<NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home">
          {()=>
            <Tab.Navigator screenOptions={{
                ***// I try this but didn't work.***
                // tabBarIcon: ()=>{return null}
                tabBarIcon: ({focused,color,size})=>
                {
                  ***// I do what in here???***
                },
                tabBarIconStyle:{
                  // I try this too but didn't work.
                  display: 'none',
                },
                tabBarStyle: {
                  borderTopColor: 'rgba(0, 0, 0, .2)',
                },
                tabBarLabelStyle: {
                  fontSize: 13,
                  // I use one of this then run code! one time I use two of this! but didn't 
                     worked!!
                  textAlignVertical: 'center',
                  justifyContent: 'center',
                },
                tabBarLabelPosition: 'beside-icon'
              }}
            >
              <Tab.Screen name="Todos" 
                options={{
                  headerShown: false,
                }}>
                { ()=>
                  <Home
                  todos={todos} 
                  pressHandler={pressHandler} 
                  submitHandler={submitHandler}
                  />}
              </Tab.Screen>
              <Tab.Screen name='CompleteTodos' options={{headerShown: false}}>
                  {()=> 
                    <CompleteTodos 
                      todos={todos}
                      pressHandler={pressHandler}
                    />}
              </Tab.Screen>
            </Tab.Navigator>
          }
        </Drawer.Screen>
        <Drawer.Screen name="About" component={About} />
        <Drawer.Screen name="Settings" component={Settings} />
      </Drawer.Navigator>
    </NavigationContainer>

with no options

with display: none. BUT THE LABEL DIDN't CENTERED!!

with no options

with display: none. BUT THE LABEL DIDN't CENTERED!!

1 Answers

You can completely replace the tab component for a custom made by you.

As noted in the React Navigation docs:

tabBarButton: props => <TouchableOpacity {...props} />

You can find further information on how to fully customized your navigation here: https://reactnavigation.org/docs/bottom-tab-navigator

Related