react-native-safe-touch

Prevent rapid multiple taps on Pressable, TouchableOpacity, TouchableHighlight, and Button across your app. No more if (loading) return in every button.

Install from npm:

npm install react-native-safe-touch

Quick start

1. Add the Babel plugin in your app’s babel.config.js (project root):

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['react-native-safe-touch/babel-plugin-react-native-safe-touch'],
};

If you use other plugins (e.g. reanimated), add safe-touch before them and keep reanimated last:

plugins: [
  'react-native-safe-touch/babel-plugin-react-native-safe-touch',
  'react-native-reanimated/plugin',  // must be last
],

2. Call safeTouch() once at app entry (e.g. in App.js or App.tsx):

import { safeTouch } from 'react-native-safe-touch';

safeTouch({ debounce: 600 }); // optional: default 500ms

export default function App() {
  return ( /* ... */ );
}

3. Use touchables as usual. Keep importing from react-native; the plugin rewrites the four touchables to the debounced versions:

import { View, Text, TouchableOpacity } from 'react-native';

<TouchableOpacity onPress={handleSubmit}>
  <Text>Submit</Text>
</TouchableOpacity>

Rapid taps are debounced globally. After any Babel config change, run:

npx react-native start --reset-cache

Without the Babel plugin (direct import)

If the plugin doesn’t run in your setup (e.g. Metro not loading babel.config.js), import the touchables from the package where you need debounce:

import { View, Text, StyleSheet } from 'react-native';
import { TouchableOpacity } from 'react-native-safe-touch';

safeTouch({ debounce: 600 }); // still call once at app entry

Same for Pressable, TouchableHighlight, Button: import them from 'react-native-safe-touch'.

API

safeTouch(options?: {
  /** Minimum ms between allowed presses. Default: 500 */
  debounce?: number;
}): void

Exports: safeTouch, Pressable, TouchableOpacity, TouchableHighlight, Button, and SafePressable, SafeTouchableOpacity, SafeTouchableHighlight, SafeButton.

Requirements

• React Native ≥ 0.60 (Pressable supported from 0.63+)
• React ≥ 16.8

Troubleshooting

• Debounce not working (log on every tap)
  The Babel plugin is not running. Ensure babel.config.js is in the project root. If your package.json has "type": "module", rename the config to babel.config.cjs. Then run npx react-native start --reset-cache. Or use the direct import from react-native-safe-touch.

• Web build
  If you use Webpack for web, pass the full Babel config (presets + plugins) to babel-loader, not only presets and plugins: ['react-native-web'], so the safe-touch plugin runs.

License

MIT