I'm struggling with what I would hope is a simple issue. I have multiple StackNavigators with various screens in each and I'm using a Drawer to move between the main stacks in addition to .navigate. Like this:
Main Stack
Main Screen (entry)
Member Profile
Inbox Stack
Inbox Screen
Message Details Screen
On the message details screen a user can navigate to Profile. So Message Details > Profile. This works great, as it does throughout the app. Navigation in the same stack works great both forward and back. I'm using the standard .navigate to move forward.
this.props.navigation.navigate('MemberProfilePage')
However if I tap the back button - or set a custom back button - the user is taken all the way back to the Main screen. And If I tap on Inbox in the drawer, the screen will still be on the Message Details.
But I really just want to go: Message Details > Profile ... Profile goBack() to Message Details.
I've tried the default goBack(), I've tried dispatching a back action like this:
const backAction = NavigationActions.back({
key: 'ProfileScreen'
})
or
const backAction = NavigationActions.back({
key: null
})
Thanks for any direction.
Edit: the initial suggestion about setting the backButton in Drawer appears to work. But it doesn't solve the problem.
I don't want to be taken back to the initial screen of the current stack. I want to go back to the screen I navigated from which is in a different Stack.
Had the same problem with two navigators and going back always takes you correctly on one, and wrong on the other as it pops to the root of the current StackNavigator.
For me, the solution was to reference the same screen in both stackNavigators, and when you navigate to it from two different navigators, the same screen will be shown, but it will be loaded from different navigator and everything should work fine. Hope this helps.
In your DrawerNavigatorConfig change this props
backBehavior='none' //default is initialRoute
backBehavior - Should the back button cause switch to the initial
route? If yes, set to initialRoute, otherwise none. Defaults to
initialRoute behavior.
https://reactnavigation.org/docs/navigators/drawer#DrawerNavigatorConfig
check if its working ...
Related
I created a tab navigator for an app using #react-navigation/native: ^6.0.16. But when I tried to go back it always goes back to the first screen on the tab navigator.
For example if I navigate from Home >> Notifications >> Profile and press the android back button instead of Notifications I reach Home. Basically going back on any tab (other than Home) navigates me back to home.
This issue does not seem to be a problem for #react-navigation/native: v5.x but I rather not go back to using version 5.x.
Is there any way I can fix this issue on version 6.x?
You can checkout a small snack of the issue here.
Just goto package.json and replace "#react-navigation/native": "^6.0.16", with "#react-navigation/native": "^5.9.8", to get the intended output.
As per docs here, you can specify the behaviour you want:
This controls what happens when goBack is called in the navigator.
This includes pressing the device's back button or back gesture on
Android.
It supports the following values:
firstRoute - return to the first screen defined in the navigator
(default) initialRoute - return to initial screen passed in
initialRouteName prop, if not passed, defaults to the first screen
order - return to screen defined before the focused screen history -
return to last visited screen in the navigator; if the same screen is
visited multiple times, the older entries are dropped from the history
none - do not handle back button
I'm trying to navigate to a specific screen when user clicks a notification. I'm using react-native-push-notification and it works great. The problem is, for some reason navigation doesn't happen.
I call this function onNotification, and it's being executed
function onNotificationOpened(notification) {
console.log('navigating')
console.log(NavigationActions)
NavigationActions.navigate('Journal')
}
So 'navigating' is printed on the console, as well as NavigationActions with a function navigate in it. So it's there. But when app opens, navigation doesn't happen and the app stays on the same screen. There's no typo or anything in the screen name. After the app opens I can navigate normally. It doesn't matter if I put navigation there or not, the app still opens on the main screen.
I'm thinking that it could be that navigation does happen, but just a bit prior to app itself opens the main screen. I'm not sure of that of course, it's my guess.
Am I doing anything wrong here?
what you want to do is similar to deep linking,lock at this
,there are some helpful answers.
Try this on your onNotificationOpened function
let isBackground = notification.foreground;
if(isBackground == true){
this.props.navigation.navigate('Journal');
I am having componentDidMount to list set of files(images) in a screen A, from this screen A I am having another screen B link where I can see detailed view of a file and there I have an option to delete a document.
When screen A is called using
<TouchableOpacity style={Styles.HomeButton} onPress={ () => this.props.navigation.navigate('Gallery')}>
<Text style={Styles.HomeButtonText}>View Photos</Text>
</TouchableOpacity>
componentDidMount working fine, But when I delete a file (i am using react-native-fs) on unlink callback I am calling the navigation like
this.props.navigation.navigate('Gallery');
Which is working fine redirecting to Screen A, but componentDidMount is not working which means I can still see that deleted file in the list.
i.e Screen A is not refreshing, is there any possible solution?
In react-navigation, the component will not unmount if you navigate to other screens unless you reset the stack in stack navigation. So when you come back to the previous screen, as it is already mounted, componentDidMount will not trigger.
You can bind a react navigation event listener to trigger some piece of code when you get back to the screen.
this.focusListner = this.props.navigation.addListener("didFocus",() => {
// Update your data
});
Don't forget to remove event listeners while you unmount the component.
componentWillUnmount() {
// remove event listener
this.focusListner.remove();
}
Possible reason, why your componentDidMount() is not working, is because screen B may be possible a modal.
In the case of modals, the previous component does not unmount, and the next screen just opens upon it. So when you go back to the previous screen, it does not mount again. That's why your list is not updating.
Solution
You have to change the state of the component which is supposed to rerender. The best solution here, and which I also use, is a state management library like Redux. So when you delete the item from screen B, just also update the redux store accordingly. So every component that using that reducer will rerender and you can also save one hit to your server.
You should consider refreshing your list on navigation's didFocus event. Clearly if you are using a stack navigation with A -> B, and once you delete your file from B and goes back to A, provided that A is already in the stack so the didMount wont work when you navigate back.
So, ideally you must refresh your list on the didFocus event of the navigation using some kind of flag set in redux when you delete the file and once you get back to A you read the status of the flag and refresh your list accordingly.
You can refer this to better understand the navigation props and the lifecycle events
You may want to check the NavigationEvents API here : https://reactnavigation.org/docs/en/navigation-events.html .
To solve your problem you want to use the navigation event onDidFocus instead of componentDidMount !
This is a way easier way to than to use the imperative API as it takes care of subscribing and unsubscribing the listeners.
I don't know if I am the one getting it wrong. I am working on a project, I use react navigation, and I am using drawer and stack navigator. But when I click on any menu on the drawer 1. The drawer will remain open until the next page appear 2. The menu that I click will remain active until the next screen appear.
I try to check other application performance, they don't perform like that. Is that how react navigation works or am I the one getting it wrong?
Please help because I am new to react native and react navigation.
i came across a post on Fixing common performance problems in React Navigation
i just change the code in componentdidmount method like this
componentDidMount(){
InteractionManager.runAfterInteractions(() => {
// Component is done animating
// Start making any request
});
};
with that my problem is solved but i dont know if is the right way of doing it.
I've created a Snack for this: https://snack.expo.io/HJebCIoiM
The problem is really simple, but most issues I've found on GH and SO are about the opposite behaviour: resetting the StackNavigator to its initial route when switching between items in the DrawerNavigator.
App structure
Drawer
Router
First screen
Second screen
Other screen
The initial route is Router, which by default shows the first screen.
Current behaviour
I go from the first screen to the second screen
I toggle the drawer
I go to the other screen in the drawer
I go back to the Router
It shows the first screen
Expected behaviour:
In step 5. it should show the second screen, because that's the last route I was on when I toggled the DrawerNavigator.
I don't understand why it doesn't preserve the state of the stack, and just takes me back to the screen I was on before, but instead resets the stack to its initial route.
What confuses me even more is that many people are reporting that this is the default behaviour of their app, but they do want to reset the stack and are struggling with this:
Resetting the navigation stack for the home screen (React Navigation and React Native)
Clear stack being navigated to React-Navigation
How to reset the state of a StackNavigator nested in a DrawerNavigatior?
I don't understand why it does reset it all the time in my case. (and as you should be able to reproduce with the Snack I posted above.