Show Touches in React Native
By: Michael Kiley
Tags: React, Android, React Native, iOS, React Native Development

Show Touches in React Native

When it’s time to show off the app you’ve worked hard to build, it’s important that your demo materials are as clear and polished as possible. That’s where touch indicators come in, allowing users to easily follow app interactions in screen recordings like this one:

Screen recording with touch indicators (using react-native-show-touches-ios)

You have a variety of options for adding this functionality to your React Native app, from customizable libraries to device settings. Let’s walk through each approach and how to implement them!

Option 1: react-native-show-touches-ios

Fully customizable but limited to iOS devices and simulators

This npm package allows you to show customizable touch indicators on real iOS devices and the iOS simulator. In order to use it, you first need to install the package using yarn add react-native-show-touches-ios or npm install react-native-show-touches-ios --save and run a pod install in your iOS directory. After installation, you will have access to a <ShowTouches> component which you can import and use to wrap your root component:

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



// Wrap your root component to show default touch indicators

const App = () => {

return (

<ShowTouches>

<SafeAreaView style={styles.container}>

{/* Your app... */}

</SafeAreaView>

</ShowTouches>

);

};

Out of the box, this will show the following blue touch indicators for all touches on iOS devices while your UI continues to function as expected:

Default indicators used by react-native-show-touches-ios

You can also customize the color, opacity, size, and animation of the indicators using the following props on the <ShowTouches> component:

<ShowTouches> props

Customized using color=”red”, borderColor=”orange” and radius={20}

It’s important to note that when using react-native-show-touches-ios in an app that uses react-navigation, you must follow react-navigation’s instructions regarding using react-native-gesture-handler in order for your UI to continue functioning as expected. You can wrap your root component in a <ShowTouches> component just as always; if it seems that your buttons are no longer able to receive touches in an app using react-navigation once you use <ShowTouches> , the most common culprit is a failure to use react-native-gesture-handler properly.

You can find full instructions for react-native-show-touches-ios in the package documentation here.

This package provides a flexible and easy-to-use solution for the problem of showing touches in demos; its limitation, however is that it only shows touch indicators on iOS devices. Next, we will take a look at your other options for showing these indicators, including one that will cover the Android use case.

Full disclosure: I wrote react-native-show-touches-ios, so feel free to give a clap if it was useful to you, or leave a comment if you have any problems!

Option 2: iOS Simulator Setting

Allows you to show touches on the iOS simulator without an external dependency; but only works on iOS simulator and not customizable

You can show touch indicators in the iOS simulator by opening Terminal and running defaults write com.apple.iphonesimulator ShowSingleTouches 1 .

Once you have run this command, restarting your simulator and running your app will give you the touch indicators shown below:

Indicators shown using iOS simulator

You can turn this setting off again by running defaults write com.apple.iphonesimulator ShowSingleTouches 0 from Terminal and restarting your simulator.

This approach is nice since it doesn’t involve a code change or an external dependency, but is pretty limited since it only runs on the simulator and is not customizable.

Option 3: Android device setting

Shows touch indicators on Android devices and emulators without an external dependency, but doesn’t cover iOS use case and not customizable

Android provides developers with a device setting that allows them to show touch indicators on Android emulators and real devices. In order to turn it on, you must first activate developer mode. To activate developer mode, open Settings on your Android device or emulator and scroll down to About Phone; for me, this was all the way at the bottom of the list. In About Phone, once again scroll to the bottom — you should see a Build Number section there. Tapping on this build number repeatedly (7+) times will activate developer mode for your device; you will see an alert once you have successfully activated it.

Once developer mode is enabled, you will have a new section on the main settings page called Developer Options. Developer options contains a variety of settings to control and customize your developer experience, grouped by category; within the Input category, you will find a switch to toggle on Show Taps:

Turning on Show Taps for Android devices

Enabling this setting will cause all touches to be displayed with the small gray indicators shown here:

Touch indicators shown on Android

If you have any trouble finding the specific settings you need on your phone or emulator, I find it easiest to use the settings search bar — first I search for Build Number to turn on developer mode, and then I search for Show Taps to find the specific setting toggle.