react-native-tap

Components for detecting different number of Taps and their implementation with common use cases

Usage no npm install needed!

<script type="module">
  import reactNativeTap from 'https://cdn.skypack.dev/react-native-tap';
</script>

README

npm npm GitHub stars

react-native-tap

Simple React Native components to implement custom and interesting multi tap and long press interactions.


Installation

Using yarn:

yarn add react-native-tap

Using npm:

npm i react-native-tap

Dependency: Make sure you have react-native-gesture-handler installed


Usage

Using Bare multi tap component

import {MultiTap} from 'react-native-tap';

Example usage

<MultiTap onSingleTap={() => console.log("Single tap")} onDoubleTap={() => console.log("Double tap)}>
    <View style={styles.box}>
        <Text>Tap Me!</Text>
    </View>
</MultiTap>

Expo Example

Their is expo example present in the example directory for you to try out. Instructions, make sure expo-cli is installed

  1. git clone https://github.com/sarthakpranesh/react-native-tap.git
  2. cd react-native-tap/example
  3. yarn install
  4. expo start and scan the QR code from expo client mobile app

Documentation

MultiTap component

Name Description Default Type
onSingleTap Function called on a single tap on component () => {} Func
onDoubleTap Function called on a double tap on component () => {} Func

Future Components

These components will be provided in future versions |Component Name |Description | |--- |--- | |ReactiveIcon |Will provide basic animated icons using Animated api in React Native. The component will implement both onSingleTap and onDoubleTap functionalities|


Contributions

Feel free to open GitHub issues for feature request, bugs or discussions, and Pull request are always Welcomed!


License

MIT