React Native - Hide and Show Component on Button Click with Animation

Question

Friend I have issue to hide and show at runtime when user click on the button the the component (View) have to hide and again click on the button it should be show.

MYCODE :

  constructor(props) {
    super(props);
    this.state = {
      isModalVisible : false,
    };
  }

callFunc(){
   if(this.isModalVisible){
     this.setState({isModalVisible:false});
   }else{
     this.setState({isModalVisible:true});
   }
}

render() {
    return (

      <View style = {styles.companyScroll}>
         <Button
          onPress={this.callFunc}
          title="Learn More"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
         />

        {this.state.isModalVisible &&  <Picker style ={{backgroundColor : 'white'}}
                selectedValue={this.state.language}
                onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
                <Picker.Item label="Java" value="java" />
                <Picker.Item label="JavaScript" value="js" />
              </Picker>

      </View>
   )
}

I want to like below image.

Answer 1

You missed the function bind:

constructor(props) {
    super(props);

    this.callFunc = this.callFunc.bind(this);
    ...
}

without it, callFunc will not be in the scope of this object and have no access to its state.

And as @AlexanderIgnácz said, there's a typo there - should change this.isModalVisible into this.state.isModalVisible. maybe late, but also I was going to say, and for the purpose to complete this answer.