Skip to content
Welcome to react-native-coachmark! It helps you easily create Coach Marks to enhance user experience!
Branch: master
Clone or download
TranLuongTuanAnh Merge pull request #1 from dlahish/master
add skipCongrats prop to coachmarks
Latest commit 5337535 Aug 24, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Example/DemoCoachMark update Example Apr 27, 2018
__tests__
source add skipCongrats prop to coachmarks Aug 15, 2018
.babelrc
.buckconfig
.flowconfig init commit Feb 23, 2018
.gitattributes init commit Feb 23, 2018
.gitignore
.watchmanconfig
README.md
app.json init commit Feb 23, 2018
coachmarkSimulation.gif
coachmarkSimulation.mp4
index.js
mask.png
package-lock.json
package.json

README.md

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,
       },
     },
   );
   
  
   <CoachMarks
     numberOfSteps={CM.length}
     coachMarks={CM}
     congratsText={"Welcome to react-native-coachmark!\n"+"It helps you easily create Coach Marks to enhance user experience"}
     congratsImage={require('./ic_public.png')}
     visible={true}
     onClose={() => {}}
   />
  

Properties

<CoachMarks
      numberOfSteps={CM.length}
      coachMarks={CM}
      congratsText={"Welcome to react-native-coachmark!\n"+"It helps you easily create Coach Marks to enhance user experience"}
      congratsImage={require('./ic_public.png')}
      visible={true}
      onClose={() => {}}
/>
Prop Description Default
coachMarks This is array contains data of coachmarks(see 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
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

License

This project is licenced under the MIT License.

You can’t perform that action at this time.