ModalBackdrop not covering bottom navigation on Android.

[GollyJer]

Description

I have I have this modal at the very top of the app, outside the SafeAreaProvider and it still doesn't work. It works as expected on iOS.

gluestack-ui Version

1.1.26

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [ ] Web
• [X] Android
• [ ] iOS

[Viraj-10]

Hey @GollyJer, Can you provide minimal reproduction of this bug?

[GollyJer]

Have to run it on a newer android device with Gesture Navigation turned on.

import React from 'react';

import {
  Button,
  ButtonText,
  GluestackUIProvider,
  Center,
  Modal,
  ModalBackdrop,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  Heading,
  Icon,
  CloseIcon,
  Text,
} from '@gluestack-ui/themed';
import { config } from '@gluestack-ui/config';
import { useState } from 'react';
import { StatusBar } from 'expo-status-bar';

export default function App() {
  const [showModal, setShowModal] = useState(false);
  console.log(showModal);
  const ref = React.useRef(null);
  return (
    <GluestackUIProvider config={config}>
      <StatusBar style="light" />
      <Center flex={1}>
        <Button onPress={() => setShowModal(true)} ref={ref}>
          <ButtonText>Show Modal</ButtonText>
        </Button>

        <Modal
          isOpen={showModal}
          onClose={() => {
            setShowModal(false);
          }}
          finalFocusRef={ref}>
          <ModalBackdrop color="red" />
          <ModalContent>
            <ModalHeader>
              <Heading size="lg">Engage with Modals</Heading>
              <ModalCloseButton>
                <Icon as={CloseIcon} />
              </ModalCloseButton>
            </ModalHeader>
            <ModalBody>
              <Text>
                Elevate user interactions with our versatile modals. Seamlessly
                integrate notifications, forms, and media displays. Make an
                impact effortlessly.
              </Text>
            </ModalBody>
            <ModalFooter>
              <Button
                variant="outline"
                size="sm"
                action="secondary"
                mr="$3"
                onPress={() => {
                  setShowModal(false);
                }}>
                <ButtonText>Cancel</ButtonText>
              </Button>
              <Button
                size="sm"
                action="positive"
                borderWidth="$0"
                onPress={() => {
                  setShowModal(false);
                }}>
                <ButtonText>Explore</ButtonText>
              </Button>
            </ModalFooter>
          </ModalContent>
        </Modal>
      </Center>
    </GluestackUIProvider>
  );
}

[GollyJer]

Any thoughts @Viraj-10?

[Viraj-10]

Hey @GollyJer, Sorry we didn't get time to look at it. We will have a look ASAP.

[GollyJer]

Hi @Viraj-10 I was able to dive into this a little more today and figured out the nav bar on Android is not included in the body of the app. It has to be controlled on its own.

Once that was figured out I put together a working example. gluestack Modal - Android Navbar

Now the question is... how do I control the opacity of ModalBackdrop? If you take a look at line 42 of MyModal you'll see I'm setting opacity={1} but the backdrop is not solid blue. It still has opacity/transparency applied.

Thanks!

[GollyJer]

And here is a total hack that almost gives the desired effect. This approach would have to be done on your side of the code to get it perfect I think. gluestack Modal - Android Navbar - hack

https://github.com/gluestack/gluestack-ui/assets/689204/c6c64caf-4666-4f03-895f-c5b9f439868b