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

user_12163730 0
Viewed 492

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
react-native-navigation react-native
1 Answers

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.

user_126306190
Related