react-native-touchmap

1.0.1 • Public • Published

☝️ react-native-touchmap

Simple, free, and lightweight heatmap component to track touches in your React Native app!

exported exported

Getting Started

  1. Run npm install react-native-touchmap or yarn add react-native-touchmap to add this dependency to your project.
  2. Wrap your app's root component in the <Touchmap> tag.
  3. Export the output however you want!

The <Touchmap> Component

Below is a complete implementation.

/** Reference variable within your component: */
touchmap:Touchmap = null

/** Inside render(): */
<Touchmap
    style={s.yourStyle}
    debug={true}
    sessionOnly={true}
    ref={r => this.touchmap = r}
>
    ...
</Touchmap>
That's it!

Props

Values Description
style {}, [], # Style of the Touchmap container.
debug true/false Display debugging features such as red border, version number, and 'View' and 'Clear' options?
sessionOnly true/false Export touches for only the current session?
ref Touchmap object Reference available functions raw, clear, and export from a property variable.
children nodes Child nodes of the Touchmap. Usually the root component of the app.

Ref Functions

clear:()=>void Clears all touches from every session.

raw:()=>Array<TouchSession> Returns a list of TouchSession objects, if you want to parse touches yourself.

export()=>string Returns an encoded string of the image created. This may be used as a uri in an image component or can be handled as an image.

Type Definitions

/** Multiple touch events constituting a session of having the app running. */
export interface TouchSession {
    /** Unique string identifier of the touch session. */
    id: string;
    /** Start time of this session. */
    startTime: Date;
    /** End time of this session. Optional because crashes might not register an end time. */
    endTime?: Date;
    /** An array of touches during this session. */
    touches: Array<TouchMeta>
    /** Size of the device. */
    deviceSize: DeviceSize;
}

/** Single touch event object. */
export interface TouchMeta {
    /** Coordinates of the touch. */
    coordinates: TouchCoordinates;
    /** Start time of this touch. */
    startTime: Date;
    /** End time of this session. Optional because touches may be canceled. */
    endTime?: Date;
    /** Duration of the touch, in milliseconds. */
    duration?: number;
}

/** Simple coordinates interface. */
export interface TouchCoordinates {
    /** x-coordinate of the touch. */
    x: number;
    /** y-coordinate of the touch. */
    y: number;
}

/** Simple device size interface. */
export interface DeviceSize {
    /** Width of the device, in pixels. */
    width: number;
    /** Height of the device, in pixels. */
    height: number;
}

Contributing

If you'd like to improve and/or expand the content of this library, feel free to submit pull requests. If you experience any issues with this code, please let me know promptly.

Authors

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

  • Vicki Shao for all the support and flames! 🔥

Package Sidebar

Install

npm i react-native-touchmap

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

33.3 kB

Total Files

12

Last publish

Collaborators

  • anthonykrivonos