admin管理员组文章数量:1326282
Based on the code below, I would expect to see 'onDismiss!' when I swipe down on the modal view.
When I swipe down on the modal view it does not invoke the provided function. I can't find any other React Native users experiencing this problem. I am using React Native version 0.60.6.
Am I using Modal the wrong way or is this a bug?
<Modal
animationType="slide"
presentationStyle="pageSheet"
visible={showSetup}
hardwareAccelerated
onDismiss={() => alert('onDismiss!')}
onRequestClose={() => alert('onRequestClose!')}
>
<SetupView closeView={() => this.willClose()} />
</Modal>
Based on the code below, I would expect to see 'onDismiss!' when I swipe down on the modal view.
When I swipe down on the modal view it does not invoke the provided function. I can't find any other React Native users experiencing this problem. I am using React Native version 0.60.6.
Am I using Modal the wrong way or is this a bug?
<Modal
animationType="slide"
presentationStyle="pageSheet"
visible={showSetup}
hardwareAccelerated
onDismiss={() => alert('onDismiss!')}
onRequestClose={() => alert('onRequestClose!')}
>
<SetupView closeView={() => this.willClose()} />
</Modal>
Share
Improve this question
asked Nov 19, 2019 at 15:49
jskidd3jskidd3
4,78315 gold badges66 silver badges131 bronze badges
3
-
Have you checked out the library from this answer? I'd imagine you could trigger
onDismiss
from within the modal with a swipe event handler. – Chris B. Commented Nov 19, 2019 at 15:53 -
@ChrisB I am familiar with the library but it seems a bit overkill for this. I just want to know when the the view is dismissed so I can set
showSetup
back to false so the modal view can be accessed again. – jskidd3 Commented Nov 19, 2019 at 15:55 -
This does indeed appear to be a bug, I had the same issue (that re-clicking wasn't working due to incorrect functionality of the
onDismiss
). In my case I could solve it, by checking the visibility state in the action, and manually calling the closing action. It's important that you wait until the state is persisted though (with a timeout or the callback). Completely unrelated .. but may I ask how you managed to get the black background color behind the pageSheet? – visscher Commented Nov 19, 2019 at 17:15
4 Answers
Reset to default 2This issue on the React Native issue tracker accurately describes this issue: https://github./facebook/react-native/issues/26892
I hope it's fixed soon!
Hey there you should try something like that
This is the code for the ponent rendered in my modal:
<TouchableWithoutFeedback
onPressOut={() => {
this.refs.view_ref.measure((fx, fy, width, height, px, py) => {
if (py === Dimensions.get('window').height) {
this.props.hide(false);
}
});
}}
>
<View style={styles.view} ref={'view_ref'}>
<View style={styles.nav}>
<Text style={styles.nav_title}>New Currency</Text>
<TouchableOpacity
onPress={() => {
this.props.hide(false);
}}
>
<Icon
style={styles.nav_close}
name={'close'}
size={30}
color={mode === 'dark' ? 'white' : 'black'}
/>
</TouchableOpacity>
</View>
</View>
</TouchableWithoutFeedback>
When wrapping the view you want to render in a TouchableWithoutFeedback, you get the "onPressOut" functionality. Then with this portion of code:
onPressOut={() => {
this.refs.view_ref.measure((fx, fy, width, height, px, py) => {
if (py === Dimensions.get('window').height) {
this.props.hide(false);
}
});
}}
you basically tell the view to listen on touch events happening at the top of the modal, thus it will be also executed when you swipe to dismiss
I was inspired by this answer: https://github./facebook/react-native/issues/26892#issuement-605516625
Enjoy
本文标签: javascriptReact Native ltModal gt onDismiss not invokedStack Overflow
版权声明:本文标题:javascript - React Native <Modal > onDismiss not invoked - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742211615a2433817.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论