React Native Coachmark

Installation

yarn

yarn add react-native-coachmark

npm

npm i react-native-coachmark --save

Getting Started

Basic Usage

import React from 'react';
import { Coachmark } from 'react-native-coachmark';

export default function AwesomeScreen() {
  return (
    <Page>
      <Header>
        <Coachmark autoShow message="Click here to save your page!">
          <ButtonBookmark>
        </Coachmark>
      </Header>
    </Page>
  );
}

Example

View on Expo!

Documentation

- Coachmark

Importing

var Coachmark = require('react-native-coachmark').Coachmark; // ES5

import { Coachmark } from 'react-native-coachmark'; // ES6

Props

| Property | Type | Default Value | Description | | ------------- | --------------------------------------------------------------------- | ------------- | ----------------------------------------------------------- | | message | string | none | optional | | autoShow | boolean | none | to show the coachmark when mounting | | onShow | function | none | will be called when coachmark is showing | | onHide | function | none | will be called when coachmark is hidden | | isAnchorReady | boolean | true | a value to force coachmark not being shown yet | | renderArrow | (options: { x: number; position: CoachmarkPosition }) => ReactElement | none | pass a custom coachmark arrow to override the default one | | renderContent | (options: { x: number; position: CoachmarkPosition }) => ReactElement | none | pass a custom coachmark content to override the default one |

Methods

| Methods | Description | | ------------------- | ---------------------------------------- | | show() => Promise | a function to trigger show the coachmark |

Roadmap

• [ ] Auto load and save in AsyncStorage
• [x] Show coachmark only when in view port
• [x] Custom render arrow and content

Contributing

We'd to have your helping hand on this package! Feel free to PR's, add issues or give feedback!

Credits

Written by Jacky Wijaya (jekiwijaya) at Traveloka.