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 | | 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

License

This project is licenced under the MIT License.