React native modal open modal from different component using visible prop

Question

How could i open Modal from different component file using my visible prop that is passed inside isVisible with some state and button. Right now the modal is not opening. I am using react-native-modal ( https://github.com/react-native-modal/react-native-modal )

 type ModalProps = {
        visible: boolean;
    };

export function Modal({ visible }: ModalProps) {
    return (
        <ReactNativeModal isVisible={visible} >
                <Pressable>
                    <Icon size={14} name="icon1" />
                </Pressable>
        </ReactNativeModal>
    );
}

Calling component in different file

 const [isModalVisible, setModalVisible] = React.useState(false);

    function handleModalClose() {
        setModalVisible(false);
    }

    function handleModalOpen() {
        setModalVisible(true);
    }

<Button title="Modal one" onPress={handleModalOpen}>
 <Modal visible={isModalVisible}></Modal>
</Button>

Answer 1

You should pass isModalVisible as visible prop to the Modal component:

<Modal visible={isModalVisible}></Modal>

If you need to close the modal from the Modal component, you can pass also the setModalVisible function:

type ModalProps = {
    visible: boolean;
    setModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
};

export function Modal({ visible, setModalVisible }: ModalProps) {
    const handleClose = () => {
        setModalVisible(false);
    }

    ...