Losing props in react native when navigating backwards

user_2621316 0
Viewed 48

I have a simple problem: I have a parent component that navigates to a child component, the child component is supposed to update the state on the parent component when the child navigates backwards (this.props.navigation.navigate("parentComponent", { params }) ). According to the docs this should be easy: https://reactnavigation.org/docs/params/

The navigation action is treated like a goBack action if the screen already exists. However when I do this and try to console.log the props in the parents screen after going back it shows it as empty.

Parent.js

 <View style={styles.availabilitycontainer} visible={true}>
          <View style={styles.titlegroupcontainer}>
            <Text style={styles.abouttitle}>Schedule Availability</Text>
            {/*Redirect to edit schedule*/} 
            <TouchableOpacity
              style={styles.cameracantainer}
              onPress={() =>
                this.props.navigation.navigate("ChildComponent")
              }
            >
              <Image source={Editoutline} />
            </TouchableOpacity>
          </View>

          <ProfileAvalability />
        </View>

Child.js

async submitToBackend(){
    /* Code to submit to backend omitted */
  this.props.navigation.navigate('ParentComponent', { params });
}
react-native reactjs javascript
1 Answers

Navigate doesn't really work that way. If it detects the ParentComponent is already there in the stack, it will simply bring it forward and not necessarily rerender/reload.

What I suggest is pass a second param as a function that will perform the changes, eg:

submitData(data) {
  setState(data)
}

then when you call the child:

props.navigation.navigate("ChildComponent", { submitData })

then inside the ChildComponent, when you're done processing, call submitData([insert your data here]), then that function will perform the write on the ParentComponent. This assumes you're using useState().

user_47137420
Related