Not working properly with Tab Navigator

[Ashu9997]

Thanks for package. I am trying to show tooltip on Bottom Tab item . But the view is not drawing properly. adding

Adding the BottomTab Item component below. Any help would be appreciated here.

interface TabItemProps { label: string; icon: React.ReactNode; isSelected: boolean; itemIndex: number; onPressed: (e?: any) => void; } const BottomTabItem = ({ label, icon, isSelected, onPressed, itemIndex }: TabItemProps) => { const showWalkthrough = itemIndex == 2 || itemIndex == 3; const { styles, theme } = useStyles(styleSheet); const { currentStep, finishWalkthrough, previousStep, skipWalkthrough, nextStep } = useWalkthroughStore(); const handleWalkthroughComplete = () => { finishWalkthrough(); }; const handleWalkthroughSkip = () => { skipWalkthrough(); }; const handleWalkthroughPrevious = () => { previousStep(); }; const handleWalkthroughNext = () => { nextStep(); }; const TabItem = () => { return ( <View style={styles.container}> <TouchableOpacity activeOpacity={0.6} style={styles.tabBarItem} onPress={onPressed}> {icon} <Spacer height={heightScale(6)} /> <CustomText style={Typography.body.S.medium} color={isSelected ? theme.colors.primary : theme.colors.tabUnselected} > {label} </CustomText> </TouchableOpacity> </View> ); }; return showWalkthrough ? ( <Tooltip contentStyle={styles.tooltipContentStyle} backgroundColor={theme.colors.walkthroughBackground} parentWrapperStyle={styles.parentWrapper} childrenWrapperStyle={styles.childrenWrapper} closeOnBackgroundInteraction={false} closeOnChildInteraction={false} childContentSpacing={widthScale(8)} allowChildInteraction={false} closeOnContentInteraction={false} isVisible={currentStep == 4} content={ <WalkthroughTooltipView itemIndex={2} onComplete={handleWalkthroughComplete} onSkip={handleWalkthroughSkip} onNext={handleWalkthroughNext} onPrevious={handleWalkthroughPrevious} /> } placement="top" > <TabItem /> </Tooltip> ) : ( <TabItem /> ); }; const styleSheet = createStyleSheet(({ colors }) => ({ container: { flex: 1, alignItems: 'center', }, tabBarItem: { flex: 1, alignItems: 'center', justifyContent: 'center', }, parentWrapper: {}, childrenWrapper: { borderWidth: 2, borderColor: colors.warning, borderRadius: widthScale(200), borderStyle: 'dotted', }, tooltipContentStyle: { backgroundColor: colors.surfacePrimary, }, })); export default BottomTabItem;

[Ashu9997]

@jasongaare I managed to show to tooltip with proper positioning . But the view is not drawing over the modal . adding the screen shot below . can not fine the culprit here. could you pls point me into right direction here.