CODEWITHSUNDEEP
javascriptreactjsreact-native
fun joker
fun joker

Reputation: 1727

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?

Upvotes: 31

Views: 21715

Answers (9)

asozcan
asozcan

Reputation: 1390

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.

Upvotes: 1

Peter Mugendi
Peter Mugendi

Reputation: 945

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

Upvotes: 0

iammtander
iammtander

Reputation: 330

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/

Upvotes: 1

Yura Grivicki
Yura Grivicki

Reputation: 1

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

Upvotes: 0

James Trickey
James Trickey

Reputation: 1447

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

Upvotes: 0

Amie Wilt
Amie Wilt

Reputation: 449

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

Upvotes: 2

sjoerd216
sjoerd216

Reputation: 1397

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

Upvotes: 125

Андрій Нагорний
Андрій Нагорний

Reputation: 81

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.

Upvotes: 4

Adarsh
Adarsh

Reputation: 2269

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.

Upvotes: 2

Related Questions