When I try to run the react-native modal from the other page, I can run it by clicking twice

Question

Since I had to use modal in most places in the application, I wanted to gather the main structure of all of them at a certain point..When I try to do like this it works first click but If I want to call again I have to press these bell icon twice . I looked at many solutions but they didn't work at all.I looked at many solutions but they didn't work at all. Here is my modal.js code .

import { View, Text, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import React, { useState, useEffect } from 'react';
import Modal from 'react-native-modal';

export default function CustomModal({ modalVisible, children }) {
    const [isVisible, setIsVisible] = useState(modalVisible);
  
    useEffect(() => {
      setIsVisible(modalVisible);
    }, [modalVisible]);
  
    const closeModal = () => {
      setIsVisible(false);
    };

  return (
    <Modal
      isVisible={isVisible}
      onSwipeComplete={closeModal}
      style={{ justifyContent: 'flex-end', margin: 0, alignItems: 'center' }}
      useNativeDriver={true}
      backdropTransitionOutTiming={0}
      hideModalContentWhileAnimating
      onBackButtonPress={closeModal}
      onBackdropPress={closeModal}>
      <View
        style={{
          backgroundColor: 'white',
          padding: 0,
          height: 'auto',
          borderTopRightRadius: 12,
          borderTopLeftRadius: 12,
          width: '100%',
        }}>
        
        <View
          style={{
            backgroundColor: '#f5f6f6',
            justifyContent: 'space-between',
            flexDirection: 'row',
            alignItems: 'center',
            padding: 16,
            borderTopRightRadius: 12,
            borderTopLeftRadius: 12,
          }}>
          <Text style={{ color: 'black', fontSize: 16 }}>Hello</Text>
          <TouchableOpacity onPress={closeModal}>
            <Icon color="black" name="close" size={16} />
          </TouchableOpacity>
        </View>

        {children}
        <View style={{ padding: 20, alignItems: 'center' }}>{children}</View>
      </View>
    </Modal>
  );
}

//And I call these codes in my dashboard 
const [visible , setVisible] = useState(false);
<Modal modalVisible={visible} />
<IconButton icon='bell' iconColor='#EA580C' size={30} onPress={() => setVisible(prevVisible => !prevVisible)} />

When I try to do like this it works first click but If I want to call again I have to press these bell icon twice. I looked at many solutions but they didn't work at all.I looked at many solutions but they didn't work at all.

Answer 1

Remove the state from CustomModal and control visibility from the parent. Also use true when opening modal not negation operator. Something like this:

const CustomModal = ({ show, onClose, children }) => {
  return (
    <Modal
      visible={show}
      onRequestClose={() => {
        onClose();
      }}>
...
    </Modal>
  );
};

const [visible, setVisible] = useState(false);

<CustomModal show={visible} onClose={() => setVisible(false)}>
  ...
</CustomModal>
<Button title="Open" onPress={() => setVisible(true)} />