jasongaare / react-native-walkthrough-tooltip

An inline wrapper for calling out React Native components via tooltip
MIT License
610 stars 182 forks source link

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. #179

Open hungnvu opened 1 year ago

hungnvu commented 1 year ago

Incorrectly: Screenshot 2023-04-21 at 10 10 21 Correctly:

Screenshot 2023-04-21 at 10 44 23

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 commented 1 year ago

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 commented 1 year ago

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

himanshuShekharNS commented 11 months ago

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