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 is not yet implemented in 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 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. But of course, some APIs are limited (not all props are suppported).

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 (
      <View style={{marginTop: 22}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onDismiss={() => {
            alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
              <Text>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

        <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

Taken from React Native Modal Example with some changes

2. Modal Enhanced for React Native Web

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

• 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