Open hungnvu opened 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)
},[])
Even I tried this it is not happening for me, the issue still remains the same, Does anyone have any other suggestions
Please use useInteractionManager prop and set it to true and then check. I think this will resolve that issue
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!