React-native: [Android] Elevation + TouchableOpacity visual bug

[cmcewen]

Wrapping a view with elevation in a TouchableOpacity doesn't render properly

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  TouchableOpacity,
  View
} from 'react-native';

class elevation extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity>
          <View style={styles.button} elevation={10} />
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  button: {
    height: 200,
    width: 200,
    borderRadius: 100,
    backgroundColor: 'green',
  }
});

AppRegistry.registerComponent('elevation', () => elevation);

[charpeni]

@facebook-github-bot label Android

[phones24]

Having the same issue. TouchableOpacity (some other components too) have clipped the elevation. Try adding the elevation to outer container.

This is especially annoying with elevated elements inside scrollview.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/android-elevation-touchableopacity-visual-bug

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless
Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.