react-native-bottom-tab-tour is a flexible tourguide for your bottom tab navigation.
You should already have react-native-safe-area-context installed which comes with the react-navigation package. Run the following to install this package.
yarn install @saad27/react-native-bottom-tab-tour
import react-native-bottom-tab-tour in your root component, it should be outside of your navigation. like this
import TabTour from "@saad27/react-native-bottom-tab-tour";
const data = [
{
title: 'Welcome to the App!\nLets take a tour!', // INTRO ITEM
},
{
title: 'First Tab',
description: `This is the first tab.\nYou can see the list of all the tabs.`,
},
{
title: '2nd Tab',
description: `This is the second tab.\nYou can see the list of all the tabs.`,
},
{
title: 'Third Tab',
description: `This is the second tab.\nYou can see the list of all the tabs.`,
},
{
title: 'Fourth Tab',
description: `This is the second tab.\nYou can see the list of all the tabs.`,
},
{
title: 'Ready to go!', // ENDING ITEM
description: `We have come to the end of the tour.\nYou can now use the app.`,
},
];
const App () => {
const [showTabTour, setShowTabTour] = React.useState(true);
<SafeAreaProvider>
<Navigation />
{showTabTour && (
<TabTour data={data} closeTabTour={() => setShowTabTour(false)} />
)}
<StatusBar />
</SafeAreaProvider>
}You can run the example from the example folder. Go to example folder, run yarn and expo run ios/android.
There are 2 compuslory props.
data- You need to pass thedataarray. Each item in thedata arraywill act as an individual view.
For the tab tour to work properly, you need to give an intro item (which is the first index of the array) and an ending item (which is the last item of the array). The intro and ending item appears as a popup in the middle of the screen whereas the other items will be appearing on top of each individual tab.
tabCount- number of tabs.
Interface of the data object.
export interface TOOLTIP_DATA {
title: string; // TITLE IS COMPULSORY
titleStyle?: TextStyle;
description?: string;
descriptionStyle?: TextStyle;
style?: ViewStyle;
btnText?: string; // NEXT BTN TITLE
}To customize further, there are few more additional props. (The list will grow soon!)
| Props | Type | Description |
|---|---|---|
| data | TOOLTIP_DATA[] | data array for tour guide |
| closeTabTour | () => void | for closing the tour view |
| nextBtnStyle | ViewStyle | next button styling |
| skipBtnStyle | ViewStyle | skip button styling |
| opacity | number (0-1) | opacity for the background layer |
| opacityViewHeight | number | height of the opacity layer |
| opacityColor | string | background color of the opacity view |
MIT
Will be very happy to get any contribution!