Action Sheet's initial position is at the top of the screen Android React Native Glue Stack UI

Issue

I was working on my project using Expo React Native and a UI library named Glue Stack UI and when I added a Popover or Actionsheet the initial position of the opened content always starts at the center or above of the screen in the case of Popover and Actionsheet respectively and then snaps back to the right place of its trigger button (which is the orange mail button) I have no idea what's causing this behavior but I'm assuming it's because of how Android or React Native is set-up. Any recommended fix?

I was able to find a somewhat related issue: https://github.com/SteffeyDev/react-native-popover-view/issues/28 but I'm not sure if it's the solution to my problem as it's using old react conventions.

I've also tried removing the messagesScreenContainer styling which centers every element on the screen but the same problem still exists.

Other than replacing the Button with a Fab button, I pretty much used the exact code template from the Actionsheet docs of Glue Stack UI Code:

export default function MessagesScreen() {
    const [isLoading, setIsLoading] = useState(true);
    const [showActionsheet, setShowActionsheet] = useState(false);
    const handleClose = () => setShowActionsheet(!showActionsheet);
    useEffect(() => {
        setTimeout(() => {
            setIsLoading(false);
        }, 2000);
    }, []);
    return (
        <View style={styles.messagesScreenContainer}>
            {isLoading ? (
                <Spinner size={"xl"} color={"#EC472E"} />
            ) : (
                <Box h={"95%"} w={"95%"} borderRadius="$md">
                    <VStack space="md">
                        <Alert
                            mx="$2.5"
                            action="info"
                            variant="accent"
                            bg="$info200"
                            borderColor="$info700"
                        >
                            <AlertIcon as={InfoIcon} mr="$3" color="$info700" />
                            <AlertText color="$textLight900">
                                Suspect is small. May have robbed a couple of trash cans. We
                                los...
                            </AlertText>
                        </Alert>
                        <Alert
                            mx="$2.5"
                            action="warning"
                            variant="accent"
                            bg="$warning200"
                            borderColor="$warning700"
                        >
                            <AlertIcon as={AlertOctagon} mr="$3" color="$warning700" />
                            <AlertText color="$textLight900">
                                so my husband climbed up to get the cat and now he's stuck
                                too...
                            </AlertText>
                        </Alert>
                        <Alert
                            mx="$2.5"
                            action="error"
                            variant="accent"
                            bg="$error200"
                            borderColor="$error700"
                        >
                            <AlertIcon as={AlertTriangle} mr="$3" color="$error700" />
                            <AlertText color="$textLight900">
                                over turned vehicle, flames showing, and body parts everywhere,
                                how...
                            </AlertText>
                        </Alert>
                    </VStack>
                    <Fab
                        bg="#EC472E"
                        size="lg"
                        placement="bottom right"
                        onPress={handleClose}
                    >
                        <FabIcon as={MailPlus} size="xl" />
                    </Fab>
                    <Actionsheet
                        isOpen={showActionsheet}
                        onClose={handleClose}
                        zIndex={999}
                    >
                        <ActionsheetBackdrop />
                        <ActionsheetContent h="$72" zIndex={999}>
                            <ActionsheetDragIndicatorWrapper>
                                <ActionsheetDragIndicator />
                            </ActionsheetDragIndicatorWrapper>
                            <ActionsheetItem onPress={handleClose}>
                                <ActionsheetItemText>Delete</ActionsheetItemText>
                            </ActionsheetItem>
                            <ActionsheetItem onPress={handleClose}>
                                <ActionsheetItemText>Share</ActionsheetItemText>
                            </ActionsheetItem>
                            <ActionsheetItem onPress={handleClose}>
                                <ActionsheetItemText>Play</ActionsheetItemText>
                            </ActionsheetItem>
                            <ActionsheetItem onPress={handleClose}>
                                <ActionsheetItemText>Favourite</ActionsheetItemText>
                            </ActionsheetItem>
                            <ActionsheetItem onPress={handleClose}>
                                <ActionsheetItemText>Cancel</ActionsheetItemText>
                            </ActionsheetItem>
                        </ActionsheetContent>
                    </Actionsheet>
                </Box>
            )}
        </View>
    );
}
const styles = StyleSheet.create({
    messagesScreenContainer: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
    },
});

Solution

This behavior is a bug pls check: https://github.com/gluestack/gluestack-ui/issues/1301

Answered By - ColstonBod-oy