npmpackage.info

Gathering detailed insights and metrics for @stackbuilders/react-native-spotlight-tour

@stackbuilders/react-native-spotlight-tour - 2.1.0 | npmpackage.info

@stackbuilders/react-native-spotlight-tour

A highly customizable tour feature with an awesome spotlight effect

2.1.0

410

MIT

TypeScript

89.51 kB

4.2

Installations

npm install @stackbuilders/react-native-spotlight-tour

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

19.6.0

NPM Version

8.19.3 Pull Requests

Open

4

Total

135

Closed

8

Merged

123

Issues

Open

19

Total

57

Closed

38

Releases

v4.0.0

Updated on Jun 23, 2025

v3.0.1

Updated on Sep 22, 2023

v3.0.0

Updated on Sep 22, 2023

v2.1.0

Updated on Feb 14, 2023

v2.0.0

Updated on Nov 10, 2022

v1.0.2

Updated on Jan 10, 2022

View All 8 releases

Languages

TypeScript

JavaScript

Kotlin

Swift

Ruby

HTML

TypeScript (80.67%)

JavaScript (13.08%)

Kotlin (2.33%)

Swift (2%)

Ruby (1.62%)

HTML (0.3%)

Developer

stackbuilders

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

410 Stars

120 Commits

33 Forks

21 Watchers

6 Branches

66 Contributors

Updated on Jul 14, 2025

Maintainers

View All 66 Contributors

Package Meta Information

Latest Version

2.1.0

Package Id

@stackbuilders/react-native-spotlight-tour@2.1.0

Unpacked Size

89.51 kB

Size

21.90 kB

File Count

NPM Version

8.19.3

Node Version

19.6.0

Published on

Feb 14, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

react-native-responsive-dimensions styled-components

Peer Dependencies

react react-native react-native-svg

Dev Dependencies

React Native Spotlight Tour

react-native-spotlight-tour is a simple and intuitive library for React Native (Android, iOS, and Web compatible). It allows you to implement a highly customizable tour feature with an awesome spotlight effect. This library handles animations at the native level and is perfect for the following:

Guiding users on how to use your application
Showing an introduction to your users

spotlight-bounce-gif spotlight-fade-gif spotlight-slide-gif

Requirements

ReactJS >= 16.8.0
React Native >= 0.50.0
react-native-svg >= 12.1.0

Install

With npm:

1$ npm install @stackbuilders/react-native-spotlight-tour

With yarn:

1$ yarn add @stackbuilders/react-native-spotlight-tour

Usage

To be able to use the tour, you'll need to wrap everything around a SpotlightTourProvider. This provider component will also give you access to a hook to retrieve the SpotlightTour context, which gives information and fine control over the tour.

1import { AttachStep, SpotlightTourProvider, TourStep } from "@stackbuilders/react-native-spotlight-tour";
2
3const mySteps: TourStep[] = [
4  // ...
5];
6
7return (
8  <SpotlightTourProvider steps={mySteps} overlayColor={"gray"} overlayOpacity={0.36}>
9    {({ start }) => (
10      <>
11        <Button title="Start" onPress={start} />
12
13        <View>
14          <AttachStep index={0}>
15            <Text>Introduction</Text>
16          </AttachStep>
17
18          <Text>
19            This is an example using the spotlight-tour library.
20            Press the Start button to see it in action.
21          </Text>
22        </View>
23
24        <View>
25          <AttachStep index={1}>
26            <TitleText>Documentation</TitleText>
27          </AttachStep>
28          <DescriptionText>
29            Please, read the documentation before installing.
30          </DescriptionText>
31        </View>
32      </>
33    )};
34  </SpotlightTourProvider>
35);

The tour requires an array of steps to be configured, which will map directly to each <AttachStep /> index. Bellow is a complete example of a TourStep array:

1import {
2  Align,
3  Position,
4  TourStep,
5  useSpotlightTour
6} from "@stackbuilders/react-native-spotlight-tour";
7
8const mySteps: TourStep[] = [{
9  alignTo: Align.SCREEN,
10  position: Position.BOTTOM,
11  render: ({ next }) => (
12    <View>
13      <Text>This is the first step of tour!</Text>
14      <Button title="Next" onPress={next} />
15    </View>
16  )
17}, {
18  alignTo: Align.SPOT,
19  before: () => {
20    return DataService.fetchData()
21      .then(setData);
22  },
23  position: Position.RIGHT,
24  render: () => {
25    // You can also use the hook inside the step component!
26    const { previous, stop } = useSpotlightTour();
27
28    return (
29      <View>
30        <Text>This is the first step of tour!</Text>
31        <Button title="Previous" onPress={previous} />
32        <Button title="Stop" onPress={stop} />
33      </View>
34    );
35  }
36}];

You can also find a complete example here.

API Reference

To view all the types, options, and props, please check the complete API Reference documentation.

License

MIT, see the LICENSE file.

Contributing

Do you want to contribute to this project? Please take a look at our contributing guideline to know how you can help us build it.

Stack Builders
Check out our libraries | Join our team

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

4

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

1

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/stackbuilders/react-native-spotlight-tour/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/stackbuilders/react-native-spotlight-tour/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pages.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/stackbuilders/react-native-spotlight-tour/pages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pages.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/stackbuilders/react-native-spotlight-tour/pages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pages.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/stackbuilders/react-native-spotlight-tour/pages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pages.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/stackbuilders/react-native-spotlight-tour/pages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pages.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/stackbuilders/react-native-spotlight-tour/pages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pages.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/stackbuilders/react-native-spotlight-tour/pages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/stackbuilders/react-native-spotlight-tour/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/stackbuilders/react-native-spotlight-tour/release.yml/main?enable=pin
Info: 0 out of 10 GitHub-owned GitHubAction dependencies pinned

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

Score

4.2

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More