Package Exports

react-native-step-tutorial
react-native-step-tutorial/index.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-step-tutorial) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

This is a Preview.

✨ 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

npm install react-native-tutorial-overlay

# or

yarn add react-native-tutorial-overlay

🚀 Basic Usage

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

import React from "react";
import { View, Text, TouchableOpacity, StyleSheet, Button } from "react-native";
import { TutorialOverlay, useTutorial } from "react-native-step-tutorial";

const Example = () => {
  const tutLis = [
    {
      description: "This is your profile icon!",
      renderHighlight: (layout) => (
        <TouchableOpacity style={{ ...styles.profileIcm, ...layout }}>
          <Text style={styles.tabTxt}>👤</Text>
        </TouchableOpacity>
      ),
    },
    {
      description: "Check your notifications here!",
      renderHighlight: (layout) => (
        <TouchableOpacity
          style={{
            ...styles.tabCont,
            ...layout,
          }}
        >
          <Text style={styles.tabTxt}>🔔 Notifications</Text>
        </TouchableOpacity>
      ),
    },
    {
      description: "Change your settings here!",
      renderHighlight: (layout) => (
        <TouchableOpacity
          style={{
            ...styles.tabCont,
            ...layout,
          }}
        >
          <Text style={styles.tabTxt}>⚙️ Settings</Text>
        </TouchableOpacity>
      ),
    },
    {
      description: "Send an SMS here!",
      renderHighlight: (layout) => (
        <TouchableOpacity
          style={{
            ...styles.tabCont,
            ...layout,
          }}
        >
          <Text style={styles.tabTxt}>💬 SMS</Text>
        </TouchableOpacity>
      ),
    },

    {
      description: "Open Home!",
      renderHighlight: (layout) => (
        <Text
          style={{ ...styles.tabTxt, ...layout }}
          ref={(ref) => (stepRefs.current[4] = ref)}
        >
          🏠
        </Text>
      ),
    },
    {
      description: "Open Search!",
      renderHighlight: (layout) => (
        <Text
          style={{ ...styles.tabTxt, ...layout }}
          ref={(ref) => (stepRefs.current[4] = ref)}
        >
          🔍
        </Text>
      ),
    },
    {
      description: "Open Camera!",
      renderHighlight: (layout) => (
        <Text
          style={{ ...styles.tabTxt, ...layout }}
          ref={(ref) => (stepRefs.current[4] = ref)}
        >
          📷
        </Text>
      ),
    },
    {
      description: "Open Orders!",
      renderHighlight: (layout) => (
        <Text
          style={{ ...styles.tabTxt, ...layout }}
          ref={(ref) => (stepRefs.current[4] = ref)}
        >
          📦
        </Text>
      ),
    },
  ];

  const {
    stepRefs,
    steps,
    currentStep,
    setCurrentStep,
    visible,
    setVisible,
    handleLayout,
    restartTutorial,
  } = useTutorial(tutLis);

  return (
    <View style={{ ...styles.cont }} onLayout={handleLayout}>
      <View style={{ ...styles.cont, padding: 10 }}>
        <TouchableOpacity
          style={styles.profileIcm}
          ref={(ref) => (stepRefs.current[0] = ref)}
        >
          <Text style={styles.tabTxt}>👤</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.tabCont}
          ref={(ref) => (stepRefs.current[1] = ref)}
        >
          <Text style={styles.tabTxt}>🔔 Notifications</Text>
        </TouchableOpacity>

        <View style={styles.subCont}>
          <TouchableOpacity
            style={styles.tabCont}
            ref={(ref) => (stepRefs.current[2] = ref)}
          >
            <Text style={styles.tabTxt}>⚙️ Settings</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.tabCont}
            ref={(ref) => (stepRefs.current[3] = ref)}
          >
            <Text style={styles.tabTxt}>💬 SMS</Text>
          </TouchableOpacity>
        </View>

        <Button title="Restart Tutorial" onPress={restartTutorial} />
      </View>
      <TouchableOpacity
        style={styles.btmNav}
        //    ref={ref => (stepRefs.current[4] = ref)}
      >
        <Text style={styles.tabTxt} ref={(ref) => (stepRefs.current[4] = ref)}>
          🏠
        </Text>
        <Text style={styles.tabTxt} ref={(ref) => (stepRefs.current[5] = ref)}>
          🔍
        </Text>

        <Text style={styles.tabTxt} ref={(ref) => (stepRefs.current[6] = ref)}>
          📷
        </Text>
        <Text style={styles.tabTxt} ref={(ref) => (stepRefs.current[7] = ref)}>
          📦
        </Text>
      </TouchableOpacity>

      <TutorialOverlay
        steps={steps}
        currentStep={currentStep}
        visible={visible}
        onPrev={() => setCurrentStep((prev) => prev - 1)}
        onNext={() => setCurrentStep((prev) => prev + 1)}
        onDone={() => setVisible(false)}
      />
    </View>
  );
};

export default Example;

const styles = StyleSheet.create({
  btmNav: {
    position: "absolute",
    bottom: 0,
    padding: 10,
    backgroundColor: "#0ad37f",
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-around",
  },
  profileIcm: {
    backgroundColor: "#f0e330",
    padding: 10,
    borderRadius: 100,
    alignItems: "center",
    justifyContent: "center",
    width: 60,
    aspectRatio: 1,
  },
  subCont: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginHorizontal: 5,
  },
  tabTxt: {
    fontSize: 25,
    color: "white",
  },
  cont: {
    flex: 1,
    gap: 10,
  },
  tabCont: {
    backgroundColor: "#d3b50a",
    padding: 20,
    borderRadius: 10,
  },
});

Key Implementation Notes:

useTutorial hook: Manages the tutorial state (steps, current step, visibility)
stepRefs: Array of refs to track components being highlighted
setSteps: Define your tutorial steps with descriptions and highlight components
TutorialOverlay: The component that renders the tutorial interface
Navigation controls: Implement onPrev, onNext, and onDone handlers

🗣️ Feedback & Support

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