Hide tab bar for specific screen.

[Yasir5247]

Hi, I know this is not related to the repo. but the way things are setup. i would like to know how to hide tab bar for specific screens

[kanzitelli]

Hi @Yasir5247! That's not easy as with RNN, unfortunately, and you will need to have something like explained here -- https://reactnavigation.org/docs/hiding-tabbar-in-screens/. As of now with current starter's nav setup, it's doable but will need some more code and changes to make. I will rewrite the setup a bit, so your use case would be handled easily. Thanks for creating the issue for that!

[Yasir5247]

@kanzitelli any expected aprox date? i'm actually desperate. :)

[kanzitelli]

@Yasir5247 hey! I am actually working since yesterday on a new navigation library for React Native which should work both with react-navigation and react-native-navigation and have almost the same api. But in the beginning it will only support react-navigation. So I will publish a branch with draft implementation soon and it would be great if you could help me to test it out. And approximate date will come faster 😄

[Yasir5247]

yes. i'm in for testing. :)

[kanzitelli]

Closing the issue as your use case can be achieved with expo-starter@5.0.0 and rn-navio@0.0.1. If you could test it, that would be great!

[Yasir5247]

@kanzitelli looks great so far. however "passing props to stack and tabs navigators" is very important i guess. also first screen of the stack doesn't have default header. in this case i have handle the back button etc explicitly i guess.

[kanzitelli]

hi @Yasir5247! thanks for the feedback!

yes, i’m planning to add props for navigators in the next releases. however there were some unclear moments for me, ill see how to solve that.

and yes, back button only is being shown on android when you show stack over tabs. but it doesn’t happen on iOS (in face it happens but on a higher level navigator). because when i tried to do the same with pure React Navigation, i’ve had the same behaviour. if you could achieve showing back button on the pushed stack, let me know

[Yasir5247]

@kanzitelli

import { Navio } from "rn-navio";

export const navio = Navio.build({
  screens: {
    HomeScreen: {...},
    ProductDetailScreen: {...},
    ProductDescScreen: {...},
  },
  stacks: {
    ProductStack: [
      'ProductDetailScreen',
      'ProductDescScreen',
    ],
    HomeStack: [
      'HomeScreen',
    ],
  },
  tabs: {
    HomeTab: {
      stack: 'HomeStack',
      options: {...},
    },
    ExploreTab: {
      stack: 'ExploreStack',
      options: {...},
    },
  },
  root: 'Tabs',
  hooks: [useAppearance],
  options: {
    stack: screenDefaultOptions,
    tab: tabDefaultOptions,
  },
})

imagine having this structure. on the home screen i click a product and go to product stack and show "product detail screen". on the "product detail screen" when i want to go back to the tab, right now i just do

//ProductDetailScreen.tsx
// UI Methods
const configureUI = () => {
    navigation.setOptions({
      headerLeft: () => <BButton onPress={()=> navio.popToTop()} />,
      headerRight: () => <BButton onPress={()=> {
        if(AuthUser.User.isLogin) {
          productViolationModalRef.current.open()
        }
      }}/>,
    });
 };

I'm not sure if this is the right way, since i'm new to react navigation. however it works. but the back button does't feel like the default back button though. and creating this back button manually on each stack would be kinda pain i guess if the app is big. and android doesn't work in this case 😀

[kanzitelli]

@Yasir5247 yeah, unfortunately, with rn-navio it’s not possible to have back button when pushing another stack. i’m not sure if you can achieve it with react-navigation tho, bc rn-navio is built on top of it and follows their advice for hiding tabs. i will check it more, maybe there might be a hack