React-native-gesture-handler: RectButton onPress not work under Modal

[buf1024]

RectButton onPress not work under react-native component Modal, but TouchableOpacity works.

some dependency:

    "react": "16.6.3",
    "react-native": "0.58.4",
    "react-native-calendars": "^1.22.0",
    "react-native-gesture-handler": "^1.0.15",

Test code():

// TouchableOpacity onPress gets call, but RectButton won't.
import React, { Component } from 'react'
import {
  View,
  Text,
  Modal,
  TouchableOpacity,
  Dimensions
} from 'react-native'

import { RectButton } from 'react-native-gesture-handler'

const {width, height} = Dimensions.get('window')

class DiaryView extends Component {

  constructor (props) {
    super(props)
    this.state = {
      visible: true,
    }
  }

  onClose () {
    console.log('onClose')
    this.setState({visible: false})
  }
  onDismiss () {
    console.log('onDismiss')
  }
  render () {
    return (
      <Modal
        visible={this.state.visible}
        transparent={true}
        onDismiss={() => this.onDismiss()}
        animationType={'fade'}
      >
        {
          this.state.visible? <View style={{
            width: width,
            height: height,
            backgroundColor: 'rgba(14, 14, 14, 0.4)',
          }}/> : <View />
        }

        <View style={{
          width: width - 60,
          height: height - 60,
          margin: 30,
          borderRadius: 20,
          backgroundColor: '#fff',
          position: 'absolute',
          overflow: 'hidden',
          top: 0,
          left: 0,
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <TouchableOpacity
            style={{
              width: 100,
              height: 60,
              borderRadius: 5,
              backgroundColor: '#FE6667',
              marginVertical: 20,
            }}
            onPress={() => this.onClose()}
          >
            <Text style={{
              color: '#fff',
              textAlign: 'center'
            }}>TouchableOpacity Close</Text>
          </TouchableOpacity>
          <RectButton
            style={{
              width: 100,
              height: 60,
              borderRadius: 5,
              backgroundColor: '#FE6667',
            }}
            onPress={() => this.onClose()}
          >
            <Text style={{
              textAlign: 'center',
              color: '#fff'
            }}>RectButton Close</Text>
          </RectButton>
        </View>
      </Modal>
    )
  }
}

export default DiaryView

RectButton onPress works without wrap under Modal, But works not under Modal.

[wbercx]

Ah, I ran into this earlier today as well!

It also doesn't work when used inside of items in a SectionList, but does work in section _header_ components. FlatLists are fine as well.

[Ashkan-Oliaie]

strange issues my RectButton doesn't work on modals as well

[alleniver]

i have the same problem! doesn't work on modals with android!

[jigaryadav]

not working in RN 0.59.9

[dotfelixb]

TouchableOpacity not working with Modal on Android in RN 0.59.9

[alleniver]

i use react-native-modalbox component,
set coverScreen={false}
it's work now!

[virgil9306]

Ah, I ran into this earlier today as well!

It also doesn't work when used inside of items in a SectionList, but does work in section _header_ components. FlatLists are fine as well.

Yes, I encountered this issue with SectionList. As a workaround I just added a reference to the Swipeable component (<Swipeable ref={this.swipeableRef}...) and set the reference in the constructor(props) function (this.swipeableRef = React.createRef()) and accessed the close method via this.swipeableRef.current.close().

[tarasvakulka]

The same problem TouchableOpacity onPress not work under Modal, but TouchableOpacity from react-native work fine. Please help, I need TouchableOpacity from react-native-gesture-handler, because if I set position 'absolute' to TouchableOpacity from react-native it doesn't work on android.

[hariansyahhari2]

I faced new issue where my touchable is always pressed without pressing it, and it generates infinite loop

[RatFou]

Same issue here :)

[buf1024]

It seems the author not try to solved the issue, so I closed it and try another replacement.

[beinghussain]

coverScreen={false} is life saver