react-native-walkthrough-tooltip
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.
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!
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