TouchableOpacity and button not working in react native Modal?

13,307

Solution 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

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

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

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

View more solutions

13,307

fun joker

Updated on July 31, 2022

Comments

fun joker almost 2 years

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?

Adarsh about 5 years

one of these method may resolve your issue, please check
fun joker about 5 years

your answer is not working. I am importing FilterScreen and using it inside Modal but TouchablOpacity is not working I cannot click on it.
Adarsh about 5 years

do u handle any onPress logic in the code?, if not try console something on onPress, or try remove the parent <View> from FilterScreen , just in case, these are the ways , i used in my codes and works smoothly, please try and let me know
Meiki Neumann over 3 years

Thank you 🙏 ...but what is this gesture-handler package ?! It keeps apearing everywhere
Ger over 3 years

react-native-gesture-handler came into my code when I followed the docs for introducting navigation between screens. It still lurks even though now I want to use modals instead of leaving the 'home' screen.
Freewalker over 3 years

I could only get this to work by using the TouchableOpacity from react-native-gesture-handler, and not from react-native. Nevertheless this answer pointed me in the right direction, upvoted
Dima Malko about 3 years

i just spend 1 hour smashing keyboard, then i found this...
jasie almost 3 years

Welcome! Thanks for your answer, but please read How To Answer Well and improve its quality.
Suraj Ingle over 2 years

lesson learned! never import similar named stuff from unintended packages. thank you very much
Suraj Ingle over 2 years

@DimaMalko lucky you! It wasn't just one hour for me @_@