RN-TourGuide
A flexible tourguide for your react native app!
🎉 Webable 🎉
(a rewriting of react-native-copilot)
Installation
yarn add rn-tourguide
yarn add react-native-svg
react-native link react-native-svg
If you are using Expo:
expo install react-native-svg
Usage
// Add <TourGuideProvider/> at the root of you app!
TourGuide
props:
In order to start the tutorial, you can call the start
function from useTourGuideController
hook:
{ const start = React { // ... }}
If you are looking for a working example, please check out this link.
Custom tooltip component
You can customize the tooltip by passing a component to the copilot
HOC maker. If you are looking for an example tooltip component, take a look at the default tooltip implementation.
const TooltipComponent = isFirstStep isLastStep handleNext handlePrev handleStop currentStep // ...; <TourGuideProvider ...tooltipComponent: TooltipComponent>// ...</TourGuideProvider>
Custom tooltip styling
You can customize tooltips style:
Custom mask color
You can customize the mask color - default is rgba(0, 0, 0, 0.4)
, by passing a color string to the copilot
HOC maker.
Custom labels (for i18n)
You can localize labels:
Listening to the events
Along with start()
, useTourGuideController
passes copilotEvents
function to the component to help you with tracking of tutorial progress. It utilizes mitt under the hood, you can see how full API there.
List of available events is:
start
— Copilot tutorial has started.stop
— Copilot tutorial has ended or skipped.stepChange
— Next step is triggered. PassesStep
instance as event handler argument.
Contributing
Issues and Pull Requests are always welcome.
Hire an expert!
Looking for a ReactNative freelance expert with more than 14 years experience? Contact me from my website!
License
- MIT © 2020 Xavier CARPENTIER SAS, https://xaviercarpentier.com.
- MIT © 2017 OK GROW!, https://www.okgrow.com.