React-native: View will lost background color when set borderRadius and height is large enough on Android device

[peixin]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

No

Environment

@mjmasn's environment:

Environment:
  OS: Linux 4.13
  Node: 8.11.0
  Yarn: 1.7.0
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: N/A
  Android Studio: 3.1 AI-173.4670197

Packages: (wanted => installed)
  react: ^16.4.1 => 16.4.1
  react-native: ^0.55.4 => 0.55.4

@beiming's environment:

Environment:
  OS: macOS
  Node: 7.7.1
  npm: 4.1.2

Packages: (wanted => installed)
  react-native: ^0.47.2 => 0.47.2

Target Platform: 
  Android
  Android version: 4.4.4
  Screen resolution: 720 x 1280

Steps to Reproduce

// index.android.js

import React, {Component} from 'react';
import {AppRegistry, View, Text, ScrollView} from 'react-native';

class App extends Component {
    render() {
        return (
            <ScrollView>
                <View style={{
                    // if `borderRadius` > 0 and `height` is large enough like 3000 (2000 is ok on my android device), `backgroundColor` will disappear.
                    borderRadius: 1,
                    height: 3000,
                    backgroundColor: 'red',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}>
                    <Text>Test</Text>
                </View>
            </ScrollView>

        );
    }
}

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

Run react-native run-android on a device, it does not reproduce on an AVD.

Expected Behavior

It will be show a long view, with red background, and scroll view show Test in center.

Actual Behavior

It will be show a long view, but no background color (white, maybe transparent), and scroll view show Test in center.

[mike-niemand]

I have the same proble. Any resolution?

[gregblass]

Also getting this. I'm using simple Material Design card views. 2px border radius and a white background color set to a View element. If the card is long, it drops the background color and the background grey color shows through.

[gregblass]

Also worth noting that this does not happen using Genymotion - only with an actual device (Motorola Moto G).

[gregblass]

Tried updating to the latest Android on my device - this is still happening. I guess I'll be forced to remove the border radius on my Android cards until this is addressed.

If anyone knows of a workaround, please let me know!

[tikkichan4]

I got the same problem.... it is confusing because i have many large height views in my app

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[gregblass]

Hey now!

I'm not sure if this should be marked stale yet.

[gregblass]

Really common use case that I ran into is standard material design guidelines for 'Card' components, with dynamic content. If the content got long...the background color magically disappeared!!

Really gives an engineer credibility after they've pitched react native to a client.

So yeah...I'd review this one before closing it!

[JasonWoof]

I am suffering from this bug too.

I'm going to see if it's possible to simulate a tall box with rounded corners by having a short header view rounded top corners and no bottom border, then a resizing tall middle row with just left/right border, and a short bottom row with rounded bottom corners and no top border.

[JasonWoof]

That didn't work. It won't render the left/top/right borders when I set borderBottomWidth: 0.

[mjmasn]

This should still be open. Anyone want to write a bot to fight all these overeager fb bots and keep issues open? :joy:

[nbaghiro]

This issue is still happening. It is happening for ScrollView in my case.

[Guodadada]

I am suffering from this bug too.

[rkbhochalya]

I'm having this issue as well. I have created an example: https://snack.expo.io/@rkbhochalya/rn-view-background-color-issue. Try changing the numberOfLines. Background color is lost if we set the numberOfLines to 283 or more. However it works well for any number of lines if we remove border radius from the View.

[mjmasn]

@hramos could you please reopen this one? Still an issue in 0.55.4

Environment:
  OS: Linux 4.13
  Node: 8.11.0
  Yarn: 1.7.0
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: N/A
  Android Studio: 3.1 AI-173.4670197

Packages: (wanted => installed)
  react: ^16.4.1 => 16.4.1
  react-native: ^0.55.4 => 0.55.4

[hramos]

@mjmasn can you confirm this is still an issue in 0.56?

[Twishka]

@hramos It most certainly is, although I can only see it appearing on Android emulators and not on iOS emulators.

[rizwanahmed19]

+1

[patrickkempff]

I added borderColor and borderWidth to the following example: https://snack.expo.io/BkIGFyGNX
the borders are rendered, but not how you would expect them to be.
onlayout returns the correct height.

[hushicai]

+1

react-native: 0.48.4

I was just using a View, and there are a lot of sub Views, the height of View is very large, then the View's backgroundColor disappear in android device.

[hramos]

Thanks @hushicai, though we're only interested in repros in 0.56 or newer. 0.56 is the current release as of this writing.

[mjmasn]

Update: This issue exists in Android 4.2 and below (API level 17 and below).

@hramos another super weird one that seems related - seems on Android 4 devices (4.1.2 tested) the background (edit: and the stroke) vanishes if the view is 32px or more _wider_ than the screen width. Our view needs to be 2 * screen width, with top left/right border radius of screen width. Workaround for now is just to remove the rounded edges on Android 4 but it's not ideal.

const styles = StyleSheet.create({
  thing: {
    position: 'absolute',
    backgroundColor: '#000',
  }
});

```jsx
render() {
const {width, height} = Dimensions.get('window');

// Working
return (

height,
width: width + 31,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
}]} />

);
}

```jsx
render() {
  const {width, height} = Dimensions.get('window');

  // Background disappears
  return (
    <View>
      <View style={[styles.thing, {
        height, 
        width: width + 32, 
        borderTopLeftRadius: 10, 
        borderTopRightRadius: 10,
      }]} /> 
    </View>
  );
}

We're on RN 0.56.0 now so I can confirm this is still an issue - will try 0.57.0 once it's officially released.

