Skip to content
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
Branch: master
Clone or download
Latest commit 9832f3a Jan 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src pass props down Jan 6, 2019
.eslintrc.js
.gitignore
.prettierrc.js
LICENSE
README.md Update README.md Jan 22, 2019
package.json pass props down Jan 6, 2019
yarn.lock

README.md

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([
    () => {
        // here you can drop in whatever action(s) you want to occur on tap of the hotspot.
        // you'll also likely want to use local storage here and/or an api call to mark each one as seen.
        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

You can’t perform that action at this time.