0.1.0 • Published 1 year ago
react-native-coachmark-tangram v0.1.0
React Native Coachmark
Installation
yarn
yarn add react-native-coachmarknpm
npm i react-native-coachmark --saveGetting 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
Documentation
- Coachmark
Importing
var Coachmark = require('react-native-coachmark').Coachmark; // ES5
import { Coachmark } from 'react-native-coachmark'; // ES6Props
| 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
| Methods | Description |
|---|---|
show() => Promise | a function to trigger show the coachmark |
Roadmap
- Auto load and save in AsyncStorage
- Show coachmark only when in view port
- 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.
0.1.0
1 year ago