  React Native Environment Info:
    System:
      OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus)
      CPU: x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
      Memory: 1.00 GB / 15.54 GB
      Shell: 4.3.48 - /bin/bash
    Binaries:
      Node: 8.11.0 - ~/.nvm/versions/node/v8.11.0/bin/node
      Yarn: 1.9.4 - /usr/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        Build Tools: 23.0.1, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3
        API Levels: 16, 19, 22, 23, 26, 27
    IDEs:
      Android Studio: 3.1 AI-173.4670197
    npmPackages:
      react: ^16.4.2 => 16.4.2 
      react-native: 0.56.0 => 0.56.0 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

[davidmarciano]

Same here when rendered a View with borderRadius inside ScrollView

[pribeh]

Assuming you're applying the rounded corners to an entire list, this could be circumvented if the header and footer of a scrollview were positioned above and below the ScrollContentContainerViewClass. Right now applying the style to the contentContainerStyle will often produce the same effect. But if there was a way to render the header and footer outside of the container view and apply separate styling you could make them short enough to apply the rounded corners to them if need be. Either that or add an extra class to the inner list content which does not include the header and footer.

[realchiu]

still having same issue in react native 0.57.4. Anyone found the solution?

[MHasanian]

I have solved it using a trick. I have use a View with border border radius and set overflow hidden.
and then use another view in that with desired background color. for example:
//content on view

[voxspox]

still here in RN 0.57.8

[rohanx96]

Facing the same issue in RN 0.57.5
I have a ListView and the background for the listView itself shows the container background on Android. Works fine for iOS. I removed the borderRadius from my views too but did not work. Also this happens when the ListView has large number of items.
Related #22213

[nol13]

@MHasanian's fix working for me, without the overflow hidden though. With the overflow hidden the inner view was getting covered up if you scrolled down far enough, but seems to be working ok without it. 57.8

[pascaloliv]

Experiencing the same issue with a large height <View> with borderRadius inside a <ScrollView>.
It seems to have a critical height when background color disappears.

Android: 27 device
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0

[kelset]

hey everyone, unless someone can submit a repro that show that the issue is still valid with the latest RN version (0.59-rc3) this issue will be considerate stale.

[nol13]

Seems fixed if running on Android 9.0, still happens on older android.

https://snack.expo.io/rJyhIkj84

Issue is reproducible with same code as the above snack in 0.59.0-rc.3 running on emulators with API 27 or below (Nexus 5X emulator, running Android 8.1 API 27 x86 with Play enabled)

