react-native-responsive-app-modal v1.0.1

react-native-responsive-app-modal

Create responsive modals easily by auto injecting it to the app root.

Dependencies

• react-native-modalbox
• react-native-root-siblings

Installation

npm install --save  react-native-responsive-app-modal

Properties

Note that for react-native<0.43 you should update the screenHeight and screenWidth whenever the device rotates.

The Modal Also receives all the props of react-native-modalbox, checkout their repository for the full list.

Usage

import ResponsiveAppModal from 'react-native-responsive-app-modal'
import React, { Component } from 'react';
import { View,TouchableOpacity, Text} from 'react-native';


var Parent = React.createClass({
    render: function () {
        return (
            <View style={{ height: 200, width: 200, justifyContent: "center", alignSelf: "center", borderWidth: 1 }}>
                <ChildComponent />
            </View>
        );
    }
});

var ChildComponent = React.createClass({
    getInitialState: function () {
        return {
            isOpen: false,
        };
    },
    render: function () {
        return (
            <View>
                <TouchableOpacity style={{ backgroundColor: "#ddd",padding:10 }} onPress={() => { this.setState({ isOpen: true }) }}>
                    <Text style={{fontSize:18,textAlign:"center"}}>Show Modal</Text>
                </TouchableOpacity>
                <ResponsiveAppModal sizeMatching="content"
                    isOpen={this.state.isOpen} onClosed={() => { this.setState({ isOpen: false }) }} >
                    <View style={{ height: 200, backgroundColor: "red" }}>
                    </View>
                </ResponsiveAppModal>
            </View>
        );
    }
});