react-native-touch-tracker
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.3 • Public • Published

    About The Project

    For when you need to make "click away" or "click outside" interactions in react native.

    This package contains a provider that publishes all touch events to consuming hooks and has utilities to figure out if a user clicked inside a node. And is written in Typescript.

    Getting Started

    Installation

    npm i react-native-touch-tracker

    or

    yarn add react-native-touch-tracker

    Add the provider

    Place the provider as high as possible in your tree probably in <App />

    import { TouchTrackerProvider } from "react-native-touch-tracker"; 
     
    export default function App(): JSX.Element {
      return (
        <TouchTrackerProvider style={{ flex: 1 }}>
        ...
        </TouchTrackerProvider>
      );
    }

    Since <TouchTrackerProvider /> renders a view you probably need to add some style like flex: 1 to keep it from messing up your style.

    Usage

    Place the hook in a component that needs to be aware of all touches:

    import { useTouchTracker } from "react-native-touch-tracker"; 
    import { Button, GestureResponderEvent } from "react-native";
     
    function TouchAwareComponent() {
      useTouchTracker((evt: GestureResponderEvent) => {
        console.log(evt.target); // gives all nodes user touches
      });
     
      return <Button onPress={() => 0} title="Press it" />;
    }

    Utilities

    You can make use of the utilities to detect if a click was inside or outside

    import { useTouchTracker, isReactFiberComponentType, isNodeDescendantOf } from "react-native-touch-tracker"; 
     
    function TouchAwareComponent() {
      const ref = useRef<Button>(null);
     
      useTouchTracker((evt: GestureResponderEvent) => {
        console.log(evt.target); // gives all nodes user touches
     
        if (
          !isReactFiberComponentType(ref.current) ||
          !isReactFiberComponentType(evt.target)
        ) {
          return; // components should have the correct properties and be casted to ReactNativeFiberHostComponentƒ
        }
     
        if (isNodeDescendantOf(ref.current, evt.target)) {
          console.log("inside");
        } else {
          console.log("outside");
        }
      });
     
      return <Button ref={ref} onPress={() => 0} title="Press it" />;
    }
     

    License

    Distributed under the unlicense License. See LICENSE for more information.

    Install

    npm i react-native-touch-tracker

    DownloadsWeekly Downloads

    95

    Version

    1.2.3

    License

    Unlicense

    Unpacked Size

    12.5 kB

    Total Files

    18

    Last publish

    Collaborators

    • dimitrivliet