search

xcarpentier / rn-tourguide

🚩Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)
https://xcarpentier.github.io/rn-tourguide/
Other
745 stars 214 forks source link

How to highlight bottom tab from react navigation? #132

Closed anniewey closed 1 year ago

anniewey commented 1 year ago

I have a few tabs in my BottomTabNavigator and would like to highlight the tab as part of my walkthrough.

anniewey commented 1 year ago

Solve by using tabBarButton and tabBarItemStyle to fix the button width

tabBarItemStyle: { width: deviceWidth / 4 },
tabBarButton: (props) => (
<TourGuideZone
       zone={1}
       text={'Hey there! Welcome~'}
       shape='circle'
>
                <TouchableOpacity {...props} />
</TourGuideZone>

Note: While facing the other issue on starting next tour after bottom tab tour done