How to show Modal in React Native using Functional Component imported from another file

Question

I am showing a view Login.js and in that view on button click, I need to render modal, that I have separated and written in another file named Countries.js.

On Login.js file I have imported Countries.js and on button click, I am doing this:

show_modal = () => {
    <Countries/>
}

but nothing is happening. I am a noob I just started React Native kindly help me.

Countries.js code:

import React, { Component, useState } from "react";
import {
Alert,
Modal,
Text,
TouchableHighlight,
View
} from "react-native";

const Countries = () => {

    console.log('called');
    
    const [modalVisible, setModalVisible] = useState(true);
    
    return (
    
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>
    
            <TouchableHighlight
              style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
    
      <TouchableHighlight
        style={styles.openButton}
        onPress={() => {
          setModalVisible(true);
        }}
      >
        <Text style={styles.textStyle}>Show Modal</Text>
      </TouchableHighlight>
    </View>)
};
    
export default Countries;

hi,can you add Countries.js code so we can se why its not working but from first look my guess is since you didnt any props in Countries component it does not know what to do. — Anwar Gul
– Anwar Gul, Commented Apr 8, 2020 at 13:21
You can passing props for modalVisible=true and use modal component , — Waleed Nasir
– Waleed Nasir, Commented Apr 8, 2020 at 13:41
You see i already set the state of modal true by default. Waleed Nasir — Junaid Gul
– Junaid Gul, Commented Apr 8, 2020 at 13:43

Pinki Dhakad · Accepted Answer · 2020-06-20 11:40:45Z

Login.js

import React, { Component, useState } from "react";
import {Modal, View, Text, TouchableHighlight} from 'react-native';
import CountryModal from 'path to outsource country modal file';

const login = (props)=>{
const [modalVisible, setModalVisible] = useState(true);

return(

<View>
    <TouchableHighlight
style={styles.openButton}
onPress={() => {
    setModalVisible(true);
}}
>
<Text style={styles.textStyle}>Show Modal</Text>
</TouchableHighlight>

<CountryModal isVisible={modalVisible} setModalVisiblity = {()=>{setModalVisible(preState=> preState = !preState)}}>
</View>
)
}

export default login;

Country Modal file

import React from react;
import {Modal} from 'react-native';

const Country = (props)=>{

return (
<Modal
    animationType="slide"

    transparent={true}
    visible={isVisible}
    onRequestClose={() => {
      Alert.alert("Modal has been closed.");
    }}
  >
    <View style={styles.centeredView}>
      <View style={styles.modalView}>
        <Text style={styles.modalText}>Hello World!</Text>

        <TouchableHighlight
          style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
          onPress={() => {props.setModalVisiblity
          }}
        >
          <Text style={styles.textStyle}>Hide Modal</Text>
        </TouchableHighlight>
      </View>
    </View>
  </Modal>
)
}

Hope you got your answer.

Dipansh Khandelwal · Accepted Answer · 2020-04-08 18:28:04Z

0

You need to have this modal directly with other components. Example code

export default function Login() {

  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View>
      <Button title="Toggle Modal" onPress={() => setModalVisible(!modalVisible)}
      // other login page code
      <Countries visible={visible} /> // or any other modal, add direclty to the screen you need to show the modal at
    </View>
  )

}

answered Apr 8, 2020 at 18:28

Dipansh Khandelwal

6264 silver badges10 bronze badges

2 Comments

Junaid Gul Over a year ago

Sir i didnt set any props for Countries.

Dipansh Khandelwal Over a year ago

You should remove the visible state from the modal to the parent component. Because it's the state of the parent component, that the modal should be shown or not. So your modal would not contain any state, rather shift the state logic to upper component.

Onur Doğan · Accepted Answer · 2024-01-08 03:06:30Z

0

Change this:

show_modal = ()=> {
  <Countries/>
}

to this:

show_modal = ()=> {
  return  <Countries/>; // add return keyword 
}

the above function will return undefined if return id is not explicitly defined

edited Jan 8, 2024 at 3:06

Onur Doğan

2,11612 gold badges35 silver badges60 bronze badges

answered Apr 8, 2020 at 13:48

Anwar Gul

6935 silver badges15 bronze badges

3 Comments

Junaid Gul Over a year ago

Can you give a try in your app and then answer?

Anwar Gul Over a year ago

where are you call this function show_modal? in react native

Junaid Gul Over a year ago

inside Login.js file

Collectives™ on Stack Overflow

How to show Modal in React Native using Functional Component imported from another file

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related