Popover is misaligned on Android putting it above the trigger

[Swiftwork]

Description

Popover is misaligned and placed above trigger on Android.

CodeSandbox/Snack link

https://snack.expo.dev/@swiftwork/popover-misaligned-android

Steps to reproduce

import { Box, NativeBaseProvider, Text, Popover, Pressable } from 'native-base';

export default function App() {
  return (
    <NativeBaseProvider>
      <Box flex={1} justifyContent="center" alignItems="center">
        <Popover
          placement="left"
          trigger={(triggerProps) => (
            <Pressable {...triggerProps}>
              <Text>Trigger</Text>
            </Pressable>
          )}>
          <Popover.Content>
            <Popover.Arrow />
            <Popover.Body>
              <Text>Hello there!</Text>
            </Popover.Body>
          </Popover.Content>
        </Popover>
      </Box>
    </NativeBaseProvider>
  );
}

NativeBase Version

3.4

Platform

• [X] Android
• [ ] CRA
• [ ] Expo
• [ ] iOS
• [ ] Next

Other Platform

No response

Additional Information

This might have to do with status bar size not being taken into account during modal placement calculation.

[ankit-tailor]

Hey @Swiftwork, Thanks for reporting the issue. We'll fix it.

[hirvesh]

Hello, I am having the same issue unfortunately. Any updates on the fix please?

[curtisgibeaut]

Bump!!! Have same thing in project I'm working on. Specifically in this case in a modal window.

[evanoralph]

bump!! mee too

[pinktonio]

I fixed it with this workaround:

const androidOffsetFix = Platform.OS === 'android' ? 12 : 0

<Popover
  placement='left'
  trigger={(triggerProps) => (
    <Pressable {...triggerProps} p={3}>
      {<InfoIcon size='sm' color='primary.600' />}
    </Pressable>
  )}
>
  <Popover.Content width={250} top={androidOffsetFix} position={'relative'}>
    <Popover.Arrow mt={androidOffsetFix} />
    <Popover.Body>
      <Text>{popoverText}</Text>
    </Popover.Body>
  </Popover.Content>
</Popover>