Add sound to Touchables on Android

[jakub-gonet]

Description

Fixes #1146.

Seems like even TouchableWithoutFeedback plays sound in RN implementation, so we will stick to that.

Extracted from changes:

Buttons in RN are wrapped in NativeViewGestureHandler which manages onTouchEvent call after activation of the handler. Problem is, in order to verify that the underlying button implementation is interested in receiving touches we have to call onTouchEvent and check if the button is pressed.
This leads to invoking onTouchEvent twice which isn't idempotent in View - it calls OnClickListener and plays a sound effect if OnClickListener was set.

To mitigate this behavior we use mLastEventTime variable to check that we already handled the event in onInterceptTouchEvent. We assume here that different events will have different event times. We can't use ids of the event objects because they can be recycled and reused.

Test plan

Tested on example code:

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

import {
  TouchableNativeFeedback as GHTouchableNativeFeedback,
  TouchableOpacity as GHTouchableOpacity,
  TouchableWithoutFeedback as GHTouchableWithoutFeedback,
} from 'react-native-gesture-handler';

export default () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        alignContent: 'space-around',
      }}>
      <TouchableOpacity onPress={() => console.log('pressed TouchableOpacity')}>
        <View
          style={{
            width: 200,
            height: 50,
            backgroundColor: 'lightyellow',
          }}>
          <Text>TouchableOpacity</Text>
        </View>
      </TouchableOpacity>
      <TouchableWithoutFeedback
        onPress={() => console.log('pressed TouchableWithoutFeedback')}>
        <View
          style={{
            width: 200,
            height: 50,
            backgroundColor: 'lightyellow',
          }}>
          <Text>TouchableWithoutFeedback</Text>
        </View>
      </TouchableWithoutFeedback>
      <TouchableNativeFeedback
        onPress={() => console.log('pressed TouchableNativeFeedback')}>
        <View
          style={{
            width: 200,
            height: 50,
            backgroundColor: 'lightyellow',
          }}>
          <Text>TouchableNativeFeedback</Text>
        </View>
      </TouchableNativeFeedback>
      <GHTouchableOpacity
        onPress={() => console.log('pressed RNGH TouchableOpacity')}>
        <View
          style={{
            width: 200,
            height: 50,
            backgroundColor: 'lightblue',
          }}>
          <Text>RNGH TouchableOpacity</Text>
        </View>
      </GHTouchableOpacity>
      <GHTouchableWithoutFeedback
        onPress={() => console.log('pressed RNGH TouchableWithoutFeedback')}>
        <View
          style={{
            width: 200,
            height: 50,
            backgroundColor: 'lightblue',
          }}>
          <Text>RNGH TouchableWithoutFeedback</Text>
        </View>
      </GHTouchableWithoutFeedback>
      <GHTouchableNativeFeedback
        onPress={() => console.log('pressed RNGH TouchableNativeFeedback')}>
        <View
          style={{
            width: 200,
            height: 50,
            backgroundColor: 'lightblue',
          }}>
          <Text>RNGH TouchableNativeFeedback</Text>
        </View>
      </GHTouchableNativeFeedback>
    </View>
  );
};

[jkadamczyk]

Looks good to me

[jakub-gonet]

While writing this PR I noticed that even after moving outside of Touchable it still runs onPress and plays a sound, it's something we want to fix in the future.

[jakub-gonet]

The previous implementation used Sound Manager from RN, which was failing detox tests due to turbo module inclusion.

I prepared a new implementation that uses native tap sound triggered by presence of OnClickListener.

This revealed that we call onTouchEvent multiple times on the same event, so we block subsequent calls by comparing the last event's time with the current event time. This is written under the assumption that every event will have a different event time. This approach may have unexpected consequences in the future if this isn't true (e.g. device sends events in batches with the same event time), causing some events to be skipped.

[Guuz]

Using the "presence of OnClickListener" as you linked above sounds like a much better strategy, also for RN itself... might be worth it to suggest it there too!

[jakub-gonet]

For the record: the new implementation fixed tap sound when moving outside of the touchable.