React Native open modal from different component

Question

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.

Modal JS file

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 (
        <View style={styles.container}>  
          <Modal isModalVisible={true}>
              onRequestClose={() => this.closeModal()}>

              <View style={styles.headerContent}>
                <View style={styles.headerItems}>
                    <Icon name='md-grid' />
                    <Text style={styles.headerText}>Version Mail</Text>
                </View>
              </View>   

              <View style={styles.modalContainer}>
                 <View style={styles.titleRow}>
                    <View style={styles.titleText}>
                        <Text>Book:</Text>
                        <Text> MAIN Reader</Text>
                    </View>
                    <View style={styles.titleTableText}>
                        <Text>Version:</Text>
                        <Text> T12345 User</Text>
                    </View>
                 </View>

                 <View style={styles.lineDiv}/>    

                 <View style={styles.titleText}>
                    <View style={styles.itemMarginAlone}>
                        <Text>Server</Text>                    
                        <View style={{flexDirection:'row'}}>
                                <Icon active name='person'/>
                                <Picker mode="dropdown" style={{width:350}}>
                                    <Item label="User_1" value="key0" />
                                    <Item label="User_2" value="key1" />
                                    <Item label="User_3" value="key2" />
                                    <Item label="User_4" value="key3" />
                                    <Item label="User_5" value="key4" />
                                </Picker> 
                        </View>                                   
                    </View>
                    <View>
                        <Text>Notes</Text> 
                        <Item  style={{width:350}}>
                            <Icon active name='clipboard' />
                            <Input placeholder='Notes...'/>
                        </Item>                                  
                    </View>                    
                </View>

                <View style={styles.titleText}>
                    <View style={styles.itemMarginAlone}>
                            <Text>Guests</Text>   
                            <View style={styles.titleText}>                 
                                <Button bordered style={styles.btnGuest}>
                                    <Text>1</Text>
                                </Button>   
                                <Button bordered style={styles.btnGuest}>
                                    <Text>2</Text>
                                </Button>  
                                <Button bordered style={styles.btnGuest}>
                                    <Text>3</Text>
                                </Button>  
                                <Button bordered style={styles.btnGuest}>
                                    <Text>4</Text>
                                </Button>  
                                <Button bordered style={styles.btnGuest}>
                                    <Text>5</Text>
                                </Button>  
                                <Button bordered style={styles.btnGuest}>
                                    <Text>6</Text>
                                </Button>
                                <Button bordered style={styles.btnGuest}>
                                    <Text>7</Text>
                                </Button>
                                <Button bordered style={styles.btnGuest}>
                                    <Text>8</Text>
                                </Button>    
                                <Button bordered style={styles.btnGuest}>
                                    <Text>+</Text>
                                </Button>                              
                            </View>                         
                    </View>
                </View>

                <View style={styles.lineDiv}/>

                <View style={styles.btnAction}> 
                    <Button warning style={styles.btnAlign}><Text style={styles.btnAlign}> Submit</Text>
                    <Icon active name='keypad' /></Button>                  

                    <Button warning style={styles.btnAlign}><Text style={styles.btnAlign}> Close</Text>
                    <Icon active name='keypad' /></Button> 

                </View>


            </View>

          </Modal>

        </View>
    );
  }
}

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',
  }

});

Calling Js file HOME JS file

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

Thanks in advance

Answer 1

Your MyPopup is taking this.props.isModalVisible to judge visibility of the component. You can use that property to decide the visibility.

Sample

export default class MyPopup extends React.Component {
  ...
  render() {
    const { isModalVisible } = this.props;
    return (
      isModalVisible &&
        <View style={styles.container}>
          ...
        </View>
    );
  }
}

To use it

...
import MyPopup from '...'
...
class Home extends React.Component {
  ...
  render() {
    return(
      ...
      <MyPopup isModalVisible={MODAL_VISIBILITY_PREDICATE} />
      ...
    )
  }
}

Hope this will help!