About this project

react-native-spotlight-tour is a React Native library for creating guided product tours and introductory walkthroughs with a spotlight effect. It is compatible with Android, iOS, and web, and uses Floating UI for positioning tooltip content around highlighted elements. Developers define tour steps as a TourStep array and wrap application content in SpotlightTourProvider. The AttachStep component links UI elements to step indexes, while the useSpotlightTour hook exposes controls such as starting, stopping, moving to the next step, and returning to the previous step. Floating UI middleware, including offset, shift, and flip, can be configured globally for the tour or overridden on individual steps. The library supports customization of overlay color and opacity, spotlight motion such as bounce, fade, and slide, and backdrop press behavior. The built-in TourBox component provides a configurable tooltip container with title, navigation labels, and styling options. Steps can also run an action before rendering and use fully custom render functions. Installation is available through npm or yarn. The documented requirements are React 16.8.0 or newer, React Native 0.50.0 or newer, and react-native-svg 12.1.0 or newer. Version 3 renamed the package from @stackbuilders/react-native-spotlight-tour to react-native-spotlight-tour and replaced the older positioning props with Floating UI configuration. The project is MIT licensed and includes API documentation and an example application.