Artifacts on View with borderRadius on only 2 corners on iOS when the app is "inactive"

[idutka]

Description

When a View has some corners rounded and some not, the corners opposite the rounded ones have a "shadow" effect when the app goes to "inactive" state.

Steps to reproduce

<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
  <View
    style={{
      width: 100,
      height: 100,
      borderColor: "#000",
      borderWidth: 1,
      borderBottomLeftRadius: 30,
      borderTopLeftRadius: 30,
    }}
  />
</View>

Solution

Round all corners

<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
  <View
    style={{
      width: 100,
      height: 100,
      borderColor: "#000",
      borderWidth: 1,
      borderRadius: 2,
      borderBottomLeftRadius: 30,
      borderTopLeftRadius: 30,
    }}
  />
</View>

React Native Version

0.76.9

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info

-

Stacktrace or Logs

-

MANDATORY Reproducer

Screenshots and Videos

[react-native-bot]

Warning

Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

• For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

[react-native-bot]

Warning

Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[cortinico]

When a View has some corners rounded and some not, the corners opposite the rounded ones have a "shadow" effect when the app goes to "inactive" state.

Oh that's curious.

@idutka can you try on 0.79 also?

@joevilches is this something you have context on?

[joevilches]

@cortinico ah we have seen this before, I am not sure we know why its happening. @jorge-cab was looking at this at one point, and so was @zhongwuzw in #50463. We never shipped that PR since we did not have a good understanding of what was going on, and it seemed like there could be a more general fix.