React Native Web Modal
Enhanced Modal React Native Web
This repository contains NPM Packages for Enhanced Modal for React Native Web
Inspiration
Enhanced modal with the same code as React Native Modal implementation by React Native Community.
Setup
If you want to use the enhanced version, install it with npm install --save modal-enhanced-react-native-web
or yarn add modal-enhanced-react-native-web
.
Usage
Here's example code :
;; ; state = visibleModal: null ; <TouchableOpacity onPress=onPress> <View> <Text>text</Text> </View> </TouchableOpacity> ; <View> <Text>Hello!</Text> this </View> ; { this; }; { if thisscrollViewRef thisscrollViewRef; }; { return <View> this <Modal isVisible=thisstatevisibleModal onBackdropPress= this > this </Modal> </View> ; }
The isVisible
prop is the only prop you'll really need to make the modal work: you should control this prop value by saving it in your state and setting it to true
or false
when needed.
Taken from React Native Modal Example and RN Modal by React Native with some changes
See React Native Modal by React Native Community for APIs.
Available animations
Taken From React Native Modal by React Native Community
Take a look at react-native-animatable to see the dozens of animations available out-of-the-box. You can also pass in custom animation definitions and have them automatically register with react-native-animatable. For more information on creating custom animations, see the react-native-animatable animation definition schema.
Packages
React Native Web Modal |
Enhanced Modal React Native Web |
|
---|---|---|
NPM |
![]() |
![]() |
Description | React Native Modal implemented for Web. Implemented using React Native Web Animated and React DOM Portal |
Enhanced Version of React Native Modal, implemented for web |
Inspired by | RNW Modal by Kiurchv |
React Native Modal by React Native Community MIT License by React Native Community |
Not yet supported |
- onRequestClose - supportedOrientations - hardwareAccelerated - onOrientationChange - presentationStyle |
- |
Author
- Ray Andrew - Ray Andrew
Special Thanks
- Natan Elia - Natan Elia
- Louis David - Louis David
License
This project is licensed under the MIT License - see the LICENSE.md file for details