Issues is NOT reproducible running exact same code on emulator with API 28 image (Nexus 5X emulator, running Android 9.0 API 28 x86 with Play enabled)

Same behavior seen in my other emulators, based on the API version they're running.

[kelset]

Thanks @nol13 for the detailed explanation :)

[voxspox]

In my app not only the background color disappears but also the content of the view is cut off. There is a horizontal line and below is no background color and no content.

<ScrollView>
  <View style={{borderRadius: 5}}>
    <Text>very long text...</Text>
    ...
    <Text>very long text...</Text>
  </View>
</ScrollView>

[fartymonk]

Hi, I'm also encountering this in RN60.1. Tested in Android Marshmallow (physical device) and Nougat (emulator) and the bug's still there.

I had to wrap the problematic view (the one with borderRadius and backgroundColor) with another view with opaque backgroundColor set so that the problematic view can be shown correctly in Android. This workaround is fine eonugh for flat opaque colors components, but not for see-through components

[CyxouD]

Reproducable on RN 61.1, Pixel 3, API 23 emulator, but as far as remember could reproduce on physical devices with higher Android also
Edit: reproducible on physical devices

[Brainyoo]

Still a problem in rn 0.61.2 with Samsung Galaxy s7

[cyqui]

Same issue: after upgrading to RN 0.61.2, i am losing the background of many elements.
Downgraded to 0.60: It works.

Update: we are using NativeBase "Content", so it's the same as everyone: "Scrollview" containing childs with a background + radius looses the background. Wrapping everything with two views + overflow hidden is not viable in my opinion as there is too many views concerned.

[CyxouD]

