[Android] Tooltip moving component

[anchpop]

video

Relevant code:

                        <PopoverTooltip
                            ref={'tooltip' + this.props.index}
                            buttonComponent={
                            <MY COMPONENT HERE, doesn't matter because it happens no matter what component I use, including the one in the readme examples>}
                            items={[
                                {
                                label: 'Item 1',
                                onPress: () => {}
                                },
                                {
                                label: 'Item 2',
                                onPress: () => {}
                                }
                            ]}
                            // animationType='timing'
                            // using the default timing animation
                            />

This happens even when I set setBelow={true} (the component moving up and down)

[gartlandj]

I'm having this exact same issue

[ingChristian27]

you could solve this issue?

[davidleee]

Having the same issue on my Android devices.(everything is fine on iOS)

Whenever the Tooltip is show, my buttonComponents will be pushed down a little bit. I have to adjust the value calculated in onInnerContainerLayout in order to make things right.

[davidleee]

@ingChristian27 Seems like the problem can be fixed if we leave our buttonComponent where it is instead of re-showing it inside the Modal component.

I have modified the source code a little and put much more comments (in Chinese) in it

https://github.com/davidleee/react-native-tooltip/blob/24f0009fa9949abeb02c5adffaeeec8b9c515553/Tooltip/index.js#L379-L399

feel free to leave a comment and we can discuss more.

[phamhoaivu911]

@anchpop @gartlandj @ingChristian27 and other people who follow this issue, it is because of the StatusBar height on Android. As you can see in the video, it has a lighter color and is the one that pushes the content down. The easy fix is to add statusBarTranslucent prop to the Modal component. Hope this help.