1
Get focused screen index outside Screen and Navigator
Mihai Darie
I want a custom tab bar only on some screens in a tab navigation without creating a nested navigation. I need to know the index of the focused screen so that I can tell my custom tab bar (which is outside navigator) when to pop up. The index should be from the initial rendering of screens and not from the list of navigated ones.
Activity
Justin D Mathew
Can you do this with the screen key and then dynamically render it in the options?
Mihai Darie
Justin D Mathew: the screen key would come in the form of 'Home-T2QK7wb-wG_l0BnwUjpJY', and would be accessed only inside Screen component={Home} as props which implies creating nested navigations, there are a few methods which would solve my problem above but all of them seem hacky while the solution would be simply to provide the index of the focused screen from the root state of the navigation. That way you know everywhere in the navigation context what screen is currently focused from the initial stack
Mihai Darie
Justin D Mathew: But actually you gave me a good ideea, I used this link: https://reactnavigation.org/docs/navigation-container/ where I found that I can use the navigationRef.getCurrentOptions() to get what is written in the options, and I can use the options to add an index property to each route. Whatsoever I can also write a isCustomBarVisible in the options which would render that component wherever I need it to. So thank you.
So far this feels like that least "workaround" method of them all.
Justin D Mathew
Great to see you found a solution. Also just a note you can set the screen key by using the
key
prop when initialising a screen. This way you don't have to check for something like: Home-T2QK7wb-wG_l0BnwUjpJY
but rather you could check for just say home
Justin D Mathew
Personally I don't think I fully understand the use case as it feels like switch out the tab bar on certain tab screens would be confusing to the user. They must be navigating to those screen via the tab bar, and then the tab bar changes when they navigate to the screen? Or am I missing something here?
Mihai Darie
Justin D Mathew: Unfortunately setting the key won't actually change the key of the route, it still is the generated key
Mihai Darie
Justin D Mathew: Let's say that you want both a side drawer navigator and a bottom bar navigator. If you try to nest them then they will individually appear when one of the navigators is selected, which is not the desired effect. You can otherwise have a Side bar navigator and a bottom bar navigator custom component rendered on some desired Screens, but that does not feel very modular.