Tooltip: popover move elements when appears

version: “^1.2.7”, Device: Android

I want to create a Header component with an icon that shows the popover

Expected behavior

The Tooltip component shows popover without moving its children element

Describe the bug

It could be reproduced using Avatar, Icon and Text element

Screenshots

Avatar

import React from 'react';
import { Text } from 'react-native';

// theme
import { Header, Icon, Tooltip, Avatar } from 'components';

const App: () => React$Node = () => {
  return (
    <Header
      rightComponent={() => (
        <Tooltip popover={<Text>Info here</Text>} overlayColor="transparent">
          <Avatar rounded icon={{ name: 'person' }} />
        </Tooltip>
      )}
    />
  );
};

export default App;

Icon

import React from 'react';
import { Text } from 'react-native';

// theme
import { Header, Icon, Tooltip, Avatar } from 'components';

const App: () => React$Node = () => {
  return (
    <Header
      rightComponent={() => (
        <Tooltip popover={<Text>Info here</Text>} overlayColor="transparent">
          <Icon name="person" />
        </Tooltip>
      )}
    />
  );
};

export default App;

Text

const App: () => React$Node = () => {
  return (
    <Header
      rightComponent={() => (
        <Tooltip popover={<Text>Info here</Text>} overlayColor="transparent">
          <Text>Info here</Text>
        </Tooltip>
      )}
    />
  );
};

Your Environment (please complete the following information):

software	version
react-native-elements	^1.2.7
react-native	0.61.5

[uhmin99]

Use skipAndroidStatusBar={true}

[flyingcircle]

@cnmmbd https://react-native-elements.github.io/react-native-elements/docs/next/tooltip.html#skipandroidstatusbar