🧠 React Native Step Tutorial

A lightweight and customizable React Native tutorial/onboarding library that walks users through your app using step-by-step highlights and contextual tooltips. Perfect for onboarding flows, feature introductions, and guiding users through complex UIs.

---

✨ Features

• 🔍 Highlight any component with smooth overlays

• 🧩 Customizable steps with layout-aware rendering

• ⏭️ Next, Previous, and Done controls

• 🔄 Restart Tutorial Anytime with a single function call

• 💡 Simple API using React Hooks

• 📱 Built with react-native — no native modules required

---

📦 Installation

1
2npm install react-native-tutorial-overlay
3
4# or
5
6yarn add react-native-tutorial-overlay
7

---

🚀 Basic Usage

Here's a complete example showing how to implement the tutorial overlay:

1import React from "react";
2import { View, Text, TouchableOpacity, StyleSheet, Button } from "react-native";
3import { TutorialOverlay, useTutorial } from "react-native-step-tutorial";
4
5const Example = () => {
6  const tutLis = [
7    {
8      description: "This is your profile icon!",
9      renderHighlight: (layout) => (
10        <TouchableOpacity style={{ ...styles.profileIcm, ...layout }}>
11          <Text style={styles.tabTxt}>👤</Text>
12        </TouchableOpacity>
13      ),
14    },
15    {
16      description: "Check your notifications here!",
17      renderHighlight: (layout) => (
18        <TouchableOpacity
19          style={{
20            ...styles.tabCont,
21            ...layout,
22          }}
23        >
24          <Text style={styles.tabTxt}>🔔 Notifications</Text>
25        </TouchableOpacity>
26      ),
27    },
28    {
29      description: "Change your settings here!",
30      renderHighlight: (layout) => (
31        <TouchableOpacity
32          style={{
33            ...styles.tabCont,
34            ...layout,
35          }}
36        >
37          <Text style={styles.tabTxt}>⚙️ Settings</Text>
38        </TouchableOpacity>
39      ),
40    },
41    {
42      description: "Send an SMS here!",
43      renderHighlight: (layout) => (
44        <TouchableOpacity
45          style={{
46            ...styles.tabCont,
47            ...layout,
48          }}
49        >
50          <Text style={styles.tabTxt}>💬 SMS</Text>
51        </TouchableOpacity>
52      ),
53    },
54
55    {
56      description: "Open Home!",
57      renderHighlight: (layout) => (
58        <Text
59          style={{ ...styles.tabTxt, ...layout }}
60          ref={(ref) => (stepRefs.current[4] = ref)}
61        >
62          🏠
63        </Text>
64      ),
65    },
66    {
67      description: "Open Search!",
68      renderHighlight: (layout) => (
69        <Text
70          style={{ ...styles.tabTxt, ...layout }}
71          ref={(ref) => (stepRefs.current[4] = ref)}
72        >
73          🔍
74        </Text>
75      ),
76    },
77    {
78      description: "Open Camera!",
79      renderHighlight: (layout) => (
80        <Text
81          style={{ ...styles.tabTxt, ...layout }}
82          ref={(ref) => (stepRefs.current[4] = ref)}
83        >
84          📷
85        </Text>
86      ),
87    },
88    {
89      description: "Open Orders!",
90      renderHighlight: (layout) => (
91        <Text
92          style={{ ...styles.tabTxt, ...layout }}
93          ref={(ref) => (stepRefs.current[4] = ref)}
94        >
95          📦
96        </Text>
97      ),
98    },
99  ];
100
101  const {
102    stepRefs,
103    steps,
104    currentStep,
105    setCurrentStep,
106    visible,
107    setVisible,
108    handleLayout,
109    restartTutorial,
110  } = useTutorial(tutLis);
111
112  return (
113    <View style={{ ...styles.cont }} onLayout={handleLayout}>
114      <View style={{ ...styles.cont, padding: 10 }}>
115        <TouchableOpacity
116          style={styles.profileIcm}
117          ref={(ref) => (stepRefs.current[0] = ref)}
118        >
119          <Text style={styles.tabTxt}>👤</Text>
120        </TouchableOpacity>
121
122        <TouchableOpacity
123          style={styles.tabCont}
124          ref={(ref) => (stepRefs.current[1] = ref)}
125        >
126          <Text style={styles.tabTxt}>🔔 Notifications</Text>
127        </TouchableOpacity>
128
129        <View style={styles.subCont}>
130          <TouchableOpacity
131            style={styles.tabCont}
132            ref={(ref) => (stepRefs.current[2] = ref)}
133          >
134            <Text style={styles.tabTxt}>⚙️ Settings</Text>
135          </TouchableOpacity>
136          <TouchableOpacity
137            style={styles.tabCont}
138            ref={(ref) => (stepRefs.current[3] = ref)}
139          >
140            <Text style={styles.tabTxt}>💬 SMS</Text>
141          </TouchableOpacity>
142        </View>
143
144        <Button title="Restart Tutorial" onPress={restartTutorial} />
145      </View>
146      <TouchableOpacity
147        style={styles.btmNav}
148        //    ref={ref => (stepRefs.current[4] = ref)}
149      >
150        <Text style={styles.tabTxt} ref={(ref) => (stepRefs.current[4] = ref)}>
151          🏠
152        </Text>
153        <Text style={styles.tabTxt} ref={(ref) => (stepRefs.current[5] = ref)}>
154          🔍
155        </Text>
156
157        <Text style={styles.tabTxt} ref={(ref) => (stepRefs.current[6] = ref)}>
158          📷
159        </Text>
160        <Text style={styles.tabTxt} ref={(ref) => (stepRefs.current[7] = ref)}>
161          📦
162        </Text>
163      </TouchableOpacity>
164
165      <TutorialOverlay
166        steps={steps}
167        currentStep={currentStep}
168        visible={visible}
169        onPrev={() => setCurrentStep((prev) => prev - 1)}
170        onNext={() => setCurrentStep((prev) => prev + 1)}
171        onDone={() => setVisible(false)}
172      />
173    </View>
174  );
175};
176
177export default Example;
178
179const styles = StyleSheet.create({
180  btmNav: {
181    position: "absolute",
182    bottom: 0,
183    padding: 10,
184    backgroundColor: "#0ad37f",
185    width: "100%",
186    flexDirection: "row",
187    justifyContent: "space-around",
188  },
189  profileIcm: {
190    backgroundColor: "#f0e330",
191    padding: 10,
192    borderRadius: 100,
193    alignItems: "center",
194    justifyContent: "center",
195    width: 60,
196    aspectRatio: 1,
197  },
198  subCont: {
199    flexDirection: "row",
200    justifyContent: "space-between",
201    marginHorizontal: 5,
202  },
203  tabTxt: {
204    fontSize: 25,
205    color: "white",
206  },
207  cont: {
208    flex: 1,
209    gap: 10,
210  },
211  tabCont: {
212    backgroundColor: "#d3b50a",
213    padding: 20,
214    borderRadius: 10,
215  },
216});

Key Implementation Notes:

1. useTutorial hook: Manages the tutorial state (steps, current step, visibility)

2. stepRefs: Array of refs to track components being highlighted

3. setSteps: Define your tutorial steps with descriptions and highlight components

4. TutorialOverlay: The component that renders the tutorial interface

5. Navigation controls: Implement onPrev, onNext, and onDone handlers

🗣️ Feedback & Support

Found a bug or have a feature request? Please open an issue on GitHub.