I am using react navigation and I need to hide some tabs while use tab navigation in my app. I want navigation to any screen any screen in tabs navigation but only want to display certain tabs. How should I write Tab navigation ?
const TabNav = TabNavigator ({
Dashboard: {
screen: Dashboard,
}
},
Post: {
screen: Post,
},
Browse: {
screen: Browse,
},
Inbox: {
screen: Inbox,
},
More: {
screen: More,
},
})
I added my tab navigation now. Suppose I do not want to show Inbox screen but want to use its navigator to navigate to Inbox from any screen and from any screen to Inbox using navigator.
Related
Current Behavior
I have a TabNavigator with 4 tabs, each tab is a stackNavigator, and for now each stackNavigator has only one screen: home, maps, reservations, profile. I'm using React Navigation 4.
In every tab I put the navigationOption tabBarOnPress to navigate between the screens, so in this way the backBehavior: 'history' makes sense.
const TabNavigator = createBottomTabNavigator(
{
Home: {
screen: HomeStack,
navigationOptions: {
tabBarOnPress: ({navigation}) => {
navigation.navigate('Home')
},
}
},
//other tabs
},
{
initialRouteName: 'Home',
backBehavior: 'history'
}
)
But if I navigate between screens maybe in the order HOME -> PROFILE -> HOME -> MAPS, the stack of the routers is PROFILE, HOME, MAPS, because of the behavior of the navigate function.
In a similar way, when we are on an android device and push the back button, the order of the visited screens is MAPS -> HOME -> PROFILE and if we push on the back button again we exit from the app, putting it in the background. Now, coming back in the app, the opened screen is PROFILE, and it is also the first route in the navigation stack.
Expected Behavior
When I reopened the app from the background, I don't want to be in the PROFILE screen, but in the HOME screen. I want to reset the first route in navigation stack, changing it with the HOME stack. This would be the same behavior of Instagram (try to go to home -> profile -> home, push the back button two times; now push the back button a third time: the app goes in the background; now reopen Instagram: the app restarts from the home page)
Maybe too late, but add this in your App:
React.useEffect(() => {
const appStateChangeSub = AppState.addEventListener(
"change",
(nextAppState) => {
if (nextAppState === "active") {
NavigationService.navigate("Home");
}
}
);
return () => {
appStateChangeSub.remove();
};
}, []);
NavigationService -> see doc
I've created drawer navigator in tab navigator now I've 2 problems about it I need assistance with,
Firstly, Drawer Navigator isn't accessible in other two tabs.
Secondly, I want to redirect user to first screen of drawer on double click of bottom navigator first item i.e. ABOUT.
const TabNavigator = createBottomTabNavigator(
{
ABOUT: MyDrawerNavigator,
Who: WhoScreen,
What: WhatScreen,
},
const MyDrawerNavigator = createDrawerNavigator(
{
AimOfSeminar: {
navigationOptions: { drawerLabel: 'Aim of Seminar' },
screen: AimScreen,
},
ConceptNote: {
screen: ConceptScreen,
},
Speakers: SpeakerTab,
MediaCoverage: {
screen: MediaCoverageScreen,
},
},
}
What I want is:
Bottom Tab Navigator accessible on all screens. (1)
Drawer Navigator accessible on all tabs.
Go to main route of first tab on double click.
Make Drawer preview on top of bottom tab navigator by current setting bottom navigator appears on top, if I rearrange navigators I get drawer navigator on top but it generates problem (1) of above list.
I am trying to achieve the Uber type navigation.
Drawer is opened
User clicks on a route
Drawer closes
The page opens as a modal
The only way to access the drawer is by closing the modal
I thought of a few ways to do this. Create a stack navigator with all the routes and create a custom drawer and when a route is clicked I activate the close method and navigate to page with modal.
const MainNavigator = createStackNavigator({
one: { screen: one },
two: { screen: two },
three: { screen: three}
}, {
mode: 'modal',
initialRouteName: 'one'
});
However. this requires me to create the drawer component, which I am trying to avoid for right now.
When I use the createDrawerNavigator, I get the drawer component, but I can't achieve the navigation I need. Any advice? Is it possible to put the stack navigator inside the drawer?
I have two components (List and Detail):
List.js:
export default class List extends React.Component {
render() {
const {navigate} = this.props.navigation;
return (
<View style={styles.container}>
<Text style={styles.headerText}>List of Contents</Text>
<Button onPress={()=> navigate('Detail')} title="Go to details"/>
</View>
)
}
}
Detail.js:
export default class Detail extends React.Component {
render() {
return (
<View>
<Text style={styles.headerText}>Details of the content</Text>
</View>
)
}
}
I would like to have two screens (NowList and SoonList) which are basically the same type of list, so I am using the same List component for both the screen. And from each of these screens I want to navigate to the Details of the item, also which in this case has the same type of layout so I am using Detail component for both the list items.
Finally, when the App starts I want the NowList screen to show. And using the drawer I would like to navigate to SoonList screen.
I am not sure how to configure this route. But, this is how I have configured the routes for now:
const NowStack = StackNavigator({
NowList: {
screen: List,
navigationOptions: {
title: 'Now',
}
},
Detail: {
screen: Detail,
navigationOptions: {
title: 'Detail',
}
}
});
const SoonStack = StackNavigator({
SoonList: {
screen: List,
navigationOptions: {
title: 'Soon',
}
}
});
export const Drawer = DrawerNavigator({
Now: {
screen: NowStack,
},
Soon: {
screen: SoonStack,
}
});
When I navigate from NowList route to Detail route. There's a back button in the Detail route which on press navigates back to the NowList.
However, when I go to Soon route, and navigate to Detail route, I go to Detail screen. But, when I press the back button on Detail navigation header, instead of navigating back to the SoonList screen, I am navigated to the NowList screen.
I think I am missing something here, or my route layout is not how its suppose to be. Could you help me how to configure the routes so that I can use DrawerNavigator to navigate to different screens, and from those screens navigate to another screen and again back to the screen navigated from?
You can make a stack navigator that contain your drawer navigator and detail, this way you can access both now list and soon list from drawer and able to navigate to detail screen from both list.
const App = StackNavigator({
Drawer: {
screen: Drawer,
},
Detail: {
screen: Detail,
navigationOptions: {
title: 'Detail',
},
},
});
const Drawer = DrawerNavigator({
NowList: {
screen: List,
},
SoonList: {
screen: List,
},
});
Your route layout doesn't specify a Detail screen in the SoonStack navigator. When you navigate to Detail, react-navigation navigates to the only screen that is named that way. Since it is in the NowStack, going back returns to the first screen in the stack.
To solve this, you can add another Detail screen to the SoonStack navigator, however you'd want to either name it differently, or navigate to each Detail screen using its key.
In order to be able to navigate to the right Detail screen, you can add a parameter to each stack navigator.
For example:
const SoonStack = StackNavigator({
SoonList: {
screen: List,
navigationOptions: {
title: 'Soon',
}
},
SoonDetail: {
screen: Detail,
navigationOptions: {
title: 'Detail',
}
}
},{
initialRouteParams: {
detailScreen: 'SoonDetail'
}
});
You can then use the parameter to navigate to the correct screen.
Also, it's possible to only use a single StackNavigator with the three distinct screens in it, and reset the stack to the correct screen when switching with the drawer.
You can read more about reset here.
how to use reset
If you have a single stack navigator:
const TheStack = StackNavigator({
NowList: { screen: List, ... },
SoonList: { screen: List, ... },
Detail: {screen: Details, ... }
});
Then the drawer can reset the stack state to be whatever you want. For example, if the first screen was NowList and SoonList is clicked in the drawer, you can call:
const action = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({routeName: 'SoonList'});
]
});
this.props.navigation.dispatch(resetAction);
This would cause the stack to reset and have the SoonList as the first screen. If Details is opened, then it is the second in the stack, and back will always go back to the correct screen.
I have a login Screen, when the user login they are brought to a screen similar to the one shown above.
In this screen, I have a tabNavigator containing tabs to 5 screens, similar to the one shown in the image above. It also has a header kinda thing with search bar in it. This header is only supposed to be shown in 4 of the 5 tabs and there is a different header i need to display in the 5th tab.
Is there a way to do this? I know i can add a view in 4 of the 5 tabs that render same header and a view in the 5th screen that renders a different header, But I was wondering if there is a way I could do this without having to render the same view in all the 4 tabs again and again.
P.S It should work on both iOS and Android
You can configure header of TabNavigator by navigationOptions:
const TabNav = TabNavigator({
First: { screen: FirstPage },
Second: { screen: SecondPage },
Third: { screen: ThirdPage },
Fourth: { screen: FourthPage },
Fifth: { screen: FifthPage }
}, {
navigationOptions: {
header: <SearchHeader />
}
})
And then custom navigationOptions in FifthPage:
class FifthPage extends Component {
static navigationOptions = {
header: <FifthPageHeader />
}
}
I just created a demo on Expo Snack: https://snack.expo.io/rJDGpmPHZ, the 5th screen has a blue header, and the others have a red one.
In the document of TabNavigator at https://reactnavigation.org/docs/navigators/tab#Screen-Navigation-Options, it hasn't list the header option, I think it will be pass to StackNavigator.