React Native Copilot

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

Demo

Installation

npm install --save @okgrow/react-native-copilot

Optional: If you want to have the smooth SVG animation, you should install and link react-native-svg. If you are using Expo, you can skip this as Expo comes with react-native-svg.

npm install --save react-native-svg
react-native link react-native-svg

Usage

Use the copilot() higher order component for the screen component that you want to use copilot with:

import { copilot } from '@okgrow/react-native-copilot';

class HomeScreen extends Component { /* ... */ }

export default copilot()(HomeScreen);

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 { copilot, walkthroughable, CopilotStep } from '@okgrow/react-native-copilot';

const CopilotText = walkthroughable(Text);

class HomeScreen {
  render() {
    return (
      
    );
  }
}

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.

In order to start the tutorial, you can call the start prop function in the root component that is injected by copilot:

class HomeScreen extends Component {
  handleStartButtonPress() {
    this.props.start();
  }

  render() {
    // ...
  }
}

export default copilot()(HomeScreen);

If you are looking for a working example, please check out this link.

Overlays and animation

The overlay in react-native copilot is the component that draws the dark transparent over the root component. React-native copilot comes with two overlay components: view and svg.

The view overlay uses 4 rectangles drawn around the target element using the `