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 (
{icon}
<CustomText
style={Typography.body.S.medium}
color={isSelected ? theme.colors.primary : theme.colors.tabUnselected}
>
{label}
);
};
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={
}
placement="top"
>
) : (
);
};
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;
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.