modal-enhanced-react-native-web

0.2.0 • Public • Published

React Native Web Modal


Enhanced Modal React Native Web

Edit kxmx8w08jv


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 :

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) => (
    <TouchableOpacity onPress={onPress}>
      <View>
        <Text>{text}</Text>
      </View>
    </TouchableOpacity>
  );
 
  _renderModalContent = () => (
    <View>
      <Text>Hello!</Text>
      {this._renderButton("Close", () => this.setState({ visibleModal: false }))}
    </View>
  );
 
  _handleOnScroll = event => {
    this.setState({
      scrollOffset: event.nativeEvent.contentOffset.y
    });
  };
 
  _handleScrollTo = p => {
    if (this.scrollViewRef) {
      this.scrollViewRef.scrollTo(p);
    }
  };
 
  render() {
    return (
      <View>
        {this._renderButton("Modal that can be closed on backdrop press", () =>
          this.setState({ visibleModal: true })
        )}
        <Modal
          isVisible={this.state.visibleModal}
          onBackdropPress={() => this.setState({ visibleModal: false })}
        >
          {this._renderModalContent()}
        </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

Special Thanks

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Package Sidebar

Install

npm i modal-enhanced-react-native-web

Weekly Downloads

3,605

Version

0.2.0

License

MIT

Unpacked Size

56 kB

Total Files

6

Last publish

Collaborators

  • rayandrew