createBottomTabNavigator hide some tabs - react-native

Question

I have following tab navigator defined for react native 6 for a screen, so there are 3 screens in total A, B and C. But I don't want to show "C" since it can be reached by navigating from A.
const Tab = createBottomTabNavigator();
const Main: () => React$Node = props => {
return (
<Tab.Navigator
<Tab.Screen name={Routes.A} component={A} />
<Tab.Screen name={Routes.B} component={B} />
<Tab.Screen name={Routes.C} component={C} />
</Tab.Navigator>
);
};
there has been a solution using style to hide component C. but after upgrading react from 5 to 6, it has stopped to work and I read the documentation and try using new properties without success,
tabBarOptions={{
showLabel: false,
style: {
height: Dimensions.DIMENSION_BOTTOM_TAB_BAR_HEIGHT,
width: '200%',
paddingBottom: 0,
},
visible: false,
}}>
so what is the react 6 way of setting width so component C can be hided? Another question is that (I am new to react), is there any way adding component C into the route for current screen without even having it as <Tab.Screen>. This is the content from ComponentA, the ideal solution here is to add ComponentC here but I tried add component binding in MenuItem without success, it complains there is no such route handled by any navigator. Is is not the same as using createStackNavigator
const Menu: () => React$Node = props => {
return (Colors.COLOR_BLACK]}
<VScrollLayout contentContainerStyle={{flexGrow: 1}} style={styles.content}>
<View style={styles.innerContainer}>
<MenuItem
image={<Image source={Images.ICON_C} />}
text={i18n.t('C')}
route={Routes.C}
navigation={props.navigation}
/>
</View>
</VScrollLayout>
);
};

Answer 1

The correct navigation would be to put the TabNavigation as root (main) navigation and in each tab you have a StackNavigation. If you need to access screen C from both A and B, you can add them in both StackNavigations. (A + C and B + C).
Edit:
code:
const TabAStack = createStackNavigator();
function TabAStackNavigation() {
return (
<TabAStack.Navigator >
<TabAStack.Screen name={Routes.A} component={A} />
<TabAStack.Screen name={Routes.C} component={C} />
</TabAStack.Navigator>
);
}
const TabBStack = createStackNavigator();
function TabAStackNavigation() {
return (
<TabAStack.Navigator >
<TabAStack.Screen name={Routes.B} component={B} />
<TabAStack.Screen name={Routes.C} component={C} />
</TabAStack.Navigator>
);
}
const Tab = createBottomTabNavigator();
const Main: () => React$Node = props => {
return (
<Tab.Navigator
<Tab.Screen name={Routes.TabA} component={TabAStackNavigation} />
<Tab.Screen name={Routes.TabB} component={TabBStackNavigation} />
</Tab.Navigator>
);
};

Answer 2

solve the problem by setting extra width for the tabs that I want to show
<Tab.Screen name={Routes.A} component={A} options={{ tabBarStyle: { width: '500%' } }}/>
<Tab.Screen name={Routes.B} component={B} options={{ tabBarStyle: { width: '500%' } }}/>
<Tab.Screen name={Routes.C} component={C} options={{ tabBarStyle: { width: '200%' } }}/>
I totally understand it is an ugly solution, but it will stay before I learn how to add ComponentC into VScrollLayout