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

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.