Gathering detailed insights and metrics for @shankulkarni/react-native-spotlight-tour
Gathering detailed insights and metrics for @shankulkarni/react-native-spotlight-tour
Installations
npm install @shankulkarni/react-native-spotlight-tourDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.10.0
NPM Version
7.24.0
Releases
Unable to fetch releases
Languages
6
TypeScript
Java
Objective-C
Starlark
Ruby
JavaScript
TypeScript (75.1%)
Java (11.25%)
Objective-C (8.14%)
Starlark (3.47%)
Ruby (1.35%)
JavaScript (0.68%)
Developer
Shankulkarni
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
45 Commits
3 Branches
1 Contributors
Updated on Nov 18, 2021
Maintainers
1
Package Meta Information
Latest Version
0.1.17
Package Id
@shankulkarni/react-native-spotlight-tour@0.1.17
Unpacked Size
48.82 kB
Size
13.90 kB
File Count
35
NPM Version
7.24.0
Node Version
16.10.0
Published on
Jul 05, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
3
Dev Dependencies
20
@testing-library/jest-native@testing-library/react-native@types/jest@types/react-native@types/react-test-renderer@types/styled-components@types/styled-components-react-nativebabel-jestjestreactreact-isreact-nativereact-native-svgreact-test-renderersemantic-releasets-jesttslinttslint-reacttypescripttypescript-styled-plugin
React Native Spotlight Tour
react-native-spotlight-tour is a simple and intuitive library for React Native (Android and iOS
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
Requirements
- react >= 16.8.0
- react-native >= 0.50.0
- react-native-svg >= 12.1.0
Installation
With npm:
1$ npm install @stackbuilders/react-native-spotlight-tour
With yarn:
1$ yarn add @stackbuilders/react-native-spotlight-tour
Basic usage
1import { AttachStep, SpotlightTourProvider, TourStep } from "@stackbuilders/react-native-spotlight-tour"; 2 3const mySteps: TourStep[] = [ 4 ... 5]; 6 7... 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 ...
SpotlightTourProvider
The SpotlightTourProvider allows you to wrap a section of the application to implement
the spotlight tour. In this section, you can define a component that will trigger the tour sequence.
For example, a button with an onPress handler that will allow you to call the provided start()
method to start the tour workflow. To customize and set up this workflow, you should pass a list
of steps to the SpotlightTourProvider.
Check out the tour steps section for more details.
Once the tour starts, an overlay component will be shown to highlight a component from the section.
This library shows an overlay component that darkens other UI elements on the screen so that users
can focus on the children's components of AttachStep.
| Prop | Required? | Default | Description |
|---|---|---|---|
ref | No | N/A | Mutable object for the Tour. Populated through the provider. |
steps | Yes | N/A | Steps for the tour (array of TourStep). |
overlayColor | No | black | Color for the overlay (String, Number or rgbaArray). |
overlayOpacity | No | 0.45 | Opacity of the overlay (Number or String) |
| Method | Description |
|---|---|
start | Begin the tour. |
next | Navigate to the next defined step. |
previous | Navigate to the previous step. |
stop | Finish the tour. |
AttachStep
The AttachStep wraps the components that will be highlighted by the library. It receives the
following properties:
| Prop | Required? | Default | Description |
|---|---|---|---|
index | Yes | N/A | Defines the order for the tour sequence (Number). |
disabled | No | false | Defines if the library should highlight the component or not (Boolean). |
Setting Tour Steps
The TourStep lets you render a component with the information you want to display for each step
in the tour. It has the following properties:
| Prop | Required? | Default | Description |
|---|---|---|---|
alignTo | No | Align.SPOT | Aligns the step component to the Align.SPOT or the Align.SCREEN. |
before | No | Promise.resolve() | If present, it runs an operation before a step starts. The function can return either void, or Promise<void>. |
render | Yes | - | A function component that will be rendered in the step. The props of this component should include the RenderProps. |
position | Yes | - | The position with respect to the spot where the step component will be rendered. Possible values are Position.BOTTOM, Position.LEFT, Position.RIGHT, or Position.TOP |
Render props
These props will be passed to the function component of render in a TourStep object. The props contain the following:
| Prop | Type | Description |
|---|---|---|
current | number | The current step index. Starting from 0. |
isFirst | boolean | True if the current step is the first step. False otherwise. |
isLast | boolean | True if the current step is the last step. False otherwise. |
next | () => void | Calling it will trigger the next step (if any). |
previous | () => void | Calling it will trigger the previous step (if any). |
stop | () => void | Calling it will end the tour. |
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}];
Check out the complete example here.
Contributing
Contributions are always welcome! If you are interested in contributing, please check out our Conduct Code.
To run the library code locally, please consider the following versions:
- nodejs >= 14.7.0
- yarn >= 1.22.4
License
No vulnerabilities found.
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
binaries present in source code
Details
- Warn: binary detected: example/android/gradle/wrapper/gradle-wrapper.jar:1
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
61 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-mph8-6787-r8hw
- Warn: Project is vulnerable to: GHSA-7mhc-prgv-r3q4
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
- Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
- Warn: Project is vulnerable to: GHSA-7f53-fmmv-mfjv
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
- Warn: Project is vulnerable to: GHSA-2h3h-q99f-3fhc
- Warn: Project is vulnerable to: GHSA-gmw6-94gg-2rc2
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
- Warn: Project is vulnerable to: GHSA-hj9c-8jmm-8c52
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-x2pg-mjhr-2m5x
- Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
- Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Score
1.6
/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