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

[jacobp100]

If you attach a screenshot, I can be more certain what the issue is. But I'm guessing it's to do with the flex property

When you write flex: 1 in css-to-react-native, it expands to flex-grow: 1; flex-shrink: 1; flex-basis: 0 to match CSS

The flex property in react-native is kinda legacy, in that it differs from the web standards. But their flex-grow, shrink and basis properties do match the web standards

[Trobyss]

Hi ! I attach a screen

[jacobp100]

I'll need to see both screenshots 😄

Did changing flex not work? Try playing around with that a bit. I'm not totally sure what you're trying to do, so I can't really give pointers here

[Trobyss]

So :

This doesn't work : (text is above but red is behind blue)

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

const Venue: React.FC<{}> = () => (
  <SafeAreaView style={{ flexGrow: 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>
  </SafeAreaView >
);
  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-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    margin: 20px;
  `;

But the exact same code without styled :

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

const Venue: React.FC<{}> = () => (
  <SafeAreaView style={{ flexGrow: 1 }}>
    <View style={{ height: 200, backgroundColor: 'blue', position: "absolute", top: 0, right: 0, left: 0 }} />
    <View style={{ backgroundColor: "red", padding: 20, flexGrow: 1, flexShrink: 1, flexBasis: 0, 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>
  </SafeAreaView >
);

As u can see, it's not related to flex box implementation.
Before 0.61-rc3 this work.

Any idea ?

Trobyss'

[jacobp100]

Thanks for those screenshots. So am I right in thinking the layout is correct, but the order is wrong. Does adding some z-indices fix it?

[Trobyss]

Nothing at all for the background :(

[jacobp100]

Strange. One thing to try is if you put in the styles you're using through css-to-react-native, and copy the output into your demo. Then you'd be able to narrow down whether it's the styles this library generates or something else.

[kristerkari]

@jacobp100

I tried to update the app I'm working on to 0.61.0, and I'm seeing the same thing: the styles are messed up on Android, but not iOS.

I'm using CSS modules instead of styled components.

[kristerkari]

I found this from facebook/react-native#26544

if view has a borderRadius other than undefined, then when switching to another screen, the view with borderRadius is rendered under all other views, even if you specify zIndex. Until you reload, all views on all screens with borderRadius (including the root) will be broken.

Looks like a serious React Native bug

[jacobp100]

Thanks for finding that — @Trobyss could you see if removing the border radius fixes the issue?

[kristerkari]

I created a new 0.61 project and I'm trying to the examples from @Trobyss, but I'm not seeing the bug on Android using those examples.

[marcorm]

I created a new 0.61 project and I'm trying to the examples from @Trobyss, but I'm not seeing the bug on Android using those examples.

@kristerkari i don't know if it helps, but i'm facing strange behaviour only on Android API Level 26
I think also this bug is related:

[kristerkari]

i don't know if it helps, but i'm facing strange behaviour only on Android API Level 26

I tried on two emulators with API 26, but still could not reproduce the bug with the examples from this thread. Maybe someone else could try to do the same thing and see if the bug can be reproduced?

I know that there is something broken with 0.61 because I saw styles being broken on Android in the other project that I updated from 0.60 to 0.61.

[ScreamZ]

Removing border-radius seems to fix the issue for this example 👍 Looks like this is the true problem

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;
`;

[ScreamZ]

react-native-community/releases#146 (comment)

[jacobp100]

I'm going to close this issue, but you're free to continue the discussion here if you wish