I want to create a modal sliding view that appears from the bottom of my screen in react-native, using react-native-paper <Modal /> ponent.

I use <Animated /> from react-native for the animation and my target are: web, android, and iOS.

This is what I have tried:

/@kopax/react-native-paper-modal-bottom-to-top-animation

• web: the animation seems to be truncated
• ios: no animation at all
• android: I have an error: Uncaught Error: Error while updating property 'transform' of a view managed by: RCTView

How can I build a slide bottom to top panel animation using the react-native paper modal?

I found the original modal from react-native to be exactly what I want, except it does not have a clickable backdrop to close the overlay that has react-native-paper, see react-native original modal demo here

I want to create a modal sliding view that appears from the bottom of my screen in react-native, using react-native-paper <Modal /> ponent.

I use <Animated /> from react-native for the animation and my target are: web, android, and iOS.

This is what I have tried:

https://snack.expo.io/@kopax/react-native-paper-modal-bottom-to-top-animation

• web: the animation seems to be truncated
• ios: no animation at all
• android: I have an error: Uncaught Error: Error while updating property 'transform' of a view managed by: RCTView

How can I build a slide bottom to top panel animation using the react-native paper modal?

I found the original modal from react-native to be exactly what I want, except it does not have a clickable backdrop to close the overlay that has react-native-paper, see react-native original modal demo here

• javascript
• reactjs
• react-native
• modal-dialog
• react-native-paper

2 Answers 2

https://github./react-native-munity/react-native-modal

I'm using this lib to create modal bottom dialog for my app, and so far so good ;)

Please take a look ;)

This is a way you can use it

import { Modal } from 'react-native-paper';
    
 <Modal visible={visible} onDismiss={this._hideModal}>
    
 </Modal>

https://snack.expo.dev/@kopax/react-native-paper-modal-bottom-to-top-animation