question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

RectButton onPress not work under Modal

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:15
  • Comments:14

github_iconTop GitHub Comments

11reactions
buf1024commented, Jun 8, 2020

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

9reactions
wbercxcommented, Mar 6, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

TouchableOpacity and button not working in react native Modal?
My problem was that I imported the TouchableOpacity from the react-native-gesture-handler package, rather then the default react-native ...
Read more >
RectButton onPress not work under Modal - Bountysource
RectButton onPress not work under react-native component Modal , but TouchableOpacity works. some dependency:
Read more >
How to use RectButton in react-native-gesture-handler - Tabnine
RectButton (Showing top 4 results out of 315) ... justifyContent: 'center', }}> <RectButton onPress={() => { console.warn('press (this wont be printed)');.
Read more >
keyboardavoidingview modal | The search engine you control.
KeyboardAvoidingView is not working correctly when used inside a Modal with presentationStyle pageSheet. Screen-Recording-2020-07-13-at-1. Modal with ...
Read more >
Buttons | React Native Gesture Handler - Software Mansion
This library allows to use native components with native feedback in adequate situations. If you do not wish to implement custom design approach,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found