Suppose we have the following scenario:
<Stack.Screen name="Home" component={BottomTab}
options = {{title:'Home', headerShown: false}}
/>
<Stack.Screen name = 'Create' component={BottomTab}
options = {{title:'Create'}}
The issue here is that the "Create" screen has the exact same content as the "Home" screen because they both utilize the same BottomTab component. How can I maintain the same BottomTabNavigator in both screens without them being identical? Note: These Stack.Screen elements belong to the same Stack Navigator and NavigationContainer.
Here is the code for my BottomTab component:
function BottomTab() {
return (
<Tab.Navigator
screenOptions={{
headerShown: false,
labelStyle: {fontSize:18},
activeTintColor: 'green',
tabBarVisible:false,
tabBarShowLabel: false,
}}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({ focused }) => (
<Ionicons
name={focused ? "home" : "home-outline"}
size={20}
color = {focused ? "black" : "#748c94"}
type={'Ionicons'}
/>
)
}}
/>
<Tab.Screen
name="Search"
component={Search}
options={{
tabBarIcon: ({ focused }) => (
<Ionicons
name={focused ? "search" : "search-outline"}
size={20}
color = {focused ? "black" : "#748c94"}
type={'Ionicons'}
/>
)
}}
/>
<Tab.Screen
name="Topic"
component={EmptyScreen}
options={{
tabBarIcon: ({ focused }) => (
<TouchableHighlight onPress={() => console.log('HHH')} underlayColor="white" activeOpacity={1}>
<View
style={{
width: 80,
height: 80,
backgroundColor: 'white',
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center'
}}>
<AddButton/>
</View>
</TouchableHighlight>
)
}}
/>
<Tab.Screen
name="Notification"
component={Notification}
options={{
tabBarIcon: ({ focused }) => (
<Ionicons
name={focused ? "notifications" : "notifications-outline"}
size={20}
color = {focused ? "black" : "#748c94"}
type={'Ionicons'}
/>
)
}}
/>
<Tab.Screen
name="Message"
component={Message}
options={{
tabBarIcon: ({ focused }) => (
<Ionicons
name={focused ? "mail" : "mail-outline"}
size={20}
color = {focused ? "black" : "#748c94"}
type={'Ionicons'}
/>
)
}}
/>
</Tab.Navigator>
);
}