Android: Setting top border radius breakes visibility of side borders

[ar-clue]

Description

Left or right border visibility is broken when accordingly borderTopLeftRadius or borderTopRightRadius style property is applied.

Tested on fresh React Native 0.71.0 project with Pixel 3XL emulator and Redmi Note 7 real device.

React Native Version

0.71.0

Output of npx react-native info

System:
OS: macOS 12.0.1
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Memory: 80.16 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 19.7.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 9.5.0 - /usr/local/bin/npm
Watchman: 2023.02.20.00 - /usr/local/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
Android SDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9514443
Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
Languages:
Java: 11.0.18 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.0 => 0.71.0
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

1. Start fresh React Native project version 0.71.0 and apply styles from code example

Snack, code example, screenshot, or link to a repository

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {Colors, Header} from 'react-native/Libraries/NewAppScreen';

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({children, title}: SectionProps): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Top border radius bug" />
          <View style={styles.bordersContainer}>
            <View style={styles.blackTopBorder} />
            <View style={styles.redTopBorder} />
          </View>
          <Section title="Working bottom borders radius" />
          <View style={styles.bordersContainer}>
            <View style={styles.blackBottomBorder} />
            <View style={styles.redBottomBorder} />
          </View>
          <View />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
  redTopBorder: {
    width: 50,
    height: 50,
    borderColor: 'red',
    borderTopWidth: 4,
    borderRightWidth: 4,
    borderTopRightRadius: 10,
    margin: 10,
  },
  blackTopBorder: {
    width: 50,
    height: 50,
    borderColor: 'black',
    borderTopWidth: 4,
    borderLeftWidth: 4,
    borderTopLeftRadius: 10,
    margin: 10,
  },
  redBottomBorder: {
    width: 50,
    height: 50,
    borderColor: 'red',
    borderBottomWidth: 4,
    borderRightWidth: 4,
    borderBottomRightRadius: 10,
    margin: 10,
  },
  blackBottomBorder: {
    width: 50,
    height: 50,
    borderColor: 'black',
    borderBottomWidth: 4,
    borderLeftWidth: 4,
    borderBottomLeftRadius: 10,
    margin: 10,
  },
  bordersContainer: {
    flexDirection: 'row',
    marginLeft: 30,
  },
});

export default App;

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[leymytel]

I'm experiencing the same issue.

[Taraslysak]

Same issue on Rn version 0.71.6

[kelset]

hey folks - just a quick update on this, while discussing #37753 we realized that that the problem reported here is also in effect, so there's a proposed solution out atm (#37840) and once we verify that it works, we'll also backport to 0.71 - in fact, I've already added a comment about it in the 0.71 patch release discussion -> reactwg/react-native-releases#70 (comment)

[kelset]

did a quick local test and the revert fixes the problem:

expect this to be fixed in the next patch for 0.71, 0.71.11

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

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

[fabOnReact]

Do you still experience this issue?

I have four years of experience maintaining facebook/react-native and I specialize in the Text and TextInput components. I currently have 58 facebook/react-native PRs.

If you still experience this issue, I will prepare a patched release with the fix.

Thanks a lot