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.
Related
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));
I am use bottom navigation, i get value form asyncStorage in componentDidMount but every time i have to hard refresh for new value, when i please first screen to second screen and get new value in first screen but new value is not updated. so how refresh first screen with new value
In bottom navigation the component does not go out of scope. In other words, component does not reload so componentDidMount() won't be called again. Better to use state management like Redux or Mobx. Let them handle the changes instead of reading from asyncStorage. If a Mobx Store gets updated it'll automatically refresh your values wherever you are accessing it.
ComponentDidMount is executed only at the start. So if you want to update data again and again after a specified time you might have to use something like setInterval in componentDidMount or if you want to fetch new data whenever a user clicks on something then you can do that by making a new separate function which would fetch data and update the state.
Whenever you update the state, the component almost instantly rerender.
Try Setting unmountOnBlur to true in navigation options
So every time the screen goes out of focus it is unmounted and when you come back to screen it is mounted again and data will be refreshed
Using unmountOnBlur - Bottom Navigation
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 having problem when I push to next screen.
Lets say from screen A(product details screen) -> screen B(product details screen)
Currently I am successfully move from screen A to screen B. But the problems is when i navigate back to screen A, the data in screen A already updated which is same as screen B.
Below is how i update my screen data by using componentDidMount() and navigate to next screen using push.
componentDidMount() {
this.props.getDetails(id);
}
this.props.navigator.push({
screen:'myapp.productDetailsScreen'
})
Is it something i missed that accidentally update screen a data when i navigate to screen b?
Screen A and Screen B share the same component (they just render different value based on the id given).
I am using this library
react-native-navigation v1 (wix)
Any help is appreciated! Thanks.
if you are using redux you the redux state between both of the screens is shared. that is why it is updated on both screens.
I am using react-redux and react-native's navigation in my app. My goal is of navigate after successful API call from Screen A -> Screen B -> Screen C and so on.
This is what I'm doing in the app.
On Screen A, button is pressed, and an redux action is generated.
Action is internally calling an API and getting result and dispatching event to reducer state.
After reducer's state gets updated (Success cases), I wanted to navigate to Screen B.
Again same 1-3 steps for Screen B to Screen C.
I did tried following approaches:
Adding navigation code in componentWillReceiveProps:
Problem with this approach is, its calling all the componentWillReceiveProps of navigation stack. This is rendering current screen multiple times before navigating to next screen (I observed this behaviour from Screen B -> Screen C)
Adding navigation code render method itself and returning null.
Again problem here is, what if I have multiple reducer mapped in one screen. Again I will be navigating more than once if both reducer changes.
I thought of using EventListener's, but than I have to keep track of adding and removing them.
Any ideas on how can I achieve this.
Thanks