RectButton onPress not work under Modal
See original GitHub issueRectButton 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:
- Created 5 years ago
- Reactions:15
- Comments:14
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

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.