react-navigation : passing state between screens correctly - react-native

Question

I am trying to pass state between screen.
I followed the instructions from
Passing parameters to routes I am able to pass state from my Home screen to detail screen but when I try to pass back state from detail screen to Home screen the state is not pass.
I have agree button in Home screen and when I check on the button and navigate to detail screen, button is checked(so far good).
However, if I uncheck the button from Detail screenand navigate back to Home screen the state is stillchecked`.
Try the code from expo
This is my Home screen code:
const imageOn = require("./iconCheck.png");
const imageOff = require("./emptyCheck.png");
class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
agreeState: this.props.navigation.getParam('agreeServiceFromChild'),
};
}
checkStateImage(){
if(this.state.agreeState === undefined){this.setState({agreeState:false},()=>console.log(this.state.agreeState,'agreeState'))}
if(this.state.agreeState === true){return(imageOn)}
if(this.state.agreeState === false){return(imageOff)}
}
render() {
const { navigation } = this.props;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<CustomCheckBox
onPress={() => this.setState({agreeState: !this.state.agreeState}, ()=> console.log (this.state.agreeState,'agreeState'))}
onPressButton={() =>
this.props.navigation.navigate('Details', {
agreeServiceFromParent:this.state.agreeState,
})
}
source={this.checkStateImage()}
text='agree'
buttonText='go to DetailScreen'
/>
</View>
);
}
}
This is my Detail Screen code:
class DetailsScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
agreeState:this.props.navigation.getParam('agreeServiceFromParent'),
};
}
checkStateImage(){
if(this.state.agreeState === undefined){return(imageOff)}
if(this.state.agreeState != undefined && this.state.agreeState === true){return(imageOn)}
if(this.state.agreeState != undefined && this.state.agreeState === false){return(imageOff)}
}
render() {
const { navigation } = this.props;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<CustomCheckBox
onPress={() => this.setState({ agreeState: !this.state.agreeState}, ()=> console.log(this.state.agreeState,'agreeServiceFromChild childview'))}
source={this.checkStateImage()}
text="agree"
onPressButton={() =>
this.props.navigation.navigate('Home', {
agreeServiceFromChild:this.state.agreeState,
})
}
buttonText='go to HomeScreen'
/>
</View>
);
}
}

Answer 1

rather than putting in constructor , try putting it in componentDidMount() . PFB the code ive updated from expo snaack . and ive used navigation.push in place of navigation.navigate , coz push always makes an implicit push at top of navigator stack .,
import React from 'react';
import { Button, View, Text, TouchableOpacity, Image } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
const imageOn = require("./iconCheck.png");
const imageOff = require("./emptyCheck.png");
class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
agreeState: false,
};
}
componentDidMount(){
let stateOfBut = this.props.navigation.getParam('agreeServiceFromChild');
this.setState({agreeState:stateOfBut})
}
checkStateImage(){
if(this.state.agreeState === undefined){this.setState({agreeState:false},()=>console.log(this.state.agreeState,'agreeState'))}
if(this.state.agreeState === true){return(imageOn)}
if(this.state.agreeState === false){return(imageOff)}
}
render() {
const { navigation } = this.props;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<CustomCheckBox
onPress={() => this.setState({agreeState: !this.state.agreeState}, ()=> console.log (this.state.agreeState,'agreeState'))}
onPressButton={() =>
this.props.navigation.navigate('Details', {
agreeServiceFromParent:this.state.agreeState,
})
}
source={this.checkStateImage()}
text='agree'
buttonText='go to DetailScreen'
/>
</View>
);
}
}
class DetailsScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
agreeState:this.props.navigation.getParam('agreeServiceFromParent'),
};
}
checkStateImage(){
if(this.state.agreeState === undefined){return(imageOff)}
if(this.state.agreeState != undefined && this.state.agreeState === true){return(imageOn)}
if(this.state.agreeState != undefined && this.state.agreeState === false){return(imageOff)}
}
render() {
const { navigation } = this.props;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<CustomCheckBox
onPress={() => this.setState({ agreeState: !this.state.agreeState}, ()=> console.log(this.state.agreeState,'agreeServiceFromChild childview'))}
source={this.checkStateImage()}
text="agree"
onPressButton={() =>
this.props.navigation.push('Home', {
agreeServiceFromChild:this.state.agreeState,
})
}
buttonText='go to HomeScreen'
/>
</View>
);
}
}
const CustomCheckBox = ({ onPress, source, text, onPressButton, buttonText }) => (
<View
style={{
marginTop: 14,
height: 100,
width: 310,
backgroundColor: "transparent",
alignItems: "center",
justifyContent: "flex-start",
}}
>
<TouchableOpacity onPress={onPress}>
<View
style={{
marginLeft: 7,
flexDirection:'row',
backgroundColor: "white",
borderRadius: 10,
alignItems: "center",
justifyContent: "center"
}}
>
<Image style={{ width: 21, height: 21 }} source={source} />
<Text style={{ marginLeft: 8 }}>{text}</Text>
</View>
</TouchableOpacity>
<Button title={buttonText} onPress={onPressButton}/>
</View>
);
const RootStack = createStackNavigator({
Home: HomeScreen,
Details: DetailsScreen,
});
export default createAppContainer(RootStack);