CODEWITHSUNDEEP
react-nativereact-navigation
flix
flix

Reputation: 1984

React Navigation - How to use this.state in Header navigationOptions?

I have spent a couple hours to find a code to handle the state in navigationOptions, but I don't get it till now,

I have a code :

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state
    return {
      headerLeft: <FontAwesome name='arrow-left' size={20} color="#FFF" onPress={() => navigation.navigate('Home')} style={{margin: DeviceWidth*0.04}}/>,
      // here I want to show the TextInput if the `HeaderRight pressed` and show the `String` for the first time
      headerTitle: this.state.showSearch ? <TextInput
        placeholder="this is placeholder"
        placeholder="search"
        underlineColorAndroid='transparent'
        placeholderTextColor= 'gray'
        minWidth={DeviceWidth*0.75}
        style={{borderWidth:1, borderColor:'grey', backgroundColor:'white', borderRadius:50}}
      /> : 'My Patient',
      // Here I want to set the state of `showSearch` to visible at `onPress`
      headerRight: <FontAwesome name='search' size={20} color="#FFF" onPress={() => params.handleRemove()} style={{margin: DeviceWidth*0.04}}/>,
    }
  }

  componentDidMount () {
    this.props.navigation.setParams({ handleRemove: this.removeVehicle })
  }

  removeVehicle = () => {
    this.setState({showSearch: !this.state.showSearch})
  }
  constructor(props){
    super(props); 
    this.state = {showSearch: false}
  }

when I run the code, I have an error

TypeError: undefined is not an object (evaluating '_this3.state.showSearch')

It is possible to show/hide the headerTitle depending on this.state.showSearch?

Upvotes: 3

Views: 7719

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22209

You can do this in the following easy way

 static navigationOptions =  ({ navigation }) => {
        const { params = {} } = navigation.state
       return {
            headerTitle: params.showSearch ? 'New Title' : 'Alternate Title'
            // Similarly for the rest
       }  
    }

changeTitle = () => {
   const {showSearch} = this.state
        // Assuming you have access to the navigation props
        this.props.navigation.setParams({
            showSearch
        })
   this.setState({showSearch: !showSearch})
 }

Upvotes: 11

Related Questions