Search code examples
javascriptreactjsreact-nativemodal-dialogreact-native-paper

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

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

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

Solution

  • https://github.com/react-native-community/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 ;)