[Android] position: absolute shouldn't be cut off within a container with border

Description

If you have an element position: absolute with negative offset within a container with a border, it’s going to be cut off, it’s like overflow: hidden of the container is suddenly enabled by the border. But if you remove the border of the container, it works well. This issue only happens on Android.

#3198 is a similar issue, and was reported with lots of discussions. However, I believe they are not exactly the same.

Reproduction

I’ve made an example on rnplay to reproduce the issue.

Solution

TBD

Additional Information

• React Native version: 0.33 (rnplay), 0.39 (the version I currently use)
• Platform: Android
• Operating System: MacOS

[designorant]

Workaround

Use an extra container and fake the overflow with it: https://snack.expo.io/@designorant/overflow-visible-android-workaround

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";

export default class App extends Component {
  render() {
    return (
      <View style={styles.mainContainer}>

        <View style={styles.componentContainer}>
          <View style={[styles.element, styles.element1]} />
          <Text style={styles.text}>overflow: "visible"</Text>
        </View>

        <View style={styles.extraComponentContainer}>
          <View style={[styles.element, styles.element2]} />
          <View style={styles.componentContainer}>
            <Text style={styles.text}>extra container workaround</Text>
          </View>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "space-around"
  },
  componentContainer: {
    backgroundColor: "#d3d3d3",
    borderWidth: 1,
    borderColor: "grey",
    width: 200,
    height: 200,
    position: "relative",
    overflow: "visible" // doesn't do anything
  },
  extraComponentContainer: {
    // fakes overflow but requires more markup
    backgroundColor: "#ffff00",
    paddingTop: 20,
    paddingLeft: 20,
    paddingBottom: 20,
    paddingRight: 20,
    position: "relative"
  },
  element: {
    backgroundColor: "#ff0000",
    width: 40,
    height: 40
  },
  element1: {
    position: "absolute",
    top: -20,
    left: -20
  },
  element2: {
    position: "absolute",
    top: 0,
    left: 0,
    zIndex: 100,
    elevation: 100
  },
  text: {
    textAlign: "right",
    backgroundColor: "transparent"
  }
});

[scottwio]

Still an issue 😭