Skip to content

Welcome to react-native-coachmark! It helps you easily create Coach Marks to enhance user experience!

Notifications You must be signed in to change notification settings

TranLuongTuanAnh/react-native-coachmarks

Repository files navigation

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.