react native: modal is not displaying

Question

I am new to react-native and I am trying to display modal in react-native with following code

      <View>
    <View onPress={() => {this.toggleModal(true) }}  onBackdropPress={ () => 
   {this.hideModal(false)}}>

        <View>
            <OcticonsIcons name='plus' size={19}/>

            <Text>QUICK ACTION</Text>
        </View>

        <View>
            <View>
                <Image source={require('../images/truck.png')} 
                />
                <Image source={require('../images/taxi(1).png')} 
                />
                <Image source={require('../images/tour.png')} 
                />
            </View>
        </View>

     </View>

    </View>
    <Modal visible={this.state.isModalVisible} animationType = "slide" transparent = 
    {false}>
            <View style={{ flex: 1 }}>
             <Text style={{ fontWeight:'bold', fontSize: 20, color: '#f79334', marginTop: 15 
      }} > Services </Text>
            </View>
      </Modal>


  toggleModal(visible){
   this.setState({ isModalVisible: visible });
  }

    hideModal(visible){
   this.setState({ isModalVisible: visible })
   }

but it's not working, can anyone tell me what wrong with my code, thank you.

Gaurav Roy · Accepted Answer · 2020-03-07 07:01:52Z

1

The thing is you cant have onPress function on components, its solely for just showing. To use onPress you have to use TouchableOpacity.

Check the code below :

 <View>
    <TouchableOpacity onPress={() => {this.toggleModal(true) }}  onBackdropPress={ () => 
   {this.hideModal(false)}}>

        <View>
            <OcticonsIcons name='plus' size={19}/>

            <Text>QUICK ACTION</Text>
        </View>

        <View>
            <View>
                <Image source={require('../images/truck.png')} 
                />
                <Image source={require('../images/taxi(1).png')} 
                />
                <Image source={require('../images/tour.png')} 
                />
            </View>
        </View>

     </TouchableOpacity>

    </View>
    <Modal visible={this.state.isModalVisible} animationType = "slide" transparent = 
    {false}>
            <View style={{ flex: 1 }}>
             <Text style={{ fontWeight:'bold', fontSize: 20, color: '#f79334', marginTop: 15 
      }} > Services </Text>
            </View>
      </Modal>


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

    hideModal = (visible) => {
   this.setState({ isModalVisible: visible })
   }

Hope it helps. feel free for doubts

answered Mar 7, 2020 at 7:01

Gaurav Roy

12.4k3 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sejn Over a year ago

Here my modal is opened and I can close the modal by click on the close button. But my issue is if I opened once and then not did anything. Phone goes to sleep mode. After sometimes I am opening the app. It failed to show the modal and If I click the text terns and service it not responding. Any suggestion

Collectives™ on Stack Overflow

react native: modal is not displaying

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related