I am having trouble with implementing a hide/show button in the header of a React Native Toolbar. My goal is to display the buttons only after the user has logged in. However, I keep getting an error that says undefined is not an object for this.state.status. How can I access the state within the toolbar?
export default class TestSC extends React.Component {
constructor(){
super();
this.state ={
status:false
}
}
static navigationOptions = ({navigation})=> {
return {
title: 'Tin Tin Foil',
headerRight: (
<View style={styles.twoButtonView}>
{(this.state.status == true) ?
<TouchableOpacity onPress={this._refreshButtonPress}>
<Image source={require('../img/ic_search_white.png')} style={styles.refrgeshButton} />
</TouchableOpacity>
: null}
<Button
onPress={() => navigation.navigate('Login')}
title="Login" color="#fff" />
</View>
),
}};
toggleStatus(){
this.setState({
status:!this.state.status
});
console.log('toggleStatus: '+ this.state.status);
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Test</Text>
<TouchableHighlight onPress={()=>this.toggleStatus()}>
<Text> Click Me Toggle </Text>
</TouchableHighlight>
</View>
);
}
}