react-native-guide-mark

React Native Guide Mark

This React Native module is for guiding the first time user throughout the app.

Installation

yarn: yarn add react-native-guide-mark, npm: npm install react-native-guide-mark

Example

• import react-native-guide-mark:

import { GuideMark } from 'react-native-guide-mark';

• create a guide mark mask:

export const App = () => {
    const [visible, setVisible] = React.useState(true);
    return (
        <GuideMark
            title="Step 1"
            description="This is the first step"
            visible={visible}
            onButtonPress={() => setVisible(false)}
            top={100}
            left={150}
        />
    );
};

Using ref

export const App = () => {
    const buttonRef = useRef(null); //1. creating ref for the pointing element
    const [visible, setvisible] = useState(false);

    return (
        <View>
            <GuideMark
                visible={visible}
                title="Click here"
                description="To see a magic!"
                buttonTitle={'Show me!'}
                onButtonPress={() => {
                    setvisible(false);
                    setvisible2(true);
                    setshowImage(true);
                }}
                pointRef={buttonRef} //3. Passing ref of pointing element to guide mark
            />
            <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                <View style={{ paddingHorizontal: 30 }} ref={buttonRef} collapsable={false}>
                    {/* 2. assign ref to required pointing element */}
                    <Button
                        title="Click Here"
                        onPress={() => {
                            setvisible(true);
                        }}
                    />
                </View>
            </View>
        </View>
    );
};

• Create a ref with userRef.
• assign that ref to required View element and add collapsable={false} to it.
• pass the ref to pointRef prop.

Note: Make sure to add collapsable={false} to the View element, otherwise ref measurement will not be available in Android.

Props

Name	Type	Default	Description
visible	Boolean	false	true:show | false:hide the mask
title	String	null	title of the mask
titleTextStyle	Object	{fontSize: 34, fontWeight: "bold",color: 'white'}	Title text style
description	String	null	Description of mask
descriptionStyle	Object	{fontSize: 14,color: 'white',fontWeight:"100"}	Description text style
buttonTitle	String	null	Title of the button (Built in button will be enabled only if onButtonPress is set with function)
onButtonPress	Function	null	Event on button press
onMarkPress	Function	null	Event on press of marked spot
left	number | String	0	Position from left of the screen, Number: 0 to maximum display width, String: percentage valuefrom 0% to 100%
top	Number | String	0	Position from top of the screen, Number: 0 to maximum display height, String: percentage value from 0% to 100%
markSize	Number	150	size of mark
markImage	Require | Object	require('mark.png')	PNG image with transparent at middle & semi transparent at the edges (matching to mask color), Note: Make sure the image matches with mask, otherwise, square patch will be visible around the mark.
maskBgColor	String	"rgba(0,0,0,0.75)"	Mask color.
buttonElm	React Component	null	Custom button component
pointRef	Ref	null	To pont the mark on required View element, need to pass ref of the elemnt, mark will automatically calculates the measurements.

Tips on using single guide mark

Here are the some cool tips how you can use it in better way to guide users

• When user open your app first time, trigger visible prop with true with componentDidMount ,useEffect or may be by default by keeping state to true.
• You can make use of onButtonPress action to navigate to next screen, do some action or may be set the state of this mark to false & next mark as true. You can make use of onMarkPress action to do similar stuff as well
• Make use of AsyncStorage by setting some status in store not to open the mask next time or you may use custom api call to do the same.

Next up

• Provide ref to element
• Wizard
• Custom hook (if its worthy of doing!)