`borderTopEndRadius` and `borderBottomEndRadius` behave inconsistently on Android in RTL

[YOEL311]

Description

Summary

When using borderTopEndRadius and borderBottomEndRadius on a View, the corners behave inconsistently on Android when the device language is RTL (e.g. Hebrew or Arabic). The same styles behave correctly on iOS.

In LTR, both radius props apply to the same (right) side, as expected.

In RTL, borderTopEndRadius applies to the left side (correct), but borderBottomEndRadius applies to the right side (unexpected).

This causes the end corners to appear on opposite sides in RTL mode on Android, which breaks layout symmetry.

Note that the top-right and bottom-right corners are rounded ✅

Set device language to RTL (e.g., Hebrew or Arabic)

Observe that the top-left and bottom-right corners are rounded ❌

---

✅ Expected Behavior

In RTL mode, both borderTopEndRadius and borderBottomEndRadius should apply to the left side, maintaining their "end" semantics consistently across both top and bottom.

---

❌ Actual Behavior (Android Only)

In RTL:

• borderTopEndRadius is applied to the left side (✔️ expected)
• borderBottomEndRadius is applied to the right side (❌ unexpected)

This creates inconsistent styling and breaks mirrored UI expectations in RTL layouts on Android.

Steps to reproduce

1. Set device language to RTL (e.g.,Hebrew or Arabic)
2. Render the following component:

<View
  style={{
    backgroundColor: '#DA70D640',
    height: 100,
    width: 100,
    borderRadius: 0,
    borderTopEndRadius: 10,
    borderBottomEndRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
  }}
/>

React Native Version

0.79.2

Affected Platforms

Runtime - Android

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

Click to expand

info Fetching system and libraries information...
System:
  OS: macOS 15.3
  CPU: (12) arm64 Apple M3 Pro
  Memory: 184.52 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 21.7.3
    path: ~/.nvm/versions/node/v21.7.3/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.5.0
    path: ~/.nvm/versions/node/v21.7.3/bin/npm
  Watchman:
    version: 2025.04.14.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "28"
      - "30"
      - "31"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12700392
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: 18.0.0
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.2
    wanted: 0.79.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

MANDATORY Reproducer

https://github.com/YOEL311/reproduceRN-issueOfBottomEnd

Screenshots and Videos

RTL device

LTR device

🔁 Regression

✅ This issue does not occur in React Native 0.74

❌ It appears starting in React Native 0.75 and persists in 0.79

---

🧪 Minimal Reproducible Example

To Try 74
npx @react-native-community/cli@latest init test74 --version 0.74

To Try 75
npx @react-native-community/cli@latest init test75 --version 0.75

Use the following App.js file in a new React Native project:

import React from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';


function App(): React.JSX.Element {
  return (
    <View style={styles.sectionContainer}>
      <View
        style={styles.box}
      />
    </View >
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
    flex: 1,
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
  },
  box: {
    backgroundColor: '#DA70D640',
    height: 100,
    width: 100,
    borderRadius: 0,
    borderWidth: 2,
    borderTopEndRadius: 20,
    borderBottomEndRadius: 20,
  },
});

export default App;

[BarakSeren]

This is messing with our project as well!

It is difficult to dive into the mechanics behind LTR<->RTL within the RN library to find out where to place a fix.
If anyone could help figure out the root of the problem, I'm sure it is easily fixable...

[riteshshukla04]

I tried on 0.75.5. It is broken there too.

[YOEL311]

Hey @riteshshukla04
😅 I’ve been hopping between so many React Native versions lately, I nearly started dreaming in release notes...
At first, I thought the issue was new, but I was right; I was just off by one version!
In 0.74, the issue does not reproduce.
It starts appearing in 0.75 and continues in newer versions.