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

Prasun · Accepted Answer · 2018-05-22 11:59:47Z

7

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!

answered May 22, 2018 at 11:59

Prasun

5,0132 gold badges23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ankit Jayaprakash Over a year ago

<MyPopup isModalVisible={MODAL_VISIBILITY_PREDICATE} /> Do i have to pass true here ?

Prasun Over a year ago

No, it's a state variable which will control the visibility of Modal, like ur requirement, Model will be visible when user will click on the button. To handle this, inside the onPress event, set the this.setState({modalVisible: ture}) and inside the render method <MyPopup isModalVisible={this.state.modalVisible} />, and reset this to false when user close the modal. So MODAL_VISIBILITY_PREDICATE just a placeholder.

Prasun Over a year ago

onRequestClose={() => this.closeModal()}> statement is wrong, it should be inside <Modal ... onRequestClose={() => this.closeModal()} >. See your onRequestClose became a child of modal as per your comment above.

Prasun Over a year ago

If this solves your issue, then you may consider it as valid answer by accepting it.

chaitanya dalvi · Accepted Answer · 2020-07-25 06:19:15Z

I also needed this kind of Modal. By using you code and research i tried to create reusable Model.
Please comment below for any suggestions.

    export default class ImageModel extends Component {
    constructor(props) {
            super(props);
      }  
      
    render() {
    const visbility=this.props;
    
    return (
        
        <Modal animationType={"slide"} transparent={false}
          visible={this.props.visbility}
          onRequestClose={() => { console.log("Modal has been closed.") }}>

          <View style={styles.modal}>
            <Image
              style={{ width: '100%', height: 200, resizeMode: 'stretch' }}
              source={{ uri: 'https://4.bp.blogspot.com/-krdeTqQLML8/Wyf2oV7eedI/AAAAAAAABpI/OZ759swV7L8wWtt2pwBXIgp6aPz33r01gCLcBGAs/s400/fist%2Bapp.jpg' }}
            />
            <Text style={styles.text}> Javascript Tutorial With Example</Text>

            <TouchableHighlight style={styles.touchableButton}
              onPress={() => { this.props.viewImageModel() }}>
              <Text style={styles.text}>Close Modal</Text>
            </TouchableHighlight>
          </View>
        </Modal>
        
    )
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    modal: {
      flex: 1,
      alignItems: 'center',
      backgroundColor: '#2196f3',
      justifyContent: 'center',
      padding : 10,
    },
    text: {
      color: '#fff',
      fontSize: 20,
      textAlign: 'center',
    },
    touchableButton: {
      width: '70%',
      padding: 10,
      backgroundColor: '#f06292',
      marginBottom: 10,
      marginTop: 30,
    },
  });

Above Model called from below Child component

export default class AddExpense extends React.Component  {
    constructor(props){
        super(props);
        this.state={
            reciptVisible:false
        }
        this.viewImageModel= this.viewImageModel.bind(this);
    }
    viewImageModel(){
        if(this.state.reciptVisible == true)
            this.setState({reciptVisible:false})
        else
            this.setState({reciptVisible:true})
    }
render(){
        return (
          // Your Code
          {this.state.reciptVisible && (
                <ImageModel visbility={this.state.reciptVisible} viewImageModel={this.viewImageModel}></ImageModel>
                )} 
            <TouchableOpacity onPress={ this.viewImageModel } >
                        <Image
                            source={{
                            uri: 'data:image/jpeg;base64,' + this.state.filePath.data,
                            }}
                            
                            style={{ width: 100, height: 80 }}
                        />
                    </TouchableOpacity>
     )}
}

Collectives™ on Stack Overflow

React Native open modal from different component

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related