I have implemented a switch in my tab header, and I am looking to retrieve the value of the switch every time it is toggled. How can I accomplish this?
const navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
title: "Home",
headerTitleStyle: {
flex: 1,
textAlign: "center",
color: "white",
fontSize: 20,
},
headerTintColor: "white",
headerStyle: {
backgroundColor: "#4169E1",
},
headerRight: (
<Switch
onValueChange={() => params.handleSave()}
value={this.navigation.state.switchValue}
/>
),
};
};
class HomeScreen extends React.Component {
state = { switchValue: false };
componentDidMount() {
this.props.navigation.setParams({ handleSave: this.toggleSwitch });
}
toggleSwitch = (value) => {
// This function is called when the switch value changes
this.setState({ switchValue: value });
// Update state according to switch value
// This will trigger a re-render of the component
};
}