[0.61.0-rc.0] TouchableNativeFeedback.SelectableBackgroundBorderless() is affecting adjacent components

Description:

When using TouchableNativeFeedback with background={TouchableNativeFeedback.SelectableBackgroundBorderless()}

It is breaking components that share the same parent, specifically when elevation and or borderRadius is used.

• Applying border radius will not display inner children background colour
• Setting Elevation will not apply the border radius correctly.
• Fast refresh will display the expected result when updating value, but hard refresh, or release build results in the unexpected behavior again.

React Native version:

System: OS: macOS 10.14.6 CPU: (12) x64 Intel® Core™ i7-8700K CPU @ 3.70GHz Memory: 799.25 MB / 16.00 GB Shell: 5.3 - /bin/zsh Binaries: Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3 Android SDK: API Levels: 23, 25, 26, 27, 28 Build Tools: 26.0.3, 27.0.3, 28.0.3, 29.0.2 System Images: android-26 | Google APIs Intel x86 Atom, android-27 | Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom IDEs: Android Studio: 3.5 AI-191.8026.42.35.5791312 Xcode: 10.3/10G8 - /usr/bin/xcodebuild npmPackages: react: 16.9.0 => 16.9.0 react-native: 0.61.0-rc.0 => 0.61.0-rc.0 npmGlobalPackages: react-native-cli: 2.0.1 react-native-git-upgrade: 0.2.7

Steps To Reproduce

1. init new project with 0.61.0-rc.0
2. Replace app contents with code below

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

function App() {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <TouchableNativeFeedback
          background={TouchableNativeFeedback.SelectableBackgroundBorderless()}>
          <View>
            <View style={[styles.outerCircle, styles.elevation]}>
              <View style={styles.innerCircle} />
            </View>
          </View>
        </TouchableNativeFeedback>
        <TouchableNativeFeedback>
          <View>
            <View style={[styles.outerCircle, styles.elevation]}>
              <View style={styles.innerCircle} />
            </View>
          </View>
        </TouchableNativeFeedback>
        <TouchableNativeFeedback>
          <View>
            <View style={[styles.outerCircle, styles.elevation]}>
              <View style={styles.innerCircle} />
            </View>
          </View>
        </TouchableNativeFeedback>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'gray',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  row: {
    flexDirection: 'row',
    margin: 5,
    backgroundColor: '#fefe',
  },
  outerCircle: {
    marginHorizontal: 5,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
    height: 100,
    width: 100,
    borderRadius: 50,
  },
  elevation: {elevation: 5},
  innerCircle: {
    backgroundColor: 'green',
    height: 80,
    width: 80,
    borderRadius: 40,
  },
});

export default App;

Screen shots below are an extended version of the above code, but the middle circle and right circle are the same components, the left one is the borderless element that effects the adjacent circle.

I can also replicate this bug if the middle and right circles are also different elements (Views or other touchable’s) sometimes both are broken, most of the time the middle one is???

left image is RN 0.60.5, right image is 0.61.0

[mjmasn]

Can confirm on 0.61.1 and I had also came to the same conclusion that using TouchableNativeFeedback.SelectableBackgroundBorderless() is the cause. In our case it seems to be causing the elevation shadows to be displayed on top of the elevated element instead of below.

Was somewhat difficult to debug with Fast Refresh turned on.

Red box is a <TouchableNativeFeedback /> with background={TouchableNativeFeedback.SelectableBackgroundBorderless()}

Orange shape is:

<View
  style={{
    padding: 30,
    alignItems: 'center',
    justifyContent: 'center',
  }}>
  <View
    style={{
      width: 120,
      height: 120,
      borderRadius: 20,
      backgroundColor: '#ff6600',
      elevation: 2,
    }}
  />
</View>

System:
    OS: Linux 4.15 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
    Memory: 3.08 GB / 15.54 GB
    Shell: 4.3.48 - /bin/bash
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 22, 24, 26, 27, 28, 29
      Build Tools: 23.0.1, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3, 28.0.2, 28.0.3, 29.0.0
      System Images: android-22 | Google APIs Intel x86 Atom_64, android-24 | Google APIs ARM 64 v8a, android-24 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom_64, android-24 | Google Play Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64
      Android NDK: 17.1.4828580
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.1 => 0.61.1 
  npmGlobalPackages:
    create-react-native-app: 2.0.2
    react-native-cli: 2.0.1
    react-native-create-library: 3.1.2
    react-native-git-upgrade: 0.2.7

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.