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

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.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 15
  • Comments: 15

Most upvoted comments

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

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.

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.

coverScreen={false} is life saver

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

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

I fixed the problem using the Pressable like here https://reactnative.dev/docs/modal enjoy 😄 🎉

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