How to check if my react-native-modalize modal is open or close?

Question

Actually i am working on multiple modal at once so i have to make a condition that if my modal with "xyz" ref is close then display a button.

Answer 1

react-native-modalize has onOpen and onClose props which will allow you to set some state to keep track of then open/closed status of each modal. You can then use that state to control the rendering of your buttons.

Example on Expo Snack.

import React, { useRef } from 'react';
import { View, Text, Button } from 'react-native';
import { Modalize } from 'react-native-modalize';
import RnGH  from 'react-native-gesture-handler';
const { useState, useEffect } = React;

export default function App() {
  const modalA = useRef(null);
  const modalB = useRef(null);

  const [modalAOpen, setModalAOpen] = useState(false);
  const [modalBOpen, setModalBOpen] = useState(false);

  return (
    <>
      <Button
        onPress={() => {
          if (modalAOpen) {
            modalA.current?.close();
          } else {
            modalA.current?.open();
          }
        }}
        title={`${modalAOpen ? 'Close' : 'Open'} Modal A`}
      />
      <Button
        onPress={() => {
          if (modalBOpen) {
            modalB.current?.close();
          } else {
            modalB.current?.open();
          }
        }}
        title={`${modalBOpen ? 'Close' : 'Open'} Modal B`}
      />

      <Modalize
        ref={modalA}
        onOpen={() => setModalAOpen(true)}
        onClose={() => setModalAOpen(false)}>
        <Text style={{ color: 'red' }}>Modal A</Text>
      </Modalize>
      <Modalize
        ref={modalB}
        onOpen={() => setModalBOpen(true)}
        onClose={() => setModalBOpen(false)}>
        <Text style={{ color: 'blue' }}>Modal B</Text>
      </Modalize>
    </>
  );
}

Answer 2

You should make a custom component with a modal in it, so every modal has its own state - isOpen. Then in your custom modal component, you can show something or not, based on your isOpen property.