javascript - How to produce a modal bottom to top animation with react-native-paper Modal? - Stack Overflow

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

Share Follow edited May 27, 2020 at 8:32 Dimitri Kopriwa asked May 27, 2020 at 8:20 Dimitri KopriwaDimitri Kopriwa 14.5k3333 gold badges117117 silver badges232232 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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