title: React Native open modal from different component
body: <p>am new to react native and i have 2 js file(Component). 1 of the file is the modal jsx and i want to open this modal from other js file.</p>
  
  <p><strong>Modal JS file</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import {    Platform, Text,View, StyleSheet, TouchableOpacity} from 'react-native';
  import Modal from 'react-native-modal';
  import {    Icon,
              Picker,
              Form,
              Item,
              Button,
              Input} from 'native-base';
  
  export default class MyPopup extends Component{ 
       state = {
          isModalVisible: this.props.isModalVisible
        };
        constructor(){
          super(); 
        }    
    render() {
      return (
          &lt;View style={styles.container}&gt;  
            &lt;Modal isModalVisible={true}&gt;
                onRequestClose={() =&gt; this.closeModal()}&gt;
  
                &lt;View style={styles.headerContent}&gt;
                  &lt;View style={styles.headerItems}&gt;
                      &lt;Icon name='md-grid' /&gt;
                      &lt;Text style={styles.headerText}&gt;Version Mail&lt;/Text&gt;
                  &lt;/View&gt;
                &lt;/View&gt;   
  
                &lt;View style={styles.modalContainer}&gt;
                   &lt;View style={styles.titleRow}&gt;
                      &lt;View style={styles.titleText}&gt;
                          &lt;Text&gt;Book:&lt;/Text&gt;
                          &lt;Text&gt; MAIN Reader&lt;/Text&gt;
                      &lt;/View&gt;
                      &lt;View style={styles.titleTableText}&gt;
                          &lt;Text&gt;Version:&lt;/Text&gt;
                          &lt;Text&gt; T12345 User&lt;/Text&gt;
                      &lt;/View&gt;
                   &lt;/View&gt;
  
                   &lt;View style={styles.lineDiv}/&gt;    
  
                   &lt;View style={styles.titleText}&gt;
                      &lt;View style={styles.itemMarginAlone}&gt;
                          &lt;Text&gt;Server&lt;/Text&gt;                    
                          &lt;View style={{flexDirection:'row'}}&gt;
                                  &lt;Icon active name='person'/&gt;
                                  &lt;Picker mode="dropdown" style={{width:350}}&gt;
                                      &lt;Item label="User_1" value="key0" /&gt;
                                      &lt;Item label="User_2" value="key1" /&gt;
                                      &lt;Item label="User_3" value="key2" /&gt;
                                      &lt;Item label="User_4" value="key3" /&gt;
                                      &lt;Item label="User_5" value="key4" /&gt;
                                  &lt;/Picker&gt; 
                          &lt;/View&gt;                                   
                      &lt;/View&gt;
                      &lt;View&gt;
                          &lt;Text&gt;Notes&lt;/Text&gt; 
                          &lt;Item  style={{width:350}}&gt;
                              &lt;Icon active name='clipboard' /&gt;
                              &lt;Input placeholder='Notes...'/&gt;
                          &lt;/Item&gt;                                  
                      &lt;/View&gt;                    
                  &lt;/View&gt;
  
                  &lt;View style={styles.titleText}&gt;
                      &lt;View style={styles.itemMarginAlone}&gt;
                              &lt;Text&gt;Guests&lt;/Text&gt;   
                              &lt;View style={styles.titleText}&gt;                 
                                  &lt;Button bordered style={styles.btnGuest}&gt;
                                      &lt;Text&gt;1&lt;/Text&gt;
                                  &lt;/Button&gt;   
                                  &lt;Button bordered style={styles.btnGuest}&gt;
                                      &lt;Text&gt;2&lt;/Text&gt;
                                  &lt;/Button&gt;  
                                  &lt;Button bordered style={styles.btnGuest}&gt;
                                      &lt;Text&gt;3&lt;/Text&gt;
                                  &lt;/Button&gt;  
                                  &lt;Button bordered style={styles.btnGuest}&gt;
                                      &lt;Text&gt;4&lt;/Text&gt;
                                  &lt;/Button&gt;  
                                  &lt;Button bordered style={styles.btnGuest}&gt;
                                      &lt;Text&gt;5&lt;/Text&gt;
                                  &lt;/Button&gt;  
                                  &lt;Button bordered style={styles.btnGuest}&gt;
                                      &lt;Text&gt;6&lt;/Text&gt;
                                  &lt;/Button&gt;
                                  &lt;Button bordered style={styles.btnGuest}&gt;
                                      &lt;Text&gt;7&lt;/Text&gt;
                                  &lt;/Button&gt;
                                  &lt;Button bordered style={styles.btnGuest}&gt;
                                      &lt;Text&gt;8&lt;/Text&gt;
                                  &lt;/Button&gt;    
                                  &lt;Button bordered style={styles.btnGuest}&gt;
                                      &lt;Text&gt;+&lt;/Text&gt;
                                  &lt;/Button&gt;                              
                              &lt;/View&gt;                         
                      &lt;/View&gt;
                  &lt;/View&gt;
  
                  &lt;View style={styles.lineDiv}/&gt;
  
                  &lt;View style={styles.btnAction}&gt; 
                      &lt;Button warning style={styles.btnAlign}&gt;&lt;Text style={styles.btnAlign}&gt; Submit&lt;/Text&gt;
                      &lt;Icon active name='keypad' /&gt;&lt;/Button&gt;                  
  
                      &lt;Button warning style={styles.btnAlign}&gt;&lt;Text style={styles.btnAlign}&gt; Close&lt;/Text&gt;
                      &lt;Icon active name='keypad' /&gt;&lt;/Button&gt; 
  
                  &lt;/View&gt;
  
  
              &lt;/View&gt;
  
            &lt;/Modal&gt;
  
          &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      backgroundColor: 'green', 
    },
    modalContainer: { 
      backgroundColor: 'white',
    },
    innerContainer: {
      alignItems: 'flex-end',
    },
    headerContent:{ 
      height: 55,
      backgroundColor: '#f7b50c',
    },
    txtFont:{
      fontSize:12,
    },
    headerItems:{
      margin:10,
      flex: 1, 
      flexDirection:'row',
    },
    headerText:{
      margin : 5,
      fontSize:18,
    },
    titleRow:{
      margin :8,
      flexDirection : 'row',
      justifyContent: 'space-between',
    },
    titleText:{
      margin :8,
      flexDirection : 'row',
    },
    titleTableText:{
      margin :8,
      flexDirection : 'row',
  
    },
    lineDiv:{
        borderBottomColor: 'grey',
        borderBottomWidth: 1.5,
        margin: 10,
    },
    itemMarginAlone:{
        margin:10,
    },
    btnAlign:{
      margin:15,
    },
    btnGuest:{
        width: 55,
        margin:8,
        justifyContent:'center',
    },
    btnAction:{
      flexDirection: 'row',
      justifyContent: 'flex-end',
    }
  
  });
  </code></pre>
  
  <p><strong>Calling Js file</strong>
  HOME JS file
      </p>
  
  <p>How will i call this popup after importing. My popup is component and i need to revoke that when button clicked from first my home js</p>
  
  <p>Thanks in advance </p>