Skip to content

Commit 202d939

Browse files
ddx533534meta-codesync[bot]
authored andcommitted
Fix Android bottom logical border radii in RTL without swapping (#58979)
Summary: On Android, `BorderRadiusStyle.resolve` maps `borderBottomStartRadius` to the bottom-left corner and `borderBottomEndRadius` to the bottom-right corner when the layout direction is RTL and `I18nManager.swapLeftAndRightInRTL(false)` is set. In RTL, these logical properties should resolve to the bottom-right and bottom-left corners respectively, regardless of whether physical left/right styles are swapped. For example, a 100 x 100 view with `borderBottomStartRadius: 10` and `borderBottomEndRadius: 20` currently resolves to bottom-left = 10 and bottom-right = 20 in that configuration. This change resolves them to bottom-left = 20 and bottom-right = 10. Fix the two logical fallbacks in the RTL no-swap branch. Correct the corresponding expectations in `testCorrectPriorityRTLNoSwap`, which currently encode the same incorrect mapping, and add a regression test using distinct bottom-start and bottom-end radii with physical swapping both enabled and disabled. The existing priority tests also cover physical fallbacks, fully logical overrides, and zero-valued overrides. ## Changelog: [ANDROID] [FIXED] - Fix bottom-start and bottom-end border radii resolving to the wrong corners in RTL when left/right style swapping is disabled. Pull Request resolved: #58979 Test Plan: - `git diff --check`: passed before committing. - Kotlin formatting check using the repository-pinned ktfmt 0.59.0: passed for both changed files. Exact PowerShell command: ```powershell & 'C:/Program Files/JetBrains/RustRover 2026.2.2/jbr/bin/java.exe' -jar E:/react-native/.tools/format/node_modules/ktfmt/lib/ktfmt.jar --do-not-remove-unused-imports --dry-run --set-exit-if-changed packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderRadiusStyle.kt packages/react-native/ReactAndroid/src/test/java/com/facebook/react/uimanager/BorderRadiusStyleTest.kt ``` - Attempted the targeted Android unit tests: ```powershell ./gradlew.bat :packages:react-native:ReactAndroid:testDebugUnitTest --tests com.facebook.react.uimanager.BorderRadiusStyleTest --no-daemon ``` The tests did not execute: the wrapper could not download Gradle 9.4.1 in the restricted environment (`Permission denied: getsockopt`). A retry outside the sandbox made no download progress and was stopped. The Android SDK/NDK is not configured on this machine. The unit tests still need to run in CI or an Android development environment. - RNTester/device validation and screenshots were not available in this environment. To validate visually, enable RTL, disable physical left/right swapping, restart the app, and render the 100 x 100 view described above. Expect the bottom-right radius to be 10 and the bottom-left radius to be 20; enabling swapping should preserve these logical corner assignments. Reviewed By: javache Differential Revision: D126298086 Pulled By: cortinico fbshipit-source-id: 7a621c9338100bf53d4d32262557d5b65ccead1a
1 parent a613baf commit 202d939

2 files changed

Lines changed: 21 additions & 4 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -208,11 +208,11 @@ internal data class BorderRadiusStyle(
208208
CornerRadii(it, width, height)
209209
} ?: zeroRadii,
210210
bottomLeft =
211-
(endEnd ?: bottomStart ?: bottomLeft ?: uniform)?.let {
211+
(endEnd ?: bottomEnd ?: bottomLeft ?: uniform)?.let {
212212
CornerRadii(it, width, height)
213213
} ?: zeroRadii,
214214
bottomRight =
215-
(endStart ?: bottomEnd ?: bottomRight ?: uniform)?.let {
215+
(endStart ?: bottomStart ?: bottomRight ?: uniform)?.let {
216216
CornerRadii(it, width, height)
217217
} ?: zeroRadii,
218218
width = width,

‎packages/react-native/ReactAndroid/src/test/java/com/facebook/react/uimanager/BorderRadiusStyleTest.kt‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,14 +149,14 @@ class BorderRadiusStyleTest {
149149
arrayOf(
150150
BorderRadiusProp.BORDER_RADIUS,
151151
BorderRadiusProp.BORDER_BOTTOM_LEFT_RADIUS,
152-
BorderRadiusProp.BORDER_BOTTOM_START_RADIUS,
152+
BorderRadiusProp.BORDER_BOTTOM_END_RADIUS,
153153
BorderRadiusProp.BORDER_END_END_RADIUS,
154154
),
155155
ComputedBorderRadiusProp.COMPUTED_BORDER_BOTTOM_RIGHT_RADIUS to
156156
arrayOf(
157157
BorderRadiusProp.BORDER_RADIUS,
158158
BorderRadiusProp.BORDER_BOTTOM_RIGHT_RADIUS,
159-
BorderRadiusProp.BORDER_BOTTOM_END_RADIUS,
159+
BorderRadiusProp.BORDER_BOTTOM_START_RADIUS,
160160
BorderRadiusProp.BORDER_END_START_RADIUS,
161161
),
162162
)
@@ -174,6 +174,23 @@ class BorderRadiusStyleTest {
174174
}
175175
}
176176

177+
@Test
178+
fun testBottomLogicalCornersRTLRegardlessOfSwap() {
179+
val borderRadiusStyle =
180+
BorderRadiusStyle(
181+
bottomStart = LengthPercentage(10f, LengthPercentageType.POINT),
182+
bottomEnd = LengthPercentage(20f, LengthPercentageType.POINT),
183+
)
184+
185+
for (swap in listOf(false, true)) {
186+
setContextLeftAndRightSwap(ctx, swap)
187+
val resolved = borderRadiusStyle.resolve(1, context = ctx, width = 100f, height = 100f)
188+
189+
assertThat(resolved.bottomLeft).isEqualTo(CornerRadii(20f, 20f))
190+
assertThat(resolved.bottomRight).isEqualTo(CornerRadii(10f, 10f))
191+
}
192+
}
193+
177194
@Test
178195
fun testBorderRadiusPercentages() {
179196
val borderRadiusStyle =

0 commit comments

Comments
 (0)