React Native Make State Change From different component

Question

I am using react native and I have a situation where I navigate to a new component using react navigation v2 stack navigator. The user then presses an option and goes back to the original screen they were at with updated information.

My question is how do change the state of the previous screen so it shows the information the user selected?

ShowFruitPage.js

This page shows a list of fruits that the user picked.

export default class ShowFruitPage extends Component{

  constructor(){
    super();

    this.state = {
      List: [{Fruit: apple}]
    }
  }

  render(){
    return(
      <View style={styles.ViewStyle}>
        <FlatList
          data={this.state.List}
          renderItem={({item}) =>

              <TouchableNativeFeedback
                background={TouchableNativeFeedback.Ripple('grey')}
                onPress={() => this.props.navigation.navigate('AddFruit',
                {
                  List: this.state.List
                })}

                <View style={styles.ListView}>
                  <Text>{item.Fruit}</Text>
                </View>

              </TouchableNativeFeedback>

          }
        />
      </View>
    )
  }
}

AddFruit.js

This page shows a list of available fruits the user can pick. When the user picks from this list I want to update the list on the ShowFruitPage.

export default class AddFruit extends Component{
  constructor(){
    super();

    this.state = {
      FruitList: [{Fruit:orange}, {Fruit: pear}]
    }

    this.pickFruit = this.pickFruit.bind(this);
  }

  pickFruit(Fruit){
    //Add the picked fruit to the ShowFruitPage state List

    //Then Navigate back to ShowFruitPage
    this.props.navigation.navigate('ShowFruitPage')
  }

  render(){
    return(
      <View style={styles.ViewStyle}>
        <FlatList
          data={this.state.FruitList}
          renderItem={({item}) =>

          <TouchableNativeFeedback
            background={TouchableNativeFeedback.Ripple('grey')}
            onPress={() => this.pickFruit(item)}
            <View style={styles.ListView}>
              <Text>{item.Fruit}</Text>
            </View>

          </TouchableNativeFeedback>

          }
        />
      </View>
    )
  }

}

score 2 · Accepted Answer · answered Jun 23 '18 at 02:08

Just as you did in ShowFruitPage.js with List, you could navigate back with some state, i.e.

this.props.navigation.navigate('ShowFruitPage', { Fruit });

to make { Fruit } available on navigation.state.params when you navigate back to ShowFruitPage.

Another possibility (I think) is to provide a callback when you navigate to AddFruit that can set the data on the ShowFruitPage allowing you to then just call navigation.goBack():

setFruit = fruit => {
  this.setState({ FruitList: [...this.state.FruitList, fruit] });
}

this.props.navigation.navigate('AddFruit', { setFruit: this.setFruit });

And then:

pickFruit(Fruit){
  const { navigation } = this.props;

  navigation.state.params.setFruit(Fruit);
  navigation.goBack();
}

An alternative and heavier solution, would be to implement some state management such as redux so that the data becomes independent of the individual page components.

React Native Make State Change From different component

1 Answers1