React Native - Conditional Back Button Based on State - react-native

Question

Below is a simple example of what I'm trying to do. I have headerLeft in the navigation bar, but would like to make that disappear (so the user can't click back) when the user clicks the button (Take the Challenge) and thereby sets the state variable 'next' to true. Is this possible to do? If so, any suggestions on how?
export default class Challenge extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: "5 Day Challenge",
headerTintColor: "white",
headerStyle: { backgroundColor: "black" },
headerTitleStyle: { fontWeight: "bold", fontSize: moderateScale(15) },
headerLeft: (
<Button onPress={() => navigation.goBack(null)}>
{" "}
<MaterialCommunityIcons
name="arrow-left"
size={28}
/>
</Button>
)
});
constructor(props) {
super(props);
this.state = {
next: false,
};
}
render() {
return (
<View>
<Button
onPress={() =>
this.setState({ next: true })}
>
<Text >
TAKE THE CHALLENGE
</Text>
</Button>
</View>
)}
}

Answer 1

You can use the this.props.navigation.setParams({...});
export default class Challenge extends React.Component {
static navigationOptions = ({ navigation }) => {
const { state } = navigation;
if (state.params !== undefined) {
return {
title: "5 Day Challenge",
headerTintColor: "white",
headerStyle: { backgroundColor: "black" },
headerTitleStyle: { fontWeight: "bold", fontSize: moderateScale(15) },
headerLeft: state.params.showBack ? (
<Button onPress={() => navigation.goBack(null)}>
{" "}
<MaterialCommunityIcons
name="arrow-left"
size={28}
/>
</Button>
) : null
}
}
};
constructor(props) {
super(props);
this.state = {
next: false,
};
}
componentDidMount() {
this.props.navigation.setParams({
showBack: true
});
}
onClick = () => {
this.setState({ next: true })
this.props.navigation.setParams({
showBack: false
});
}
render() {
return (
<View>
<Button
onPress={() => this.onClick()} >
<Text >
TAKE THE CHALLENGE
</Text>
</Button>
</View>
)
}
}
PS : I hope it will work, I didn't test that code.