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 https://github.com/facebook/react-native/pull/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.

[react-native-bot]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[react-native-bot]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[react-native-bot]

This issue was closed because it has been stalled for 7 days with no activity.

[react-native-bot]

This issue was closed because the author hasn't provided the requested feedback after 7 days.