React Native Lumen 💡

A high-performance, fully customizable app tour library for React Native, powered by Reanimated 3.

Demo

---

Requirements

Package	Version
react-native	>= 0.70.0
react-native-reanimated	>= 3.0.0
react-native-svg	>= 12.0.0
react-native-gesture-handler	>= 2.0.0

Installation

npm install react-native-lumen react-native-reanimated react-native-svg react-native-gesture-handler react-native-worklets

yarn add react-native-lumen react-native-reanimated react-native-svg react-native-gesture-handler react-native-worklets

Quick Start

import {
  TourProvider,
  TourZone,
  useTour,
  SnappySpringConfig,
} from 'react-native-lumen';

// 1. Wrap your app
export default function App() {
  return (
    <TourProvider
      stepsOrder={['feature-1', 'feature-2']}
      config={{ springConfig: SnappySpringConfig, enableGlow: true }}
    >
      <YourApp />
    </TourProvider>
  );
}

// 2. Highlight elements
<TourZone
  stepKey="feature-1"
  name="My Feature"
  description="This is a cool feature."
  order={1}
>
  <MyButton />
</TourZone>;

// 3. Control the tour
const { start } = useTour();
<Button title="Start Tour" onPress={() => start()} />;

Documentation

Full API reference, guides, and examples are available on the official documentation website.

• Getting Started
• TourProvider
• TourZone
• useTour Hook
• Multi-Screen Tours
• Persistence

Changelog

See CHANGELOG.md for release history.

Contributing

Contributions are welcome! Please read CONTRIBUTING.md before submitting a pull request.

• Report bugs in the Issue Tracker.

License

MIT