'TouchableOpacity and button not working in react native Modal?

I have created react native modal but TouchableOpacity and button doesn't get clicked when the user tries to click on it why so?

code: (part 1)

<Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
              <FilterScreen/>
              <TouchableHighlight
                onPress={() => 
                  this._setModalVisible(!this.state.modalVisible)
                }>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

FilterScreen component:

return(
   <View>
      <TouchableOpacity>
           <Text>Inside Filter screen</Text>
      </TouchableOpacity>
    </View>
)

In the above code, I have added FilterScreen component which has touchableOpacity inside it but when modal opens up I am not able to click on toucableopacity component it only displays it in modal but onClick not working.

Code: (part 2)

<Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
               <TouchableOpacity>
                 <Text>Inside Filter screen</Text>
               </TouchableOpacity>
              <TouchableHighlight
                onPress={() => 
                  this._setModalVisible(!this.state.modalVisible)
                }>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

Above code runs if I add touchableOpacity inside Modal but same code inside filterscreen doesn't work by adding component why so?

Note: part 1 doesn't work but part 2 code works why so?

Solution 1:^[1]

My problem was that I imported the TouchableOpacity from the react-native-gesture-handler package, rather then the default react-native package. That was the package my auto-complete choose to resolve it to. After changing the import to the other package it worked again as intended.

import { TouchableOpacity } from 'react-native';

Solution 2:^[2]

Try to rebuild project, if in process of development sometimes with reload app via enabled hot reloading, or reloading via command + r when modal open, can broke functionality, it was in my case.

Solution 3:^[3]

if you are using FilterScreen component as an inner Function try like this

renderFilterScreen = () => {
return(
   <View>
      <TouchableOpacity>
           <Text>Inside Filter screen</Text>
      </TouchableOpacity>
    </View>
)
}

and in the code

 <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
              {this.renderFilterScreen()}
              <TouchableHighlight
                onPress={() => 
                  this._setModalVisible(!this.state.modalVisible)
                }>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

if you are creating a separate component class like FilterScreen.js, try like below

class FilterScreen extends React.Component {
 render = () => (
    <View>
      <TouchableOpacity>
           <Text>Inside Filter screen</Text>
      </TouchableOpacity>
    </View>
);
}

export default FilterScreen;

and in the Main class.

import FilterScreen from './ui/FilterScreen';

and use like you called in the part 1.

Solution 4:^[4]

I'm running RN 0.63.4 and the the only thing that worked for me was to use the new Pressable component instead.

Solution 5:^[5]

In my case, I have imported TouchableOpacity from react-native but it didn't work. I only get this work by importing TouchableOpacity from react-native-gesture-handler like this:

import TouchableOpacity from 'react-native-gesture-handler'

Reference link https://docs.swmansion.com/react-native-gesture-handler/docs/

Solution 6:^[6]

After no end of problems with React Native modals, I ended up creating this hook based modal library.

https://www.npmjs.com/package/@idiosync/react-native-modal

It doesn't use the additional native layer that the RN implementation uses, which seems to be the source of a lot of its problems

Solution 7:^[7]

In my case i resolve it with help useState, when i try open with static value, i can't press on button, but if i open modal with help of hook, work correct

Solution 8:^[8]

seams to work fine on Ios but not for android use the new Pressable component instead. see documentation

Solution 9:^[9]

My case was opposite too. It start to work when I use react-native-gesture-handler. So if you need TouchableOpacity in an animated modal(which uses gesture handler's PanGestureHandler probably) use it from react-native-gesture-handler.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	SherylHohman
Solution 2	?????? ????????
Solution 3	Raphael Pinel
Solution 4	Amie Wilt
Solution 5	iammtander
Solution 6	Dharman
Solution 7	Yura Grivicki
Solution 8	Peter Mugendi
Solution 9	asozcan

'TouchableOpacity and button not working in react native Modal?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]