Nozzle Piping Mismatch

    react-native-responsive-app-modal

    1.0.1 • Public • Published

    react-native-responsive-app-modal

    Codelab

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

    Dependencies

    Installation

    NPM

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

    Properties

    Prop Type Description
    screenHeight number Used for modal dimensions calculation (Note: users of react-native>=0.43 you don't have to send this property)
    screenWidth number Used for modal dimensions calculation (Note: users of react-native>=0.43 you don't have to send this property)
    verticalMargin number Define spacing between the modal and the screen edges
    horizontalMargin number Define spacing between the modal and the screen edges
    sizeMatching string('content' or 'screen') define if the modal size should match the screen size or the size of its content

    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>
            );
        }
    });
     

    Install

    npm i react-native-responsive-app-modal

    DownloadsWeekly Downloads

    7

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • assem-hafez