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