I'm in a situation that user needs to navigate for a moment to group of other screens to add some data and then go back to the first screen.
The first screen has data that was passed to it through navigate params. I need this data to remain after changing screens.
This works when user in order to get back there is using couple times
navigation.goBack()
but when I try to go back to specific screen using
navigation.navigate({key: 'edit'})
then it pops
Render error
undefined is not an object (evaluating '_route$params.payment')
Use popToTop or pop to go back multiple screens.
import { StackActions } from '#react-navigation/native';
navigation.dispatch(StackActions.popToTop());
// or
navigation.dispatch(StackActions.pop(2));
Related
I have a problem to pass params to main screen from multiple other screens.
When I'm getting params from second screen params from first screen are removed.
I'm using workaround with useEffect and useState to keep those data from params but maybe there is simpler solution to this problem?
If you are passing params from first screen to main screen, then send only first screen params.
If you are passing params from second screen to main screen, then first pass first screen params to second screen and then pass both first and second screen params to main screen.
Alternatively you can set your params in Context API to keep your params saved throughout the app. Please read https://reactjs.org/docs/context.html and this
I want to get original state when exist screen and return back to current screen in react native.
I hope this is the situation where you are navigated to screen B from screen A. Now you are returning back to screen A.
As react holding the latest state values in this scenario, you have to do it manually.
Inside componentDidMount(), consider this method
this._navListener = this.props.navigation.addListener("willFocus", () => {
// reset the state variable here...
});
this willFocus method has been called every time that particular page coming to the front view. Try this If you are still not clear, please revert back to me.
I have come across a problem where I basically don't really have ideas on how to move on.
I have a StackNavigator with two screens, one is called "HomeScreen", the other one is called "SettingsScreen". When I click on a button, I get to "SettingsScreen".
I also have a DrawerNavigator, with which I can navigate to one of the four screens and Screen 4 is the StackNavigator.
DrawerNavigator:
Screen1
Screen2
Screen3
Screen4
- HomeScreen
- SettingsScreen
(Hopefully it is somehow understandable)
So let's come to the problem...
My problem is that my "SettingsScreen" has the function to add items to an AsyncStorage key (it pushes it to the array so at the end I have a list which I render on my "HomeScreen"), but when I have added the item and return to my "HomeScreen", it won't reload the page. How can I make it so it will reload the page when some condition is met or even simpler - how do I reload the page every time I leave "SettingsScreen"?
It would help to see your code and also to know what version of React Navigation you are using. Most likely you can "push" to the navigation stack which will do a fresh reload of whatever screen you are going to. You would have something like this in your function:
this.props.navigation.push('HomeScreen')
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'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 ...