react-native-show-touches-ios

Use react-native-show-touches to show customizable touch indicators for any touches recieved on iOS.
App UI components will continue to function as expected.

Has no effect on Android.

Getting started

1. Install with package manager

$ yarn add react-native-show-touches-ios

or

$ npm install react-native-show-touches-ios --save

2. Install CocoaPod

cd ios && pod install

Usage

Basic touch indicators

import ShowTouches from "react-native-show-touches-ios";

// Wrap your root component to show default touch indicator for all touches
const App = () => {
  return (
    <ShowTouches>
      <SafeAreaView style={styles.container}>{/* Your app... */}</SafeAreaView>
    </ShowTouches>
  );
};

Customization

import ShowTouches from "react-native-show-touches-ios";

const App = () => {
  return (
    <ShowTouches
      color="red"
      opacity={0.1}
      radius={100}
      borderColor="orange"
      borderOpacity={0.9}
      borderWidth={5}
      fadeDuration={1}
    >
      <SafeAreaView style={styles.container}>{/* Your app... */}</SafeAreaView>
    </ShowTouches>
  );
};

***Usage with react-navigation

When using with an app that uses react-navigation, you can wrap your root component with <ShowTouches> just as you normally would.
In order for your underlying UI components to work, you must use react-native-gesture-handler as described in the react-navigation docs.

Proper usage with react-native-gesture-handler:

import ShowTouches from 'react-native-show-touches-ios';
import {TouchableOpacity} from 'react-native-gesture-handler

const App = () => {
  return (
    <ShowTouches
      color="red"
      opacity={0.1}
      radius={100}
      borderColor="orange"
      borderOpacity={0.9}
      borderWidth={5}
      fadeDuration={1}>
        ... REACT-NAVIGATION-CONTAINER ...
            <TouchableOpacity
              onPress={() => {
                console.log('pressed');
              }}>
              <Text>Press Me</Text>
            </TouchableOpacity>
        ... REACT-NAVIGATION-CONTAINER END ...
    </ShowTouches>
  );
};

Incorrect usage with react-native-gesture-handler:

TouchableOpacity from react-native will not work when using react-navigation - must use the component provided by react-native-gesture handler when using react-navigation

import ShowTouches from "react-native-show-touches-ios";
import { TouchableOpacity } from "react-native";

const App = () => {
  return (
    <ShowTouches
      color="red"
      opacity={0.1}
      radius={100}
      borderColor="orange"
      borderOpacity={0.9}
      borderWidth={5}
      fadeDuration={1}
    >
      ... REACT-NAVIGATION-CONTAINER ...
      <TouchableOpacity
        onPress={() => {
          console.log("pressed");
        }}
      >
        <Text>Press Me</Text>
      </TouchableOpacity>
      ... REACT-NAVIGATION-CONTAINER END ...
    </ShowTouches>
  );
};

Props

Name	Description	Type	Default Value
color	the inner color of the touch indicator	String	'#007bff' (UIColor.systemBlue)
opacity	the inner opacity of the touch indicator	Number	0.5
radius	the radius of the touch indicator	Number	40
borderColor	the border color	String	'#007bff' (UIColor.systemBlue)
borderOpacity	the opacity of the border	Number	1
borderWidth	the width of the border	Number	2
fadeDuration	the duration of the touch indicator's fade out animation in seconds	Number	0.3

Todo

• [x] iOS support
• [ ] Android support
• [ ] More animation customization options

Author

Michael Kiley

License

MIT