`TouchableOpacity` on Android with `elevation` and `rgba` background causes clipping/octagons

[zibs]

Description

Android's TouchableOpacity has weird clipping/octagons when it's used with elevation and an alpha channel background color i.e rgba(hex, hex, hex, 0.5). This is reproducible both in an expo snack, and with a new react-native init using 0.65 etc.

It seems like this issue is partially covered by #26544 - but it's been open for a few years and has diverged perhaps from the original issue. I've posted a follow up comment there: https://github.com/facebook/react-native/issues/26544#issuecomment-904910695

iOS is fine:

Android is not:

React Native version:

System:
    OS: macOS 11.5.2
    CPU: (8) arm64 Apple M1
    Memory: 88.67 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v15.14.0/bin/yarn
    npm: 7.7.6 - ~/.nvm/versions/node/v15.14.0/bin/npm
    Watchman: 2021.08.02.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.10.2 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 29, 30
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3
      System Images: android-30 | Google APIs Intel x86 Atom, android-S | Google Play ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.65.1 => 0.65.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Create blank project (either Expo snack/new 0.65 npx react-native init)
2. Create a TouchableOpacity component and give it some elevation and an rgba background color
3. Witness clipping/octagons

Expected Results

I'd hope that we could have the same behaviour iOS has?

Snack, code example, screenshot, or link to a repository:

Here's a Snack Here's a mvce using 0.65

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[nfaycel]

I have the same problem in Android 11

[akbarnurullaev]

Still facing this issue

[andrecrimb]

Any update about this one ?

[kkkasio]

I have same problem when use shadows in my buttons, only android

[lufercampos]

same here, only Android. I am trying to use elevation in a view inside the TouchableOpacity: ${st.ifProp( 'shadow', elevation: 2; shadow-color: #000000; shadow-offset: 0px 4px; shadow-opacity: 0.16; shadow-radius: 8px;, null )}

[mleister97]

Still facing this issue...

[betheunique]

This issue only occurs on Android

Yes, can reproduce this issue. Using shadow, elevation and associated shadow styles in a view inside TouchableOpacity results in clipping/cutouts/borders/whatever you can name.

The solution is to remove shadow and associated shadow styles from the view and add these styles to the main TouchableOpacity container.

*For reference only

Before:

 <TouchableOpacity style={{ flex: 1 }}>
  <View 
    style={{ 
      shadowColor: "grey",
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.1,
      elevation: 4,
      borderWidth: 1,
      borderRadius: 30
      width: 60, 
      height: 60 
    }}
  >
  <Text>Some text</Text>
  </View>
  <Ionicons 
    name="circle" 
    size={30} 
    style={{  
      position: "absolute",
      alignSelf: 'center',
      paddingTop: 20,
    }}
  />
</TouchableOpacity>

After:

 <TouchableOpacity 
   style={{ 
     flex: 1,
     shadowColor: "grey",
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.1,
     elevation: 4,
   }}
>
  <View 
    style={{ 
      borderWidth: 1,
      borderRadius: 30
      width: 60, 
      height: 60 
    }}
  >
  <Text>Some text</Text>
  </View>
  <Ionicons 
    name="circle" 
    size={30} 
    style={{  
      position: "absolute",
      alignSelf: 'center',
      paddingTop: 20,
    }}
  />
</TouchableOpacity>