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](https://github.com/react-native-community/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 :
```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
## 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