Modal Component doesn't show on FAB.GROUP click

Question

I am using react native on my app. I tried to click the button on a page, then it showed correctly. Now, I added a floating button that should open a modal once an item is clicked. However, it doesn't show when t is clicked.

How to show a modal after clicking an item in FAB.GROUP?

const FloatingButton = () => {
 const [state, setState] = React.useState({ open: false }); 
 const [showModal, setShowModal] = useState(false);

 const onStateChange = ({ open }) => setState({ open });

 const showModalComponent = () => {
     setShowModal(true); // The component doesn't show even it's already changed to true
 }

 const { open } = state;

 return (
  <Provider>
  <Portal>
    <ModalComponent show={showModal} />
    <FAB.Group
      open={open}
      icon={open ? 'close' : 'plus'}
      fabStyle={BackgroundStyle.red}
      actions={[
        { icon: 'book-plus', label: 'New File', onPress: () => console.log('Pressed add') },
        { icon: 'folder-plus', label: 'New Folder', onPress: () => showModalComponent () },
      ]}
      onStateChange={onStateChange}
      onPress={() => {
        if (open) {
          // do something if the speed dial is open
        }
      }}
    />
  </Portal>
  </Provider>
  );
 };

 export default FloatingButton;

The modal component looks like this:

const ModalComponent= ({ show }) => {
 const [visible, setVisible] = React.useState(show);
 const [text, setText] = React.useState("");

 const showModal = () => setVisible(true);
 const hideModal = () => setVisible(false);
 const containerStyle = {backgroundColor: 'white', padding: 20, margin: 15};

 return (
   <Provider>
     <Portal>
      <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
      <Text style={[TextStyle.h5, MarginStyle.mb3]}>Create New Folder</Text>
      <TextInput
        label="Folder Name"
        value={text}
        mode="outlined"
        onChangeText={text => setText(text)}
        style={MarginStyle.mb5}
      />
      <Button mode="contained">Create</Button>
      </Modal>
     </Portal>
   </Provider>
   );
  };

  export default ModalComponent;

Answer 1

Okay, try putting an alert, or a console.log() to see if anything is actually triggered.

Another thing is to make it an obnoxious colour, because there is a possibility that it is displaying, but it is either covered by the other components, or appear somewhere you don't expect it.

Since you have tried to set it to true from the beginning, and it still won't show up, makes me lean towards; FAB.Group is covering it.

You could set the Modal's style to be 100% in width, with unique colour, and check if you still can't see it.

Another thing that you could try, is setting the Modal to position: "fixed", also, move the <ModalComponent show={showModal} /> below the FAB.group.

If you are not successful, would you mind giving us a screenshot of what it looks like? Because it is difficult to solve a visual issue... without the visuals.