Scenario:
After selecting the "Go To Detail" button, I would like to navigate to a new page without the bottom tab navigator.
Problem:
However, the bottom tab navigator is still there.
Possible solution:
Push the "DetailView" via the root view instead of "HomeView" stack. But how to do it?
Expo project link
Updated
Changed the Drawer Navigator to include DetailNavigator, however the transition is rather abrupt and it's added to drawer which is unwanted behavior:
const DrawerNavigator = createDrawerNavigator({
Home: BottomTabNavigator,
Settings: SettingsNavigator,
Detail: DetailNavigator
});
export const DetailNavigator = createStackNavigator({
Detail: { screen: DetailScreen }
});
After changing (DetailView appear abruptly):
Before changing (DetailView appear smoothly with animation):
you probably want to hide tab bar on specific screens without changing your navigators structure, take a look here https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-tab-navigator-contains-a-stack-and-you-want-to-hide-the-tab-bar-on-specific-screens
Related
Here is the problem:
I'm using react navigator v6 and I have a very nested navigation structure like this:
App Navigator ("createBottomTabNavigator" from "#react-navigation/bottom-tabs")
++ Profile Navigator ("createMaterialTopTabNavigator" from #react-navigation/material-top-tabs)
+++ Profile screen 1
+++ profile screen 2
++ Services Navigator ("createNativeStackNavigator" from #react-navigation/native-stack and presentation: "modal")
+++ Services Screen
+++ Services Detail Screen
My challenge:
I'm trying to navigate from "Services Detail Screen" to "profile screen 2" while the first screen is opened in a modal form:
here is the code I'm using (which works on non modal presentations):
navigation.navigate(routes.PROFILE_NAVIGATOR, {
screen: routes.PROFILE_1,
params: {
screen: routes.PROFILE_2,
},
});
using this will change the route on the screen behind the modal, but somehow fails to close the modal (its not a react native modal its a modal presentation of a navigator!). Here is the condition I'm trying to explain(I moved the screen down so you can see the navigation has already applied to screen behind):
Since I'm using navigation.goBack() to close the modal; I tried applying following tweak. But no success:
navigation.navigate(routes.PROFILE_NAVIGATOR, {
screen: routes.routes.PROFILE_1,
params: {
screen: routes.PROFILE_2,
},
});
navigation.goBack();
What am I missing here? Thanks.
I have a question for React Native developers here. I use createMaterialBottomTabNavigator, and I wanted one button in the tab bar to open a screen not in a tab, but in a stack navigator instead. According to the documentation, we can prevent default behaviour with a useEffect hook in the target screen and do our navigation from there. So here is my code in the target screen :
useEffect(() => {
const unsubscribe = navigation.addListener("tabPress", (e) => {
// Prevent default behavior of tab press in bottom navigator
e.preventDefault();
// Open screen in stack navigator, not in tab navigator
navigation.navigate("TargetScreen");
});
return unsubscribe;
}, [navigation]);
It works well, except for one detail: Material Bottom Tab Navigator doesn’t mount its routes before they are first focused, so the first time I press the button it opens the screen in a tab. After that, when I press the same button, it opens the screen in a stack navigator as expected.
Does anyone know a workaround for that issue? Is there a way to force Material tab to mount routes before they are focused? Or a way to call a hook when the screen first mounts?
Thanks!
hi i"m new to react native i'm trying to build my first app
i'm having some trouble with react navigation I've done two different app container the first contain the startup Screen ,login,Signup, and Main which is the second app container that contain my other screenStacks now I've tried to implement a logout functionality but i couldn't managed how i can go back to the first app container that contain the login Screen
i'm using react navigation 3.0
i don't know if this is possible to manage ???
any help please ,thank you :)
-App
|
StarutUPScreen
SignIn
Signout
Main
....
-Main
|
mainScreen
other Screens
....
export default createAppContainer(
createSwitchNavigator(
{
StartUpScreen,
IntroOneScreen,
IntroTwoScreen,
IntroThreeScreen,
SignIn,
SignUp,
ForgotPassword,
Main (the other container)
},
{
initialRouteName: "StartUpScreen"
}
)
);
there should be only one app container
you can create multiple stack navigator and nest them together
const MainNavigator = createStackNavigator({...});
// this will have only screens from main stack
const RootNavigator = createStackNavigator({...,MainNavigator});
// root navigator will have auth part and then main stack
const AppContainer = createAppContainer(AppNavigator);
// Now AppContainer is the main component for React to render
export default AppContainer;
I think this is pretty straight forward when it comes to passing between screens of tab navigators but there seems to be a problem while trying to pass parameters from a tab navigator screen to a stack navigator screen in react-native using react-navigation.
I tried this:
onPress={() => {
this.props.navigation.navigate('review', {
aa1: 86,
bb1: 'anything you want here',
});
}}
And this:
onPress={() => this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'review', params: { aa1: 'x' }, }))}
as the onPress handler of my TouchableOpacity. None of them work. I can navigate but I can't get the params.
Below is how I try to get the parameters in the target stack navigator screen:
const { navigation } = this.props;
//if a is not passed, No a is the default value.
const a = this.props.navigation.getParam('aa1', 'NO a');
const b = navigation.getParam('bb1', 'No b');
Any ideas?
I was able to figure and solve the problem.
Problem was that name of the screen I was trying to navigate to and the name of the stack navigator (name of the stack navigator in the containing/parent tab navigator) that contained that screen was the same. And although navigation was working, the parameters were not being passed as I said in the problem description. Navigation was working because the screen that I was trying to navigate was set as the initial route in the containing stack navigator. Apparently, I was navigating and passing the parameters to the containing stack navigator. Once I changed the name of the stack navigator, the problem was solved.
Use navigation.push instead of navigation.navigate.
Reference: Oficial Docs.
I was facing the same problem, and i saw your own answer. The reason why this happens easily is that you are sending information to the stack, and not to the screens. As you can see in https://reactnavigation.org/docs/nesting-navigators, when you want to pass parameters to another screen inside a stack you need to specify the stack, then the screen and then the parameters, just like that:
navigation.navigate('Root', {
screen: 'Profile',
params: { user: 'jane' },
});
To be honest you can just put the parameters right with the screen, as in:
navigation.navigate('Root', {
screen: 'Profile',
user: 'jane',
});
I have a react-native app with two screens, Home and Details. Using react-navigation, Ive set the Stack navigator as following
const RootStack = createStackNavigator(
{
Home: FormComponent,
Details: DetailScreen
},
{
initialRouteName: "Home",
headerMode: "none"
}
);
Home contains a form, which once submitted, navigates to the Details screen with relevant data (using navigation.navigate("Details",{some data})). At this point, if I exit the app, and then open it again, the Details screen loads, with all the data preserved(Instead of the Home screen). I logged the navigation object data (this.props.navigation.) and it prints like the app was never closed.
Am I missing something here? Im new to React Native and Navigation, but from what I understand this is not expected behaviour.
Tried uninstalling app and rebuilding. This resets the app and Home screen loads. If I try reinstalling without uninstalling, back to same behaviour.
Tried also manually forcing navigation.goBack() on ComponentWillUnmount() but no difference.
This should've been a comment but sadly i don't have enough reputation.
Could you check if you haven't accidentally set a persistenceKey as a navigator prop?
https://reactnavigation.org/docs/en/state-persistence.html