How to open Modal from another component in react-native - react-native

Question

I have tried to open Modal from another component in react-native, but modal is not open. so please help me if have any solution. this is my code
modal.js
import React from './node_modules/react';
import { View, Text } from 'react-native';
const ProfileModal = () => {
return (
<View>
<Text>HELLO TEXT</Text>
</View>
);
}
export default ProfileModal;
----------------------------------------
header.js
import ProfileModal from './ProfileModal';
import { Image, View, TouchableOpacity, Text } from 'react-native';
import Modal from 'react-native-modal';
const openLoginPopup = () => {
return (
<TouchableOpacity onPress={() => this.openModal}>
<Text> Login </Text>
</TouchableOpacity>
)
}
const openModal = () => {
return (
<Modal isVisible={true}>
<ProfileModal />
</Modal>
)
}
Thanks,

Answer 1

In that case, react-native-modal provide callback onBackdropPress, onBackButtonPress to close.
You can use it like this:
const ProfileModal = ({ open, onClose }) => {
return (
<Modal isVisible={open} onBackButtonPress={onClose} onBackdropPress={onClose}>
<View>
<Text>HELLO TEXT</Text>{' '}
</View>
</Modal>
)
}
Then pass onClose function when using it:
<ProfileModal open={open} onClose={()=> setOpen(false)} />

Answer 2

It's like you write the content modal in modal file. So you can do it something like:
modal.js
import React, {useState} from 'react';
import { View, Text } from 'react-native';
const ProfileModal = () => {
return (
<View>
<Text>HELLO TEXT</Text>
</View>
);
}
export default ProfileModal;
----------------------------------------
header.js
import ProfileModal from './ProfileModal';
import { Image, View, TouchableOpacity, Text } from 'react-native';
import Modal from 'react-native-modal';
const Header = () => {
const [open, setOpen] = useState(false)
return (
<View>
{/* some content */}
{/* btn trigger */}
<TouchableOpacity onPress={() => setOpen(true)}>
<Text> Login </Text>
</TouchableOpacity>
<Modal isVisible={open}>
<ProfileModal />
</Modal>
</View>
)
}
or
modal.js
import React, {useState} from 'react';
import { View, Text } from 'react-native';
const ProfileModal = ({ open }) => {
return (
<Modal isVisible={open}>
<View>
<Text>HELLO TEXT</Text>
</View>
</Modal>
);
}
export default ProfileModal;
----------------------------------------
header.js
import ProfileModal from './ProfileModal';
import { Image, View, TouchableOpacity, Text } from 'react-native';
import Modal from 'react-native-modal';
const Header = () => {
const [open, setOpen] = useState(false)
return (
<View>
{/* some content */}
{/* btn trigger */}
<TouchableOpacity onPress={() => setOpen(true)}>
<Text> Login </Text>
</TouchableOpacity>
<ProfileModal open={open} />
</View>
)
}

Answer 3

First of all openModal method is not part of openLoginPopup so remove this before openModal method.
Just use directly like below,
const openLoginPopup = () => {
return (
<TouchableOpacity onPress={openModal}>
<Text> Login </Text>
</TouchableOpacity>
)
}
Second issue was that you also don't need arrow function in onPress event until you want to pass some parameters in openModal method. You can directly pass the method name and it will work.