How to pass new params to previous screen in react native? - react-native

Question

I have a flatlist of movies when a user clicks on it, it passes param to movie details screen and movie detail is shown then that screen has flatlist of similar movies when user selects any of it, basically new params should be passed to movie details screen but no, it is just working as if i am tapping on back button....
onPress={() =>
this.props.navigation.navigate('MovieDetails', {
selectedItem: item,
})
} // Passing params to movie details screen
console.log(this.props.navigation.getParam('selectedItem')) //receiving params in movie details screen

Answer 1

Check this below example. Hope this will help you.
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 20, marginBottom: 10 }}>Home Screen</Text>
<Button
title="Go to Details"
onPress={() =>
this.props.navigation.navigate('Details', {
name: 'this params from homescreen',
})
}
/>
</View>
);
}
}
class DetailsScreen extends React.Component {
render() {
console.log('screen', this.props.navigation.state);
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 20, marginBottom: 10 }}>
{this.props.navigation.state.params.name}
</Text>
<Button
title="Go back"
onPress={() => this.props.navigation.goBack()}
/>
</View>
);
}
}
const RootStack = createStackNavigator({
Home: HomeScreen,
Details: DetailsScreen,
});
export default createAppContainer(RootStack);
Feel free for doubts.