Step-by-step walkthrough for your react native app!

Demo

Installation

yarn add react-native-copilot
# or with npm:
npm install --save react-native-copilot

Optional: If you want to have the smooth SVG animation, you should install and link react-native-svg.

Usage

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

import { CopilotProvider } from "react-native-copilot";
const AppWithCopilot = () => {
  return (
    <CopilotProvider>
      <HomeScreen />
    </CopilotProvider>
  );
};

NOTE: The old way of using copilot with the copilot() HOC maker is deprecated in v3. It will continue to work but it's not recommended and may be removed in the future.

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 {
  CopilotProvider,
  CopilotStep,
  walkthroughable,
} from "react-native-copilot";
const CopilotText = walkthroughable(Text);
const HomeScreen = () => {
  return (
    <View>
      <CopilotStep text="This is a hello world example!" order={1} name="hello">
        <CopilotText>Hello world!</CopilotText>
      </CopilotStep>
    </View>
  );
};

Every CopilotStep must have these props:

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

Additionally, a step may set the active prop, a boolean that controls whether the step is used or skipped.

In order to start the tutorial, you can call the start function from the useCopilot hook: