React-native- conditionally Disable TouchableHighlight if array is empty

Question

I want to disable TouchableHighlight if my array is empty and turn it back to enable if my array has value.

this.state = {
     modalVisible: false,
     array:[],
    }
  }

toggleModal(visible) {
    this.setState({modalVisible: visible})
    }

<TouchableHighlight
 underlayColor="transparent"
 onPress = {() => {
 if(this.state.array == undefined || this.state.array.length == 0){
 this.toggleModal(this.state.modalVisible)}
 else {
 this.toggleModal(!this.state.modalVisible)}
}}>
<Text>close</Text>
</TouchableHighlight>

Above is my code. I think I have it right but its not working. Any advise or comments would be really appreciated.

Answer 1

You can do this

this.state =
{
    modalVisible: false,
    array:  []
}

toggleModal = visible => this.setState({modalVisible: visible})

render = () =>
{
    return (
        <TouchableHighlight
            underlayColor="transparent"
            disabled={this.state.array.length === 0}
            onPress = {() =>
            {
                if(this.state.array == undefined || this.state.array.length == 0)
                    this.toggleModal(this.state.modalVisible);
                else
                    this.toggleModal(!this.state.modalVisible);
            }}>
            <Text>close</Text>
            </TouchableHighlight>
    );
}