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.
Related
I have a flatList with 3columns in a row in screenA and also there is screenB with a flatList that also shows screenA data in different way. Once user click an item in screenA it navigate to screenB and scrolls to item's index. I am using react-query for fetching data. My question is how can I handle fetchNextPage in true way. Because if user scrolls in screenB next page data should be loaded in both screens. Is it correct to pass all {data, fetchNextPage, hasNextPage, refetch} returned from useInfiniteQuery to screenB? or there is another solution?
Briefly something like instagram's profile screen. As you can see in main profile screen under a tab user click on item and it's navigate to second image. All the data loaded in second screen when user scrolls also loaded in main profile tab.
thanks for any help
I am using react navigation v6. I use navigation.navigate() to move to another screen and navigation.jumpTo() for my custom tabs. The issue I am facing is, after I navigate to a different screen and go back to the previous screen with a new params passed, the navigation is unable to read the jumpTo() anymore as it becomes undefined.
Example:
The screen navigation below is working fine without any params get passed
Screen A > Screen B > Screen A > Screen Tab 1
This 2nd example is when there is a params get passed back to Screen A and jumpTo() Screen Tab 1 will throw error undefined
Screen A > Screen B > Screen A (username: john) > Screen Tab 1
Based on the React Navigation Navigate documentation, it will push a new screen if it has a different params, in my case is Screen A (username: john). So I guess that is what causing the error to appear.
Is there a way to keep the jumpTo() function or any similar method I can use? I don't want to use redux if possible.
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 am using the react-native-navigation package.
The problem is that on navigation from one to another screen,
it shows briefly a white screen.
How can I have the next screen ready, so that when I change the screen it shows the pre rendered screen, not a white screen?
Thanks
The screen should not be white when you navigate to it, unless you are trying to fetch data from a web-service or the AsyncStorage.
The only method that can be used before a screen is loaded is the componentWillMount() method, which is generally used to prepare for the first render, in the sense that it is used to handle the configuration and the state.
In any case, if you want to avoid the white screen when you are fetching data from the AsyncStorage, use a Splash Screen.
Try not to fetch datas in componentWillMount(), do this in ComponentDidMount().
Let me knowif you were doing so.
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