react-native-hotspot
react-native-hotspot
npm i react-native-hotspot
react-native-hotspot

react-native-hotspot

🎯 A React Native component that displays hotspots over desired components to help lead your users through an onboarding flow or direct them towards new UI elements

by lawnstarter

0.0.6 (see all)License:MITTypeScript:Not Found
npm i react-native-hotspot
Readme

react-native-hotspot

npm version

A React Native component that displays hotspots over desired components to help lead your users through an onboarding flow or direct them towards new UI elements

iOS Example Android Example

Examples

Run example

Getting Started

Installing

npm install react-native-hotspot

Using

import { RNHotspot, RNHotspotHelper } from "react-native-hotspot";

// in your screen's constructor, use the helper with an array of onPress actions you want your hotspots to trigger
this.componentRefs = RNHotspotHelper([
    () => {
        Alert.alert(null, "This button does this thing.");
    },
    () => {
        Alert.alert(null, "This button does other thing.");
    }
]);

// drop the component below the outer wrapping parent of your screen
<RNHotspot componentRefs={this.componentRefs} />


// expose the refs in the same order as the array defined above
<Button
    title="Button #1"
    onPress={() => {}}
    ref={this.componentRefs[0].ref}
/>
<Button
    title="Button #2"
    onPress={() => {}}
    ref={this.componentRefs[1].ref}
/>

Testing

This component has been tested on React Native v0.57

License

react-native-hotspot is MIT licensed and built with ❤️ in Austin, TX by the team at LawnStarter

Downloads/wk

14

GitHub Stars

30

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

0

OPEN PRs

9
VersionTagPublished
0.0.6
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate