Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/TranLuongTuanAnh/react-native-coachmarks
Welcome to react-native-coachmark! It helps you easily create Coach Marks to enhance user experience!
https://github.com/TranLuongTuanAnh/react-native-coachmarks
react-native-coachmarks react-native-instructional-overlays react-native-show-case-lib
Last synced: about 1 month ago
JSON representation
Welcome to react-native-coachmark! It helps you easily create Coach Marks to enhance user experience!
- Host: GitHub
- URL: https://github.com/TranLuongTuanAnh/react-native-coachmarks
- Owner: TranLuongTuanAnh
- Created: 2018-02-23T01:28:25.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T22:29:39.000Z (over 1 year ago)
- Last Synced: 2024-04-18T13:49:23.946Z (about 2 months ago)
- Topics: react-native-coachmarks, react-native-instructional-overlays, react-native-show-case-lib
- Language: JavaScript
- Homepage:
- Size: 6.03 MB
- Stars: 32
- Watchers: 2
- Forks: 12
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Lists
- awesome-react-native - react-native-coachmasks ★10 - react-native-coachmark! It helps you easily create Coach Marks to enhance user experience! (Components / UI)
README
# react-native-coachmarks
Welcome to react-native-coachmarks! It helps you easily create Coach Marks to enhance user experience!
## DEMO
# Installation
`npm i react-native-coachmarks --save`
# How to use
```
const CM = [];
CM.push(
{
tooltip: 'The first steps of your tutorial',
position: {
top:35,
left: width - 58,
},
tooltipPosition: {
width: 300,
height: 120,
top: 110,
left: (width - 300) / 2,
},
style: {
width: 50,
height: 50,
borderRadius: 30,
},
},
{
tooltip: 'The second steps of your tutorial',
position: {
top:height - 70,
left: width - 91,
},
tooltipPosition: {
width: 300,
height: 120,
top: height - 210,
left: (width - 300) / 2,
},
style: {
width: 70,
height: 70,
borderRadius: 35,
},
},
{
tooltip: 'The last steps of your tutorial',
position: {
top:height - 75,
left: width - 305,
},
tooltipPosition: {
width: 300,
height: 120,
top: height - 210,
left: (width - 300) / 2,
},
style: {
width: 80,
height: 80,
borderRadius: 40,
},
},
);
{}}
/>
```
# Properties
```
{}}
/>
```
| Prop | Description |Default |
| ------------- | ------------- | ------------- |
| **coachMarks** | This is array contains data of coachmarks(see [Properties of each step](https://github.com/TranLuongTuanAnh/react-native-coachmarks/blob/master/README.md#properties-of-each-step)) |None |
| **numberOfSteps** | number of steps | None |
| **congratsText** | The text is shown in first view | None |
| **congratsImage** | The image is shown in first view | None |
| **startButtonText** | Start button text shown in first view | None |
| **skipButtonText** | Skip button text shown in first view | None |
| **visible** | CoachMarks is shown or hidden | false |
| **onClose** | action is called in last step | None |
## Properties of each step
```
{
tooltip: 'The first steps of your tutorial',
position: {
top:35,
left: width - 58,
},
tooltipPosition: {
width: 300,
height: 120,
top: 110,
left: (width - 300) / 2,
},
style: {
width: 50,
height: 50,
borderRadius: 30,
},
}
```
| Prop | Description |Default |
| ------------- | ------------- | ------------- |
| **tooltip** | Explain text show in this step |None |
| **position** | position of mask |None |
| **tooltipPosition** | position of tooltip |None |
| **style** | style of CoachMark |None |
# Demo Project (for iPhone SE)
[react-native-coachmarks-example](https://github.com/TranLuongTuanAnh/react-native-coachmarks/blob/master/Example/DemoCoachMark)
# License
This project is licenced under the [MIT License.](https://opensource.org/licenses/mit-license.html)