⚠️ Background issue with React native 0.61-rc3

[ScreamZ]

Hello

After investigating with @Trobyss we found an issue with styled-components after migrating on 0.61-rc3 to test on ANDROID.

ANDROID ONLY
"react": "16.9.0",
"react-native": "0.61.0-rc.3",
"styled-components": "^4.3.2"

You can freely switch between Bug and BuggingView to see the difference.
The text is correctly displaying above the background in absolute, but not the background of the text container.

Without styled-components, this works.

import React from "react";
import { Text, View } from "react-native";
import styled from "styled-components/native";

const Bug = () => {
  return (
    <View style={{ flex: 1 }}>
      <BuggingView />
      <PageWrapper>
        <Text>
          This should appear above backgroundThis should appear above background This should appear above background This should appear
          above above background This should appear above background This should appear above background This should appear above background
          This This should appear above background This should appear above background This should appear above background This should
          appear above background This should appear above background This should appear above background This should appear above
          background This should appear above background This should appear above background This should appear above background This should
          appear above background This should appear above background This should appear above background This should appear above
          background This should appear above background This should appear above background This should appear above background This should
          appear above background This should appear above background This should appear above background This should appear above
          background This should appear above background
        </Text>
      </PageWrapper>
    </View>
  );
};

const BuggingView = styled.View`
  height: 200;
  position: absolute;
  background-color: blue;
  top: 0;
  right: 0;
  left: 0;
`;
const PageWrapper = styled.View`
  background-color: red;
  padding: 20px; 
  border-radius: 8px;
  flex: 1;
  margin: 20px;
`;

const NotBug = () => (
  <View style={{ flex: 1 }}>
    <View style={{ height: 200, backgroundColor: 'blue', position: "absolute", top: 0, right: 0, left: 0 }} />
    <View style={{ backgroundColor: "red", padding: 20, flex: 1, margin: 20 }}>
      <Text>
        This should appear above backgroundThis should appear above background This should appear above background This should appear above
        above background This should appear above background This should appear above background This should appear above background This
        This should appear above background This should appear above background This should appear above background This should appear above
        background This should appear above background This should appear above background This should appear above background This should
        appear above background This should appear above background This should appear above background This should appear above background
        This should appear above background This should appear above background This should appear above background This should appear above
        background This should appear above background This should appear above background This should appear above background This should
        appear above background This should appear above background This should appear above background This should appear above background
      </Text>
    </View>
  </View>
);

export default Bug;

Any idea what would cause that ? as you can see this works with latest expo version : https://snack.expo.io/@afigueiredo/1fe053

Best regards

[quantizor]

Hmm this is most likely an issue with https://github.com/styled-components/css-to-react-native, I'd recommend closing and reopening your issue there as styled-components itself doesn't do any sort of manipulation.

[ScreamZ]

New issue styled-components/css-to-react-native#117