Comments (11)
An ideal way I can think of accomplishing this is to introduce a tabBarHiddenOn
property that would contain all the screens by key, that the tabBar should be hidden on. By default tabBarVisible
would be set to true. This would be a far cleaner solution than writing logic based on the index.
In the above example it could look like this:
export default createBottomTabNavigator(
{
Posts: {
screen: Posts,
navigationOptions: {
tabBarHiddenOn: [ 'viewPost', 'searchPosts' ]
}
}
}
from rfcs.
I read the documentation for "A stack contains a tab navigator and you want to set the title on the stack header". The suggested solution works for setting header titles. But it quickly breaks down when we need control things more complicated than the title.
Our problem with the approach is that the navigator needs to know about how the header should behave with each screen. We have some button controls in the header that interacts with the content of the screen. It makes more sense to have the button logic in the navigationOptions
of each screen than in the navigator.
See react-navigation/react-navigation.github.io#152 (comment) where I explained the use case before.
from rfcs.
The solution provided only works for navigators that are direct descendants of the TabNavigator. For nested navigators navigation.state
does not change.
// Main Tab navigator
export default createBottomTabNavigator(
{
Posts: {
screen: Posts, // Posts.jsx
navigationOptions: ({ navigation }: any) => {
let tabBarVisible = true
if (navigation.state.index > 0) {
tabBarVisible = false
}
return {
tabBarVisible,
},
},
Lecturers: {
screen: Lecturers, // Lecturers.jsx
navigationOptions: ({ navigation }: any) => {
let tabBarVisible = true
if (navigation.state.index > 0) {
tabBarVisible = false
}
return {
tabBarVisible,
},
}
}
// Posts.jsx
export default createStackNavigator(
{
posts: {
screen: Posts,
},
viewPost: {
screen: ViewPost,
},
searchPosts: {
screen: SearchPosts,
},
},
{
headerMode: 'screen',
}
)
Posts.jsx works as expected since it's one level deep.
// Lecturers.jsx
const PushStack = createStackNavigator(
{
lecturers: {
screen: Lecturers,
},
viewLecturer: {
screen: ViewLecturer,
},
viewCourse: {
screen: ViewCourse,
},
},
{
headerMode: 'screen',
}
)
export default createStackNavigator(
{
Main: {
screen: PushStack,
},
newReview: {
screen: NewReview,
},
search: {
screen: Search,
},
},
{
mode: 'modal',
}
)
However Lecturers.jsx doesn't work because it has a nested stack.
Example video:
https://www.useloom.com/share/8278cf55d92a452d9818df5e132d0ac7
from rfcs.
@brentvatne can you look into this issue. My app update is pending due to this issue. Your current update to this navigationOptions seems not at all intuitive ones navigators start getting nested.
from rfcs.
@leethree yes even I faced the same issue, it just doesn't feel right to put the navigationOptions for a particular screen in the navigator and also it does not work when having buttons which setParams. But in those cases, they are recommending to go with the first option of putting each Tab screen as a separate Stack and control the header for these Stacks individually. But I don't know if this is the right way to go.
from rfcs.
can people create some snacks with examples of their problems please? https://snack.expo.io
from rfcs.
@brentvatne Here's the snack for my scenario above https://snack.expo.io/@roach_iam/react-navigation-tabs-nested-stacks. As you can see the tabBar doesn't hide for the Lecturers stack.
from rfcs.
@leethree and @iRoachie how did you solve this problem? I am still waiting for a fix to this problem. @brentvatne I think u should look into this issue. What used to be a normal solution in v1.0, seems now like a huge code mess and still, I can't make it work in v2.0.
from rfcs.
@ravirajn22 I didn’t actually solve it per say. I used a workaround in that I moved all my modals into one navigator at the root of my app.
from rfcs.
@ravirajn22 No we haven't found a clean solution for this, so we are still using v1.0 🤷♂️
from rfcs.
The only thing that worked for me
const homeScreenStack = createStackNavigator({
Home: {
screen: Home,
navigationOptions: ({ navigation }) => ({
title: "Home"
})
},
Comments: {
screen: Comments,
navigationOptions: ({ navigation }) => ({
title: "Comments"
})
}
});
homeScreenStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
for (let i = 0; i < navigation.state.routes.length; i++) {
if (navigation.state.routes[i].routeName == "Comments") {
tabBarVisible = false;
}
}
return {
tabBarVisible
};
};
from rfcs.
Related Issues (20)
- Action property that indicates to routes that they should not change index HOT 1
- Improve ergonomics of back HOT 1
- Navigator config to pass params down HOT 1
- Add unsetParams to navigation prop HOT 2
- Reset state action HOT 2
- Expose logic for initializing state of createAppContainer HOT 4
- On will/didFocus subscribe, stop firing the listener if current screen is focused HOT 2
- Idea: Preloading HOT 6
- <StaticNavigator> for tests/storybook HOT 14
- StackActions.popToRouteName(routeName) HOT 2
- Alternative API for defining navigators HOT 12
- how to send navigation events between peer navigators? HOT 4
- Deep linking with authentication
- How to hide tab bar item n react-navigation HOT 3
- Ability to show screens on top of native modals
- useNavigationParams hook HOT 1
- Add useMaterialTabsHeight HOT 1
- Typesafe Stack & Navigation HOT 1
- devTools prop HOT 5
- [RFC] TabView API change
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rfcs.