Opening a Dialog from the ActionSheet doesn't work without timeout or callback

[Keithcat767]

Description

If you try to open a Dialog from an option in an ActionSheet, it doesn't seem to wait until after the ActionSheet is fully dismissed and therefore is prevented from being opened. I can confirm it works if I use setTimeout to wait long enough to open my dialog or if I use the onModalDismissed prop to attempt to open the dialog.

Related to

• [x] Components
• [ ] Demo
• [ ] Docs
• [ ] Typings

Steps to reproduce

1. Have an ActionSheet component and a Dialog inside the same component
2. Have an option inside the ActionSheet with an onPress function that toggles the open state of the Dialog
3. Note that the dialog will not open
4. Add a setTimeout of 500ms and see that it will now properly open

Expected behavior

The dialog will open after the ActionSheet has fully dismissed.

Actual behavior

The dialog doesn't display unless you explicitly tell it to wait for the animation to finish

More Info

Code snippet

export default function MyDemoScreen() {
  const [showEditModal, setShowEditModal] = useState(false);
  const [showActions, setShowActions] = useState(false);

  return (
    <>
      <Dialog
        useSafeArea
        visible={showEditModal}
        onDismiss={() => setShowEditModal(false)}
      >
        <View>
          <Text>TEST</Text>
        </View>
      </Dialog>
      <ActionSheet
        title={`Edit`}
        message={"Message goes here"}
        options={[
          {
            label: "Rename",
            onPress: () => {
              setShowEditModal(true);
            },
          },
          { label: "Cancel" },
        ]}
        visible={showActions}
        onDismiss={() => setShowActions(false)}
      />
    </>
  );
}

Screenshots/Video

Environment

• React Native: 0.64.3
• React Native UI Lib: 6.18.0

Affected platforms

• [ ] Android
• [X] iOS
• [ ] Web

[M-i-k-e-l]

Hi @Keithcat767,

It seems to be working for me, not sure why, you can add containerStyle={{backgroundColor: 'white'}} to your Dialog to make sure you see it properly.

If it is not working for you I'd try something like the following (~since you've marked iOS~ I think this should work for both platforms):

const [showEditModal, setShowEditModal] = useState(false);
const [showActions, setShowActions] = useState(false);
const editWasPressed = useRef(false);

return (
  <>
    <Button label="bla" onPress={() => setShowActions(true)}/>
    <Dialog useSafeArea containerStyle={{backgroundColor: 'white'}} visible={showEditModal} onDismiss={() => setShowEditModal(false)}>
      <View>
        <Text>TEST</Text>
      </View>
    </Dialog>
    <ActionSheet
      title={`Edit`}
      message={'Message goes here'}
      options={[
        {
          label: 'Rename',
          onPress: () => {
            editWasPressed.current = true;
          }
        },
        {label: 'Cancel'}
      ]}
      visible={showActions}
      onDismiss={() => {
        setShowActions(false);
      }}
      onModalDismissed={() => {
        if (editWasPressed.current) {
          editWasPressed.current = false;
          setShowEditModal(true);
        }
      }}
    />
  </>
);

[M-i-k-e-l]

We did encounter something (#2575) that may have been relevant, although we only found it to be related to RN71. Please reopen if it is still relevant.