Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dekoruma/react-native-web-modal
React Native Modal Implementation for Web
https://github.com/dekoruma/react-native-web-modal
animated modal react react-native react-native-web
Last synced: about 8 hours ago
JSON representation
React Native Modal Implementation for Web
- Host: GitHub
- URL: https://github.com/dekoruma/react-native-web-modal
- Owner: Dekoruma
- License: mit
- Created: 2018-07-06T06:17:36.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-06-29T11:26:24.000Z (over 3 years ago)
- Last Synced: 2024-05-22T19:21:04.490Z (6 months ago)
- Topics: animated, modal, react, react-native, react-native-web
- Language: JavaScript
- Homepage: https://codesandbox.io/s/kxmx8w08jv
- Size: 134 KB
- Stars: 125
- Watchers: 4
- Forks: 41
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
React Native Web Modal
This repository contains NPM Packages for React Native Modal Implementation for Web
---
## Announcement
Modal is now supported in react native web.
https://github.com/necolas/react-native-web/releases/tag/0.14.0
Thank you for using and supporting this library!
## Inspiration
[React Native Modal](https://facebook.github.io/react-native/docs/modal.html) is not yet implemented in [React Native Web](https://github.com/necolas/react-native-web). This is just replacement of React Native Modal with the same API, behavior, and design. If you want to create a more enhanced modal, use React Native Web Modal Enhanced with the same code as [React Native Modal](https://github.com/react-native-community/react-native-modal) implementation by React Native Community.
---
## Setup
Modal library is available on npm, install it with: `npm install --save modal-react-native-web` or `yarn add modal-react-native-web` for the basic modal.
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
1. React Native Web Modal
Since r-web-modal is an implemantion of the original react native modal, it works in a similar fashion with [react-native modal](https://facebook.github.io/react-native/docs/modal.html). But of course, some APIs are limited (not all props are suppported).
```javascript
import React, { Component } from 'react';
import { Text, TouchableHighlight, View } from 'react-native';
import Modal from 'modal-react-native-web';
export default class Example extends Component {
state = {
modalVisible: false,
};
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
{
alert('Modal has been closed.');
}}>
Hello World!
{
this.setModalVisible(!this.state.modalVisible);
}}>
Hide Modal
{
this.setModalVisible(true);
}}>
Show Modal
);
}
}
```
_Taken from [React Native Modal Example](https://facebook.github.io/react-native/docs/modal.html) with some changes_
2. Modal Enhanced for React Native Web
```javascript
import React, { Component } from "react";
import { Text, TouchableOpacity, View, ScrollView } from "react-native";
import Modal from 'modal-enhanced-react-native-web';
export default class Example extends Component {
state = {
visibleModal: null
};
_renderButton = (text, onPress) => (
{text}
);
_renderModalContent = () => (
Hello!
{this._renderButton("Close", () => this.setState({ visibleModal: false }))}
);
_handleOnScroll = event => {
this.setState({
scrollOffset: event.nativeEvent.contentOffset.y
});
};
_handleScrollTo = p => {
if (this.scrollViewRef) {
this.scrollViewRef.scrollTo(p);
}
};
render() {
return (
{this._renderButton("Modal that can be closed on backdrop press", () =>
this.setState({ visibleModal: true })
)}
this.setState({ visibleModal: false })}
>
{this._renderModalContent()}
);
}
}
```
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](https://snack.expo.io/@kulack/react-native-modal-example) and [RN Modal by React Native](https://github.com/react-native-community/react-native-modal) with some changes_
See [React Native Modal by React Native Community](https://github.com/react-native-community/react-native-modal) for APIs.
### Available animations
_Taken From [React Native Modal by React Native Community](https://github.com/react-native-community/react-native-modal)_
Take a look at [react-native-animatable](https://github.com/oblador/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](https://github.com/oblador/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](https://github.com/rayandrews)
## Special Thanks
* **Natan Elia** - [Natan Elia](https://github.com/natanelia)
* **Louis David** - [Louis David](https://github.com/louvidc)
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details