I did some changes in my second screen and comeback to my first screen the data is not updated. After reloading app the data is updated. How to update the data from second screen to first screen navigation without refresh or reload
What i believe without any code is that if you do navigation.goBack() or navigation.navigate() it doesnt call the api if its in your componentDidMount, what you can try is adding an eventlistener called onFocus so that whenever screen is focused you call that :
like this in your componentDidMount
componentDidMount(){
this.focusListener = this.props.navigation.addListener('didFocus', () => {
// The screen is focused
// Calling action to reset current day index to 1
this.getItineryData();
});
}
Hope it helps
Related
I have implemented react native tab navigator and added 4 screens to it.
I post some record to api in the second screen and i want to have the updated record in the 4th screens where i am getting updated records..
Useeffect only gets targeted only once, and when i put something in it's argument it gives me strange behavior.
I want useeffect to reload and call the api to get latest items in the 4th screen without putting anything in it's arguement(empty argument)
Any help would be highly appreciated.
Try doing this ;
useEffect(() => {
const unsubscribe = navigation.addListener("focus", () => {
makeApiCall();
});
return unsubscribe;
}, [navigation]);
Get navigation in component's arguments(destructuring)
like below;
const My4thTab = ({ navigation }) => {
}
This way useEffect will trigger only once, every time you come on this screen
but make sure to clear the previous state where you store your data, otherwise, there could be a record duplication.
Hope it helps :)
I'm trying to make a function execute when a view is in foreground, but just once not on each update of the component. If the user navigates to another view and goes back to the first view it should execute that function again, but just once. Is there a solution to this?
if using useEffect without second parameter it executes on each update, if I add [] as second parameter it only executes the first time the view is rendered but not when navigating back to it.
Any help appreciated!
if you are using react-navigation you can do this by listen on screen focus see here
React.useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
// The screen is focused
// Call any action
});
// Return the function to unsubscribe from the event so it gets removed on unmount
return unsubscribe;
}, [navigation]);
I need to fetch data before focus event. I saw that there was an willFocus event in react navigation 4 but it seems that the event was removed in react navigation 5.
componentDidMount cannot do the trick because I want to fetch data as soon as possible even before the screen comes into focus each time the user navigate to my screen.
You could do something like:
/**
* Your redux action should set loading-state to false after
* fetch-operation is done...
*/
reduxActionDoingFetch();
useEffect(() => {
if (reduxActionDoingFetch_Loading === false) {
Navigation.navigate('YourTargetScreen');
}
}, [reduxActionDoingFetch_Loading]);
You CANNOT fetch data before componentDidMount. That's literally the first thing happens when a new screen is rendered.
Regarding fetching data each time when the screen is focused, you need to use focus event as mentioned in the migration guide: https://reactnavigation.org/docs/upgrading-from-4.x/#navigation-events
The focus event equivalent to willFocus from before. It fires as soon as the screen is focused, before the animation finishes. I'm not sure what you mean by it fires too late.
Also, for data fetching, there is a special hook: useFocusEffect
https://reactnavigation.org/docs/use-focus-effect/
React.useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
// do something
});
return unsubscribe;
}, [navigation]);
i have two screens one where the profile information is showing and another screen to edit the information. If i entered the first screen profile it's shows me the right data from the database. Then i move to the next screen where i can change the Information everthing worked so far. But if I go back to the previous screen i still see the old data. So there is no rerendering.
But if i navigate to the other screen that screen fetched the new data. and the call getCurrentUserProfile is executed
This ist the screen with the profile information about the user.
const ProfileScreen = props => {
const [userObj, setUserObj] = useState({});
useEffect(() => {
let mounted = true;
getCurrentUserProfile().then(user => {
if (mounted) {
setUserObj(user);
}
console.log(user)
});
return () => mounted = false;
}, []);
console.log("----b------") // This is only output on the first call
}
How can i fix this. Is there a way when in the database is something changed, so the component rerender and fetches the new data.
Thanks.
You are probably using #react-navigation package. So, if you want to refetch data when come back to the previous page, you can use https://reactnavigation.org/docs/use-is-focused on that “previous” page.
Just look at their docs, you will get the idea.
P.S: Usually we don't unmount components directly. In React Native, we use navigator to mount/unmount components
I am making an react native android app in which componentWillUnmount() does not works.Suppose user enters a text value in a text input in particular screen and goes to next screen.After that when user presses back button then i want that text value written in text input to be removed.I tries by adding this line in my code.
componentWillUnmount(){
this.setState({text:""})
}
Basically i was removing the state value which i put in TextInput.But this does not works.Same this is happening in case of activity indicator.When activity indicator start to fetch data then first i check if connected to internet or not.If not then by navigation i navigate to no network screen.But from there when i presses back button then activity indicator does not go away ? So how can i remove all the value of state in a component after navigating to different screen?
React Navigation allows you to add listeners so you track actions that are happening to the screen.
There are four listeners that you can add:
willFocus - the screen will focus
didFocus - the screen focused (if there was a transition, the transition completed)
willBlur - the screen will be unfocused
didBlur - the screen unfocused (if there was a transition, the transition completed)
https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle
Here is an example of calling the willBlur, the others follow the same pattern you just change the value that is passed to the function.
componentDidMount () {
this.didBlurSubscription = this.props.navigation.addListener(
'didBlur',
payload => {
// you can perform actions here when the screen `willBlur`
this.setState({text: ''});
}
);
}
componentWillUnmount () {
// remember to unsubscribe
if (this.didBlurSubscription) {
this.didBlurSubscription.remove();
}
}
The reason your current solution is not working is that the screen isn't being unmounted it is going in and out of focus/blur. So the componentWillUnmount will not be called. Also if the component is being unmounted then you should not be trying to setState as that is an anitpattern and can lead to memory leaks.