Tried to solve this issue generally with my BaseCard component (https://gist.github.com/CyxouD/42723de50446d85c6b4f0122b0c68c15). Idea is the same as @fartymonk suggested, but tries to solve it for different input props. It worked in all cases throughout my app, in cases where it doesn't work && not needed (because bug doesn't happen) you can disable this behaviour with fixAndroidBehaviour prop. Also you can disable shadow with withoutShadow prop

[256hz]

I used @fartymonk's solution as well, making an AndroidFixWrapper component that's styled only if Platform.OS === 'android'. Since View sizes need to be tailored to the component, I used a styling factory that responds to the type prop for sizing, and added in an unnoticeably transparent background to the inner View (rgba(0, 0, 0, 0.001)). I'm on 0.61.1, full info at the bottom.

Component:

import React, { useMemo } from 'react';
import { View, Platform } from 'react-native';
import stylesFactory from './AndroidFixWrapper.styles';

export default ({
    children,
    type,
}: {
    children: React.ReactChild;
    type?: 'bigIcon' | 'button' | // etc;
}) => {
    const styles = useMemo(() => stylesFactory(type), []);
    return (
        <View style={Platform.OS === 'android' && styles.androidContainer1}>
            <View style={Platform.OS === 'android' && styles.androidContainer2}>
                {children}
            </View>
        </View>
    );
};

styles:

import { StyleSheet, ViewStyle } from 'react-native';

interface WrapperStyle {
    width?: string | number;
    height?: string | number;
}

const containers = type => {
    switch (type) {
        case 'bigIcon': return [
            {
                width: '100%',
                height: 120,
            },
            {
                height: 100,
                width: 120,
            },
        ];
// etc...
export default type => {
    const [ androidContainer1, androidContainer2 ]: WrapperStyle[] = containers(type);
    const center = {
        justifyContent: 'center' as ViewStyle['justifyContent'],
        alignItems: 'center' as ViewStyle['alignItems'],
    };
    const transparentBackground = { backgroundColor: 'rgba(0, 0, 0, 0.001)' };

    return StyleSheet.create({
        androidContainer1: {
            ...androidContainer1,
            ...center,
        },
        androidContainer2: {
            ...androidContainer2,
            ...center,
            ...transparentBackground,
        },
    });
};

In use:

<AndroidFixWrapper type="bigIcon">
    <BigIcon
    // etc...
    />
</AndroidFixWrapper>

react-native info:

System:
    OS: macOS 10.15
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Memory: 94.53 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.11.0 - ~/.nvm/versions/node/v12.11.0/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v12.11.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5977832
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.10.1 => 16.10.1 
    react-native: 0.61.1 => 0.61.1 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Hope this gets figured out soon, but seeing that this thread is two years old and going strong, it's either a really tricky problem or not a priority. Or both.

[marcosalles]

Using an android 8.1.0 emulator and react-native 0.59.8, this issue is still there.
It happens for me using border-radius > 0 and a component with height > ~5940px (5932 is ok, 5960 breaks).

My component also loses its border properties, not only the background color. Since I need the border color and width, @fartymonk's solution is not really applicable. I can think of a few _unholy_ solutions for my case, tho.

[SergiOnGit]

Same with me!

React Native version: 0.61.5

[ishiharas]

Using a physical device (Samsung Galaxy S7) with Android 8.0.0 and it happens for me with using border-radius bigger than 0 and a component height bigger than 2000px. Everything below is okay.

Like @marcosalles mentioned it looses the border-radius and backgroundColor properties.
It also looks like commenting the border-radius out leaves the backgroundColor property like it was.
React Native Version: 0.61.5

[ndbeyer]

I had a similar issue where the background color of components that were wrapped in a ScrollView disappeared (only on android device) when the ScrollView had a minHeight of 100% instead of 100vh.

<View>
  <ScrollView style={{contentContainer: { minHeight: "100%" }}}>
     //...children with disappearing background
  </ScrollView>
</View>

<View>
  <ScrollView style={{contentContainer: { minHeight: "100vh" }}}>
     //...everything fine
  </ScrollView>
</View>



md5-bb4c10670eb8f2217d64325703ee34b3



<View style={{flex: 1}}>
  <ScrollView style={{contentContainer: { minHeight: "100vh" }}}>
     //...children with disappearing background
  </ScrollView>
</View>



md5-0f299a5396eebc63799e1e9ba449bb19



<View style={{minHeight: "100vh"}}>
  <ScrollView style={{contentContainer: { minHeight: "100vh" }}}>
     //...everything fine
  </ScrollView>
</View>

[everfire130]

Same with me!

React Native version: 0.62.0

[ManalLiaquat]

I have also had this issue of backgroundColor problem, I fixed it by just passing the background color to scrollView, and it is happening when height of the content increases.

<ScrollView contentContainerStyle={{ backgroundColor: '#fff' }}>
    <View>large vertical content here</View>
</ScrollView>

[miladnikad]

After 3 years ...

[dagan-arbox]

Same shit different day.

[gostavee]

still an issue

[scrapecoder]

facing same issue v0.62.2

[SubhashisPK]

Still an issue in react-native 0.62.2

[dylancoots-mwi]

Glad to see that after hours of googling, others are having the same issue as well. I set the borderRadius property to 0 and it resolves the issue; however, I wish i could keep my rounded corners >.<

[everfire130]

If you use the react-navigation.
You can

import { enableScreens } from 'react-native-screens';
enableScreens();

It will be fine.
But maybe bring a performance loss

[SyntappZ]

Same still happening lol using expo version 38.0.8, i got this bug testing my app on lg k8 running android 8.1, but also tested on android emulator running android 8.1 but there was no bug on the emulator, this bug is so random lol.

I have solved the problem now with using 2 views and the inner view having the background color along with overflow hidden and the outer view having the border radius and that seems to work good enough for me.

<View style={styles.androidBugFixWrapper}>
     <View style={{ ...styles.main, backgroundColor: mediumColor }}>
        {docs.map((item) => {
            return (
              <RenderDocs
                docs={item.docs}
                title={item.title}
                key={item.title}
                navigation={navigation}
                lightColor={lightColor}
                mainTextColor={mainTextColor}
             />
           );
        })}
    </View>
</View>

styles

 main: {
    paddingHorizontal: 10,
    paddingTop: 20,
    paddingBottom: 10,
  },
  androidBugFixWrapper: {
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    overflow: 'hidden'
  },

[cecodor]

Having this issue with react native version 0.63.2, only on android, iOS is working fine, even the error messages and warnings are changing the background color