React Native Clicker Hook

A lightweight React Native hook for handling multi-touch clicker functionality with gesture detection.

Features

• 🎯 Multi-touch support
• ⚡ Optimized performance with useCallback and useMemo
• 🎮 Gesture-based interaction
• 📱 React Native Gesture Handler integration
• 🔧 Customizable tap duration and JS execution
• 📊 Touch count tracking

Installation

npm install react-native-clicker-hook

Prerequisites

Make sure you have the following dependencies installed:

npm install react-native-gesture-handler

Usage

Basic Usage

import React from 'react';
import { View, Text } from 'react-native';
import { GestureDetector } from 'react-native-gesture-handler';
import { useClicker } from 'react-native-clicker-hook';

const ClickerComponent = () => {
  const handleTap = (count: number) => {
    console.log(`Tapped with ${count} fingers!`);
    // Your game logic here
  };

  const { tapGesture } = useClicker({ onTap: handleTap });

  return (
    <GestureDetector gesture={tapGesture}>
      <View style={{ width: 200, height: 200, backgroundColor: 'blue' }}>
        <Text style={{ color: 'white', textAlign: 'center' }}>
          Tap me!
        </Text>
      </View>
    </GestureDetector>
  );
};

Advanced Usage

import { useClicker } from 'react-native-clicker-hook';

const AdvancedClicker = () => {
  const { tapGesture, resetCount, currentCount } = useClicker({
    onTap: (count) => {
      // Handle tap with custom logic
      addPoints(count * 10);
    },
    maxDuration: 15, // Custom max duration
    runOnJS: true,   // Run on JS thread
  });

  // Reset count when needed
  const handleReset = () => {
    resetCount();
  };

  return (
    <GestureDetector gesture={tapGesture}>
      <View>
        <Text>Current count: {currentCount}</Text>
        <Text>Tap to earn points!</Text>
      </View>
    </GestureDetector>
  );
};

API Reference

useClicker(options)

Options

| Property | Type | Default | Description | |----------|------|---------|-------------| | onTap | (count: number) => void | Required | Callback function called when tap occurs | | maxDuration | number | 10 | Maximum duration for tap gesture | | runOnJS | boolean | true | Whether to run gesture on JS thread |

Returns

| Property | Type | Description | |----------|------|-------------| | tapGesture | Gesture | Gesture object to pass to GestureDetector | | resetCount | () => void | Function to reset internal touch count | | currentCount | number | Current touch count (read-only) |

Examples

Game Clicker

const GameClicker = () => {
  const [score, setScore] = useState(0);
  
  const { tapGesture } = useClicker({
    onTap: (count) => {
      setScore(prev => prev + (count * 10));
    }
  });

  return (
    <GestureDetector gesture={tapGesture}>
      <View style={styles.clicker}>
        <Text>Score: {score}</Text>
        <Text>Tap with multiple fingers for bonus!</Text>
      </View>
    </GestureDetector>
  );
};

Multiplier System

const MultiplierClicker = () => {
  const [multiplier, setMultiplier] = useState(1);
  
  const { tapGesture } = useClicker({
    onTap: (count) => {
      const bonus = count > 1 ? count * multiplier : 1;
      addPoints(bonus);
    }
  });

  return (
    <GestureDetector gesture={tapGesture}>
      <View>
        <Text>Multiplier: x{multiplier}</Text>
        <Text>Use multiple fingers for bonus!</Text>
      </View>
    </GestureDetector>
  );
};

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

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