TouchableOpacity and button not working in react native Modal?

Question

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?

Answer 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';

Answer 2

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.

Answer 3

尝试重建项目，如果在开发过程中有时通过启用热重新加载重新加载应用程序，或者在模式打开时通过 command + r 重新加载，可能会破坏功能，就我而言。

Answer 4

我正在运行 RN 0.63.4，唯一对我有用的是使用新的Pressable组件。

Answer 5

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.

Answer 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

Answer 7

在我的情况下，我通过帮助 useState 解决它，当我尝试使用静态值打开时，我无法按下按钮，但是如果我在钩子的帮助下打开模态，则可以正常工作

Answer 8

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/

Answer 9

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