react-native-guide-mark v1.0.61

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

1. import react-native-guide-mark:

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

1. 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>
    );
};

1. Create a ref with userRef.
2. assign that ref to required View element and add collapsable={false} to it.
3. 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

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