When I turned it on the first time in ANDROID, tooltip was displayed right below the status bar but from the 2nd time on, it displayed correctly.

[hungnvu]

Incorrectly:

Correctly:

i use:
"react-native-walkthrough-tooltip": "^1.4.0",

it's my source code:
<Tooltip isVisible={lockTooltip} allowChildInteraction={true} placement="bottom" topAdjustment={ Platform.OS === 'android' && StatusBar.currentHeight ? -StatusBar.currentHeight : 0 } content={ <View style={{ backgroundColor: colors.black, flexDirection: 'row', }}> <Text.H6 white fontWeight="normal" style={{flex: 1, paddingRight: 24}} numberOfLines={3}> Show tooltip </Text.H6> <Pressable style={{marginTop: 4}} hitSlop={{top: 20, bottom: 20, left: 20, right: 20}} onPress={() => showLockTooltip(false)}> <NanoIcon name="close-with-out-circle" size={10} color="#fff" stroke="#fff" style={{color: '#fff'}} /> </Pressable> </View> } contentStyle={{ backgroundColor: colors.black, borderRadius: 8, paddingVertical: 12, paddingLeft: 12, paddingRight: 24, minHeight: 64, width: width - SPACING.TRIPLE * 2, }} childContentSpacing={2} onClose={() => {}}> <Pressable onPress={() => { showLockTooltip(); }} style={{marginVertical: 2}}> <NanoIcon color={titleColor ? titleColor : theme.colors.text} name={iconTitle} size={sizeIconTitle} /> </Pressable> </Tooltip>
AnyBody help me!

[kcotias]

This happened because the tooltip rendered before your screen had fully mounted, so it anchored in the wrong place. Try to use a setTimeout with at least 1000 to set the tooltip visible through an useEffect.

useEffect(() => {
  setTimeout(() => {
  setTooltipVisible(true);
 }, 1000)
},[])

[aswinkenPath]

Even I tried this it is not happening for me, the issue still remains the same, Does anyone have any other suggestions

[himanshuShekharNS]

Please use useInteractionManager prop and set it to true and then check. I think this will resolve that issue