react-native-stepper-tour

react-native-stepper-tour

react-native-stepper-tour is a lightweight and flexible React Native package designed to create guided tours within your app. This package allows you to guide users step by step through key features or onboarding processes with dynamically positioned tooltips.

react-native-stepper-tour

A React Native package for creating guided app tours with a stepper.

Installation

npm install react-native-stepper-tour



# Usage
Wrap the portion of your app that you want to use copilot with inside <AppTourProvider>:



import { AppTourProvider } from "react-native-stepper-tour";

const AppWithTour = () => {
  return (
    <AppTourProvider>
      <HomeScreen />
    </AppTourProvider>
  );
};

Before defining walkthrough steps for your react elements, you must make them walkthroughable. The easiest way to do that for built-in React Native components is using the walkthroughable HOC. Then you must wrap the element with CopilotStep.

import {
  AppTourProvider,
  CopilotStep,
  walkthroughable,
  useCopilot
} from "react-native-stepper-tour";

const CopilotText = walkthroughable(Text);

const HomeScreen = () => {
  const { start } = useCopilot();

  return (
    <View>
      <CopilotStep text="This is a hello world example!" order={1} name="hello">
        <CopilotText>Hello world!</CopilotText>
      </CopilotStep>
      <Button title="Start tutorial" onPress={() => start()} />
    </View>
  );
};


Every CopilotStep must have these props:

name: A unique name for the walkthrough step.
order: A positive number indicating the order of the step in the entire walkthrough.
text: The text shown as the description for the step.