react-navigation/react-navigation.github.io

[DOC] Hiding bottom bar example does not work

obayit opened this issue · 1 comments

I tried the example provided in this docs page and it did not work: https://github.com/react-navigation/react-navigation.github.io/blob/main/versioned_docs/version-6.x/hiding-tabbar-in-screens.md

Here is my complete code:

export function TransNav() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="TransList" component={TransactionsList} />
      <Stack.Screen name="T1" component={TransStep1}   options={{tabBarStyle: {display: 'none'}}}/>
      <Stack.Screen name="T2" component={TransStep2} />
    </Stack.Navigator>
  );
}

function HomeTabs2() {
  return(
      <Tab.Navigator screenOptions={{ headerShown: false }}>
        <Tab.Screen name="Transactions" component={TransNav} />
        <Tab.Screen name="Receivers" component={ReceiversNav}/>
      </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home Tabs" component={HomeTabs2} />
        <Stack.Screen name="T1" component={TransStep1}/>
        <Stack.Screen name="T2" component={TransStep2} />
        <Stack.Screen name="R1" component={ReceiverStep1} />
        <Stack.Screen name="R2" component={ReceiverStep2} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Just saw what is wrong, I have a navigation to the "T1" and "T2" inside a stack that is nested inside the tab :)