createBottomTabNavigator hide some tabs

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>
  );
};