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