How to transfer data between screens in Drawer navigation in React-Native - react-native

I want to take state value of one screen to another screen. How to do it? Both screens are under drawer navigation.


To pass the value between different activities
Approach 1:
Pass params to a route by putting them in an object as a second parameter to the navigation.navigate function from First Screen. Using :
this.props.navigation.navigate('RouteName', { /* params go here */ })
Read the params in your Second screen. Using:
this.props.navigation.getParam(paramName, defaultValue)
Approach 2:
By using redux. With it, you create a shared store of variables, so you can access them anywhere in the application. The following link demonstrates how to configure redux in your project. https://blog.cloudboost.io/getting-started-with-react-native-and-redux-6cd4addeb29

Related

How to pass params to stack navigator from screen

Is it possible to pass params from a React component or React Native screen to a react native screen navigator within a stack navigation.
The reason I would like to achieve this is the screen navigator has a button in it that needs to be passed a function.
So to be clear, I am using useState in a screen to save some values I am getting from a form. I would like to pass these values to the stack navigator so they can be used in a function that makes a call to an api.
Please note this question is not about passing params from screen to screen with React Navigation, I know how to achieve this using route params.

I suggest that if you hide the stack header & create your own header in the screen component, you can get all the parameters from params

Passing route.params from two or more screens to main screen [react native]

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

React Navigation infinite stack / dynamic stack

I would like to realise an infinite stack with react navigation, that means I would need a dynamic stacknavigator where I can push in a unlimited number of screens (a maximum of 20 screens would be enough). You can imagine this like in the amazon app where you can click on a related product in the product details and it shows you another product details screen where you can do the same thing.
Does anyone of you has an idea how to do that ?

This can be done with react-navigation
Instead of using this.props.navigation.navigate('ScreenName') you can use this.props.navigation.push('ScreenName')
You would probably want to pass some sort of description to the screen so that it knows what to render you can do that by passing params
this.props.navigation.push('ScreenName', { key: productId })
You would just have to set up a few template screens that could then be populated by the parameters that you pass to them.
You can see more about the different functions that react-navigation has here
https://reactnavigation.org/docs/en/navigation-prop.html#navigator-dependent-functions
Here is a snack showing it working https://snack.expo.io/#andypandy/infinite-navigation
In the snack I pass a position and date, you can see these update as each screen is pushed onto the stack. Pressing Go Back goes back one place on the stack.

componentDidMount is not working when redirect to a screen

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.

Using ex-navigation with exponent.js how do you route to a new stack?

I wish to trigger navigation to a details screen from a redux action - how do i do that with exponent ex-navigation? Should I use navigation.performAction ? Where's the documentation for that method? This would be a route with a fresh stack since they would be coming from a create screen and they shouldn't press back to the create form. This would also be a route that exists outside the tab navigation.