@vhquan98/react-native-coachmark NPM

React Native Coachmark

preview

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
renderContent	() => ReactElement	none	pass a custom coachmark content to override the default one