Home

Awesome

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={() => {}}
/>
PropDescriptionDefault
coachMarksThis is array contains data of coachmarks(see Properties of each step)None
numberOfStepsnumber of stepsNone
congratsTextThe text is shown in first viewNone
congratsImageThe image is shown in first viewNone
startButtonTextStart button text shown in first viewNone
skipButtonTextSkip button text shown in first viewNone
visibleCoachMarks is shown or hiddenfalse
onCloseaction is called in last stepNone

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,
        },
    }
PropDescriptionDefault
tooltipExplain text show in this stepNone
positionposition of maskNone
tooltipPositionposition of tooltipNone
stylestyle of CoachMarkNone

Demo Project (for iPhone SE)

react-native-coachmarks-example

License

This project is licenced under the MIT License.