react-native-walkthrough-tooltip icon indicating copy to clipboard operation
react-native-walkthrough-tooltip copied to clipboard

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.

Open hungnvu opened this issue 1 year ago • 3 comments

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!

hungnvu avatar Apr 21 '23 03:04 hungnvu

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)
},[])

kcotias avatar Apr 21 '23 14:04 kcotias

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

aswinkenPath avatar May 31 '23 10:05 aswinkenPath

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

himanshuShekharNS avatar Sep 27 '23 05:09 himanshuShekharNS