Buttons / Pressables inside AlertDialog don't work

[sahajarora1286]

Hello,

I just got Gluestack set up and working in my React Native app. The first component I tried to render is the AlertDialog.

The dialog opens up and renders fine with appropriate styling, however, the buttons / pressables that I place inside the AlertDialog are non-responsive , i.e, the onPress hooks don't get trigerred when I click those buttons.

In the attached screenshot, you can see there's three buttons. Two inside <AlertDialogFooter> and one blue button that reads "Close Dialog" which is a custom <Pressable>.

The onPress functions aren't triggered on clicking any of these buttons.

Here's the code:

 const [showAlertDialog, setShowAlertDialog] = useState(false);
  const handleClose = () => setShowAlertDialog(false);

  return (
    <>
      <SafeAreaView>
        <AlertDialog isOpen={showAlertDialog} onClose={handleClose} size="md">
          <AlertDialogBackdrop />
          <AlertDialogContent>
            <AlertDialogHeader>
              <Text className="text-typography-950 font-semibold">
                Are you sure you want to delete this post?
              </Text>
            </AlertDialogHeader>
            <AlertDialogBody className="mt-3 mb-4">
              <Text>
                Deleting the post will remove it permanently and cannot be
                undone. Please confirm if you want to proceed.
              </Text>

              <Pressable
                style={styles.button}
                onPress={() => setShowAlertDialog(false)}
              >
                <Text style={{ color: 'white' }}>Close Dialog</Text>
              </Pressable>
            </AlertDialogBody>
            <AlertDialogFooter>
              <GlueStackButton.Button
                variant="outline"
                action="secondary"
                onPress={handleClose}
                size="sm"
              >
                <GlueStackButton.ButtonText>Cancel</GlueStackButton.ButtonText>
              </GlueStackButton.Button>
              <GlueStackButton.Button size="sm" onPress={handleClose}>
                <GlueStackButton.ButtonText>Delete</GlueStackButton.ButtonText>
              </GlueStackButton.Button>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
    </SafeAreaView>
  </>

Any help would be greatly appreciated. Thanks!