☝️ react-native-touchmap

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

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>

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

• Anthony Krivonos - Developer - Portfolio

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! 🔥