Remove icon from tab navigator that nested in drawer navigator - react-native

Question

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!!

Answer 1

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