yarn
yarn add react-native-coachmark
npm
npm i react-native-coachmark --save
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>
);
}
var Coachmark = require('react-native-coachmark').Coachmark; // ES5
import { Coachmark } from 'react-native-coachmark'; // ES6
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 |
Methods | Description |
---|---|
show() => Promise |
a function to trigger show the coachmark |
- Auto load and save in AsyncStorage
- Show coachmark only when in view port
- Custom render arrow and content
We'd to have your helping hand on this package! Feel free to PR's, add issues or give feedback!
Written by Jacky Wijaya (jekiwijaya) at Traveloka.