[Android] borderEndStartRadius and borderStartEndRadius are swapped - applied to the wrong corner vs iOS

[istarkov]

Description

On Android, the logical border-radius props borderEndStartRadius and borderStartEndRadius are mapped to the wrong physical corners. borderEndStartRadius renders at the top-right, but per the CSS
spec (and iOS) it should be at the bottom-left. The two props are swapped. iOS maps them correctly.

Bug location

Android — endStart/startEnd are swapped in the LTR (and RTL) branches of resolve():

react-native/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderRadiusStyle.kt

Lines 156 to 177 in 066c0d8

	return when (layoutDirection) {
	LayoutDirection.LTR ->
	ensureNoOverlap(
	topLeft =
	(startStart ?: topStart ?: topLeft ?: uniform)?.let {
	CornerRadii(it, width, height)
	} ?: zeroRadii,
	topRight =
	(endStart ?: topEnd ?: topRight ?: uniform)?.let {
	CornerRadii(it, width, height)
	} ?: zeroRadii,
	bottomLeft =
	(startEnd ?: bottomStart ?: bottomLeft ?: uniform)?.let {
	CornerRadii(it, width, height)
	} ?: zeroRadii,
	bottomRight =
	(endEnd ?: bottomEnd ?: bottomRight ?: uniform)?.let {
	CornerRadii(it, width, height)
	} ?: zeroRadii,
	width = width,
	height = height,
	)

Steps to reproduce

import { StyleSheet, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export default function Radius() {
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <View style={[styles.box, styles.roundedEs]}>
        <Text>borderEndStartRadius</Text>
      </View>

      <View style={[styles.box, styles.roundedEe]}>
        <Text>borderStartEndRadius</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  box: {
    margin: 56,
    height: 160,
    width: 160,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#208AEF',
  },
  roundedEs: {
    borderEndStartRadius: 44,
  },
  roundedEe: {
    borderStartEndRadius: 44,
  },
});

On IOS everything is ok, Android is broken

React Native Version

0.85

Affected Platforms

Runtime - Android

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

useless here

Stacktrace or Logs

useless here

MANDATORY Reproducer

https://snack.expo.dev/@istarkov/joyous-red-bacon?platform=android

Screenshots and Videos

[react-native-bot]

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

[react-native-bot]

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.