Nativescript Copilot

Step-by-step walkthrough for your Nativescript app!

Inspired by the awesome React Native Copilot plugin

Nativescript-Copilot is a component that is currently only suitable for NativeScript-Vue. If you'd like to see a Nativescript-Core or Nativescript-Angular implementation, then please submit a PR.

Quick Start - Vue

npm install --save @nativescript-copilot/vue

Main entry point

import Copilot from '@nativescript-copilot/vue';
Vue.use(Copilot)

Nativescript-Vue Usage

This can be used on a Page by Page basis. The primary way the tour is driven is by passing in a ref for each step. For example below, we have a ref named step1 in the Image component.

  <StackLayout col="0" verticalAlignment="bottom" horizontalAlignment="left">
    <Image ref="step1" src="~/assets/logo.png" height="75%" width="75%" borderWidth="1"/>
  </StackLayout>

You can combine multiple refs to create a tour. You will need to create an object array that carries the config for the tour for a particular page. For example:

      this.steps = [
        {
          name: 'First',
          text: 'here is some text',
          order: 1,
          target: this.$refs.step1.nativeView,
          animated: true,
          isFirstStep: true
        },
        {
          name: 'Second',
          text: 'here is some text with a rounded highlighted zone and padding',
          order: 2,
          target: this.$refs.step2.nativeView,
          animated: true,
          highlightBorderRadius: 10,
          highlighPadding: 5,
        },
        {
          name: 'Third',
          text: 'here is some text that should hopefully be long enought to cause a wrap.  What will happen if the text is too long. Find out!',
          order: 3,
          target: this.$refs.step3.nativeView,
          animated: true
        },
        {
          name: 'Fourth',
          text: 'This has a veritcal offset of -5 which will push the step 5dp towards the top',
          order: 4,
          target: this.$refs.step4.nativeView,
          animated: false,
          verticalOffset: -5,
        },
        {
          name: 'Fifth',
          text: '',
          order: 4,
          target: this.$refs.step3.nativeView,
          animated: false,
          isCustom: true,
          itemTemplate: '<Label text="This is a custom template!" color="green"/>',
          customBackgroundColor: 'black',
          customBorderRadius: '15',
          numberAccentColor: 'white',
          numberBackgroundColor: 'green',
           customTooltipStyle:  {
            fontFamily: 'Avenir-Bold',
            tooltipFontSize: 12,
            tooltipTextColor: 'white',
            buttonFontSize: 12,
            accentColor: 'white'
          },
          customLabels: {
            skip: 'Stop',
            previous: 'Before',
            next: 'Continue',
            finish: 'Done'
          }
        },
        {
          name: 'Sixth',
          text: 'This will darken the whole page and center the tool tip',
          order: 4,
          target: this.$refs.step4.nativeView,
          animated: false,
          darkenWholePage: true,
          isLastStep: true
        }
      ]

There are several configuration items in a Step object:

You will then pass the step config into the Copilot component as the steps prop. In the example below, we are using a computed property to feed the steps prop:

  <Copilot
    :steps="computedSteps"
    :animationDuration="animationDuration"
    :labels="labels"
    :tooltipStyle="tooltipStyle"
    :overlayColor="overlayColor"
    :backgroundColor="backgroundColor"
    :accentColor="accentColor"
    ref="copilot"
  />

There are several other props that can be passed into the Copilot component. They are:

An initialization example of the above options (done in typescript):

private animationDuration: number = 300;
private androidStatusBarVisible: boolean = false;
private labels: object = {
  skip: 'Skip',
  previous: 'Previous',
  next: 'Next',
  finish: 'Finish'
};
private tooltipStyle: object = {
  fontFamily: 'Avenir-Light',
  tooltipFontSize: 14,
  tooltipTextColor: 'black',
  buttonFontSize: 14,
  accentColor: 'green'
}
private overlayColor: string = 'rgba(0, 0, 0, 0.4)';
private numberAccentColor: string = 'green';
private numberBackgroundColor: string = 'white';
private toolTipBackgroundColor: string = 'white';
private toolTipBorderRadius: string = '3';
private highlightPadding: number = 5;
private highlightBorderRadius: number = 10;

There are several events emitted by the Copilot component:

You will call the event from the Copilot component as the name of the chosen event. In the example below, we are calling a function on the event:

  <Copilot
    :steps="computedSteps"
    @step-change="stepChanged"
    @stop="copilotStopped"
    @not-ready="copilotNotReady"
    @start="copilotStarted"
    @highlight-tap="copilotHighlightTap"
    ref="copilot"
  />

To start a tour on a particular page you will need to call the Copilot start function. An example of this is: this.$refs.copilot.start();

Vue Demo project

Take a look at the demo project for a simplistic project that implements this plugin with many of the options discussed above.