Skip to content

Commit 9ea8e77

Browse files
sbaiahmed1sbaiahmed1
committed
Fix crash when setting a percentage borderRadius on Text, TextInput, and ScrollView (Android)
Percentage border radii arrive from JS as strings ('50%'), but the borderRadius @ReactPropGroup setters in ReactTextViewManager, PreparedLayoutTextViewManager, ReactTextInputManager, ReactScrollViewManager, ReactHorizontalScrollViewManager, and ReactNestedScrollViewManager still typed the prop as Float, so the reflection-based property updater crashed with "java.lang.String cannot be cast to java.lang.Double": JSApplicationIllegalArgumentException: Error while updating property 'borderRadius' of a view managed by: RCTText Accept a Dynamic and parse it with LengthPercentage.setFromDynamic, completing the migration ReactViewManager received in 0.75 and ReactImageManager in #57795. The Float overloads on the public managers are kept as deprecated pass-throughs for backward compatibility. PreparedLayoutTextViewManager is internal, so it is migrated outright. ReactNestedScrollViewManager is generated from ReactScrollViewManager.kt by generate-nested-scroll-view.js, so it mirrors its source and was regenerated rather than edited by hand. Changelog: [ANDROID] [FIXED] - Fix crash when setting a percentage borderRadius on Text, TextInput, and ScrollView
1 parent 3718f62 commit 9ea8e77

9 files changed

Lines changed: 175 additions & 23 deletions

File tree

‎packages/react-native/ReactAndroid/api/ReactAndroid.api‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5579,6 +5579,7 @@ public class com/facebook/react/views/scroll/ReactHorizontalScrollViewManager :
55795579
public synthetic fun scrollToEnd (Ljava/lang/Object;Lcom/facebook/react/views/scroll/ReactScrollViewCommandHelper$ScrollToEndCommandData;)V
55805580
public final fun setBorderColor (Lcom/facebook/react/views/scroll/ReactHorizontalScrollView;ILjava/lang/Integer;)V
55815581
public final fun setBorderRadius (Lcom/facebook/react/views/scroll/ReactHorizontalScrollView;IF)V
5582+
public final fun setBorderRadius (Lcom/facebook/react/views/scroll/ReactHorizontalScrollView;ILcom/facebook/react/bridge/Dynamic;)V
55825583
public final fun setBorderStyle (Lcom/facebook/react/views/scroll/ReactHorizontalScrollView;Ljava/lang/String;)V
55835584
public final fun setBorderWidth (Lcom/facebook/react/views/scroll/ReactHorizontalScrollView;IF)V
55845585
public final fun setBottomFillColor (Lcom/facebook/react/views/scroll/ReactHorizontalScrollView;I)V
@@ -5874,6 +5875,7 @@ public class com/facebook/react/views/scroll/ReactScrollViewManager : com/facebo
58745875
public synthetic fun scrollToEnd (Ljava/lang/Object;Lcom/facebook/react/views/scroll/ReactScrollViewCommandHelper$ScrollToEndCommandData;)V
58755876
public final fun setBorderColor (Lcom/facebook/react/views/scroll/ReactScrollView;ILjava/lang/Integer;)V
58765877
public final fun setBorderRadius (Lcom/facebook/react/views/scroll/ReactScrollView;IF)V
5878+
public final fun setBorderRadius (Lcom/facebook/react/views/scroll/ReactScrollView;ILcom/facebook/react/bridge/Dynamic;)V
58775879
public final fun setBorderStyle (Lcom/facebook/react/views/scroll/ReactScrollView;Ljava/lang/String;)V
58785880
public final fun setBorderWidth (Lcom/facebook/react/views/scroll/ReactScrollView;IF)V
58795881
public final fun setBottomFillColor (Lcom/facebook/react/views/scroll/ReactScrollView;I)V
@@ -6069,6 +6071,7 @@ public class com/facebook/react/views/text/ReactTextViewManager : com/facebook/r
60696071
public final fun setAndroidHyphenationFrequency (Lcom/facebook/react/views/text/ReactTextView;Ljava/lang/String;)V
60706072
public final fun setBorderColor (Lcom/facebook/react/views/text/ReactTextView;ILjava/lang/Integer;)V
60716073
public final fun setBorderRadius (Lcom/facebook/react/views/text/ReactTextView;IF)V
6074+
public final fun setBorderRadius (Lcom/facebook/react/views/text/ReactTextView;ILcom/facebook/react/bridge/Dynamic;)V
60726075
public final fun setBorderStyle (Lcom/facebook/react/views/text/ReactTextView;Ljava/lang/String;)V
60736076
public final fun setBorderWidth (Lcom/facebook/react/views/text/ReactTextView;IF)V
60746077
public final fun setDataDetectorType (Lcom/facebook/react/views/text/ReactTextView;Ljava/lang/String;)V
@@ -6333,6 +6336,7 @@ public class com/facebook/react/views/textinput/ReactTextInputManager : com/face
63336336
public final fun setAutoFocus (Lcom/facebook/react/views/textinput/ReactEditText;Z)V
63346337
public final fun setBorderColor (Lcom/facebook/react/views/textinput/ReactEditText;ILjava/lang/Integer;)V
63356338
public final fun setBorderRadius (Lcom/facebook/react/views/textinput/ReactEditText;IF)V
6339+
public final fun setBorderRadius (Lcom/facebook/react/views/textinput/ReactEditText;ILcom/facebook/react/bridge/Dynamic;)V
63366340
public final fun setBorderStyle (Lcom/facebook/react/views/textinput/ReactEditText;Ljava/lang/String;)V
63376341
public final fun setBorderWidth (Lcom/facebook/react/views/textinput/ReactEditText;IF)V
63386342
public final fun setCaretHidden (Lcom/facebook/react/views/textinput/ReactEditText;Z)V

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.kt‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -282,9 +282,24 @@ constructor(private val fpsListener: FpsListener? = null) :
282282
ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
283283
ViewProps.BORDER_BOTTOM_LEFT_RADIUS,
284284
],
285-
defaultFloat = Float.NaN,
285+
)
286+
public fun setBorderRadius(
287+
view: ReactHorizontalScrollView?,
288+
index: Int,
289+
rawBorderRadius: Dynamic,
290+
) {
291+
if (view != null) {
292+
val borderRadius = LengthPercentage.setFromDynamic(rawBorderRadius)
293+
setBorderRadius(view, BorderRadiusProp.entries[index], borderRadius)
294+
}
295+
}
296+
297+
@Deprecated(
298+
"Don't use setBorderRadius(view, index, Float) as it was deprecated in React Native 0.88.0.",
286299
)
287300
public fun setBorderRadius(view: ReactHorizontalScrollView?, index: Int, borderRadius: Float) {
301+
// Direct body: DynamicFromObject(Float).asDouble() throws, and setFromDynamic
302+
// would not map NaN back to null like the original Float path did.
288303
if (view != null) {
289304
val radius =
290305
if (borderRadius.isNaN()) null

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactNestedScrollViewManager.kt‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* This source code is licensed under the MIT license found in the
55
* LICENSE file in the root directory of this source tree.
66
*
7-
* @generated SignedSource<<cc2b79daa48993203e35cb663b733ccc>>
7+
* @generated SignedSource<<3b339a7d81f8e32cf6b6ca93ae9a388b>>
88
*/
99

1010
/**
@@ -255,9 +255,20 @@ constructor(private val fpsListener: FpsListener? = null) :
255255
ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
256256
ViewProps.BORDER_BOTTOM_LEFT_RADIUS,
257257
],
258-
defaultFloat = Float.NaN,
258+
)
259+
fun setBorderRadius(view: ReactNestedScrollView?, index: Int, rawBorderRadius: Dynamic) {
260+
if (view != null) {
261+
val borderRadius = LengthPercentage.setFromDynamic(rawBorderRadius)
262+
setBorderRadius(view, BorderRadiusProp.entries[index], borderRadius)
263+
}
264+
}
265+
266+
@Deprecated(
267+
"Don't use setBorderRadius(view, index, Float) as it was deprecated in React Native 0.88.0.",
259268
)
260269
fun setBorderRadius(view: ReactNestedScrollView?, index: Int, borderRadius: Float) {
270+
// Direct body: DynamicFromObject(Float).asDouble() throws, and setFromDynamic
271+
// would not map NaN back to null like the original Float path did.
261272
if (view != null) {
262273
val radius =
263274
if (borderRadius.isNaN()) null

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.kt‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,9 +247,20 @@ constructor(private val fpsListener: FpsListener? = null) :
247247
ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
248248
ViewProps.BORDER_BOTTOM_LEFT_RADIUS,
249249
],
250-
defaultFloat = Float.NaN,
250+
)
251+
public fun setBorderRadius(view: ReactScrollView?, index: Int, rawBorderRadius: Dynamic) {
252+
if (view != null) {
253+
val borderRadius = LengthPercentage.setFromDynamic(rawBorderRadius)
254+
setBorderRadius(view, BorderRadiusProp.entries[index], borderRadius)
255+
}
256+
}
257+
258+
@Deprecated(
259+
"Don't use setBorderRadius(view, index, Float) as it was deprecated in React Native 0.88.0.",
251260
)
252261
public fun setBorderRadius(view: ReactScrollView?, index: Int, borderRadius: Float) {
262+
// Direct body: DynamicFromObject(Float).asDouble() throws, and setFromDynamic
263+
// would not map NaN back to null like the original Float path did.
253264
if (view != null) {
254265
val radius =
255266
if (borderRadius.isNaN()) null

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/PreparedLayoutTextViewManager.kt‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ import android.text.Spannable
1313
import android.text.Spanned
1414
import android.view.View
1515
import com.facebook.react.R
16+
import com.facebook.react.bridge.Dynamic
1617
import com.facebook.react.internal.SystraceSection
1718
import com.facebook.react.module.annotations.ReactModule
1819
import com.facebook.react.uimanager.BackgroundStyleApplicator
1920
import com.facebook.react.uimanager.BaseViewManager
2021
import com.facebook.react.uimanager.IViewGroupManager
2122
import com.facebook.react.uimanager.LayoutShadowNode
2223
import com.facebook.react.uimanager.LengthPercentage
23-
import com.facebook.react.uimanager.LengthPercentageType
2424
import com.facebook.react.uimanager.PointerEvents
2525
import com.facebook.react.uimanager.ReactStylesDiffMap
2626
import com.facebook.react.uimanager.ReferenceStateWrapper
@@ -149,13 +149,10 @@ internal class PreparedLayoutTextViewManager :
149149
ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
150150
ViewProps.BORDER_BOTTOM_LEFT_RADIUS,
151151
],
152-
defaultFloat = Float.NaN,
153152
)
154-
fun setBorderRadius(view: PreparedLayoutTextView, index: Int, borderRadius: Float) {
155-
val radius =
156-
if (borderRadius.isNaN()) null
157-
else LengthPercentage(borderRadius, LengthPercentageType.POINT)
158-
BackgroundStyleApplicator.setBorderRadius(view, BorderRadiusProp.values()[index], radius)
153+
fun setBorderRadius(view: PreparedLayoutTextView, index: Int, rawBorderRadius: Dynamic): Unit {
154+
val borderRadius = LengthPercentage.setFromDynamic(rawBorderRadius)
155+
BackgroundStyleApplicator.setBorderRadius(view, BorderRadiusProp.values()[index], borderRadius)
159156
}
160157

161158
@ReactProp(name = "borderStyle")

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.kt‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import android.text.util.Linkify
1919
import android.view.Gravity
2020
import com.facebook.common.logging.FLog
2121
import com.facebook.react.R
22+
import com.facebook.react.bridge.Dynamic
2223
import com.facebook.react.common.ReactConstants
2324
import com.facebook.react.common.annotations.UnstableReactNativeAPI
2425
import com.facebook.react.common.mapbuffer.MapBuffer
@@ -335,15 +336,21 @@ public constructor(
335336
ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
336337
ViewProps.BORDER_BOTTOM_LEFT_RADIUS,
337338
],
338-
defaultFloat = Float.NaN,
339+
)
340+
public fun setBorderRadius(view: ReactTextView, index: Int, rawBorderRadius: Dynamic) {
341+
val borderRadius = LengthPercentage.setFromDynamic(rawBorderRadius)
342+
BackgroundStyleApplicator.setBorderRadius(view, BorderRadiusProp.values()[index], borderRadius)
343+
}
344+
345+
@Deprecated(
346+
"Don't use setBorderRadius(view, index, Float) as it was deprecated in React Native 0.88.0.",
339347
)
340348
public fun setBorderRadius(view: ReactTextView, index: Int, borderRadius: Float) {
349+
// Direct body: DynamicFromObject(Float).asDouble() throws, and setFromDynamic
350+
// would not map NaN back to null like the original Float path did.
341351
val radius =
342-
if (borderRadius.isNaN()) {
343-
null
344-
} else {
345-
LengthPercentage(borderRadius, LengthPercentageType.POINT)
346-
}
352+
if (borderRadius.isNaN()) null
353+
else LengthPercentage(borderRadius, LengthPercentageType.POINT)
347354
BackgroundStyleApplicator.setBorderRadius(view, BorderRadiusProp.values()[index], radius)
348355
}
349356

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.kt‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -807,15 +807,21 @@ public open class ReactTextInputManager public constructor() :
807807
ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
808808
ViewProps.BORDER_BOTTOM_LEFT_RADIUS,
809809
],
810-
defaultFloat = Float.NaN,
810+
)
811+
public fun setBorderRadius(view: ReactEditText, index: Int, rawBorderRadius: Dynamic) {
812+
val borderRadius = LengthPercentage.setFromDynamic(rawBorderRadius)
813+
setBorderRadius(view, BorderRadiusProp.entries[index], borderRadius)
814+
}
815+
816+
@Deprecated(
817+
"Don't use setBorderRadius(view, index, Float) as it was deprecated in React Native 0.88.0.",
811818
)
812819
public fun setBorderRadius(view: ReactEditText, index: Int, borderRadius: Float) {
820+
// Direct body: DynamicFromObject(Float).asDouble() throws, and setFromDynamic
821+
// would not map NaN back to null like the original Float path did.
813822
val radius =
814-
if (borderRadius.isNaN()) {
815-
null
816-
} else {
817-
LengthPercentage(borderRadius, LengthPercentageType.POINT)
818-
}
823+
if (borderRadius.isNaN()) null
824+
else LengthPercentage(borderRadius, LengthPercentageType.POINT)
819825
setBorderRadius(view, BorderRadiusProp.entries[index], radius)
820826
}
821827

‎packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/text/ReactTextViewPropertyTest.kt‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/*
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
// TODO T207169925: Migrate CatalystInstance to Reacthost and remove the Suppress("DEPRECATION")
9+
// annotation
10+
@file:Suppress("DEPRECATION")
11+
12+
package com.facebook.react.views.text
13+
14+
import android.util.DisplayMetrics
15+
import com.facebook.react.bridge.BridgeReactContext
16+
import com.facebook.react.bridge.CatalystInstance
17+
import com.facebook.react.bridge.JavaOnlyMap
18+
import com.facebook.react.bridge.ReactTestHelper.createMockCatalystInstance
19+
import com.facebook.react.internal.featureflags.ReactNativeFeatureFlagsForTests
20+
import com.facebook.react.uimanager.BackgroundStyleApplicator
21+
import com.facebook.react.uimanager.DisplayMetricsHolder
22+
import com.facebook.react.uimanager.LengthPercentage
23+
import com.facebook.react.uimanager.LengthPercentageType
24+
import com.facebook.react.uimanager.ReactStylesDiffMap
25+
import com.facebook.react.uimanager.ThemedReactContext
26+
import com.facebook.react.uimanager.style.BorderRadiusProp
27+
import org.assertj.core.api.Assertions.assertThat
28+
import org.junit.After
29+
import org.junit.Before
30+
import org.junit.Test
31+
import org.junit.runner.RunWith
32+
import org.robolectric.RobolectricTestRunner
33+
import org.robolectric.RuntimeEnvironment
34+
35+
/** Verify view properties are being applied correctly by [ReactTextViewManager] */
36+
@RunWith(RobolectricTestRunner::class)
37+
class ReactTextViewPropertyTest {
38+
39+
private lateinit var context: BridgeReactContext
40+
private lateinit var catalystInstanceMock: CatalystInstance
41+
private lateinit var themedContext: ThemedReactContext
42+
private lateinit var manager: ReactTextViewManager
43+
44+
@Before
45+
fun setup() {
46+
ReactNativeFeatureFlagsForTests.setUp()
47+
context = BridgeReactContext(RuntimeEnvironment.getApplication())
48+
catalystInstanceMock = createMockCatalystInstance()
49+
context.initializeWithInstance(catalystInstanceMock)
50+
themedContext = ThemedReactContext(context, context, null, -1)
51+
manager = ReactTextViewManager()
52+
DisplayMetricsHolder.setScreenDisplayMetrics(DisplayMetrics())
53+
}
54+
55+
@After
56+
fun teardown() {
57+
DisplayMetricsHolder.setScreenDisplayMetrics(null)
58+
}
59+
60+
private fun buildStyles(vararg keysAndValues: Any?): ReactStylesDiffMap {
61+
return ReactStylesDiffMap(JavaOnlyMap.of(*keysAndValues))
62+
}
63+
64+
@Test
65+
fun testBorderRadius() {
66+
val view = manager.createViewInstance(themedContext)
67+
68+
// Percentage border radii arrive as strings and must not crash the property updater
69+
manager.updateProperties(view, buildStyles("borderRadius", "50%"))
70+
assertThat(BackgroundStyleApplicator.getBorderRadius(view, BorderRadiusProp.BORDER_RADIUS))
71+
.isEqualTo(LengthPercentage(50f, LengthPercentageType.PERCENT))
72+
73+
manager.updateProperties(view, buildStyles("borderRadius", 10.0))
74+
assertThat(BackgroundStyleApplicator.getBorderRadius(view, BorderRadiusProp.BORDER_RADIUS))
75+
.isEqualTo(LengthPercentage(10f, LengthPercentageType.POINT))
76+
77+
manager.updateProperties(view, buildStyles("borderRadius", null))
78+
assertThat(BackgroundStyleApplicator.getBorderRadius(view, BorderRadiusProp.BORDER_RADIUS))
79+
.isNull()
80+
}
81+
}

‎packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/textinput/ReactTextInputPropertyTest.kt‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,13 @@ import com.facebook.react.bridge.CatalystInstance
3232
import com.facebook.react.bridge.JavaOnlyMap
3333
import com.facebook.react.bridge.ReactTestHelper.createMockCatalystInstance
3434
import com.facebook.react.internal.featureflags.ReactNativeFeatureFlagsForTests
35+
import com.facebook.react.uimanager.BackgroundStyleApplicator
3536
import com.facebook.react.uimanager.DisplayMetricsHolder
37+
import com.facebook.react.uimanager.LengthPercentage
38+
import com.facebook.react.uimanager.LengthPercentageType
3639
import com.facebook.react.uimanager.ReactStylesDiffMap
3740
import com.facebook.react.uimanager.ThemedReactContext
41+
import com.facebook.react.uimanager.style.BorderRadiusProp
3842
import com.facebook.react.views.text.DefaultStyleValuesUtil.getDefaultTextColorHint
3943
import com.facebook.react.views.text.ReactTextUpdate
4044
import com.facebook.react.views.text.internal.span.CustomStyleSpan
@@ -635,6 +639,22 @@ class ReactTextInputPropertyTest {
635639
assertThat(checkNotNull(view.text).getSpans(0, view.length(), MarkerSpan::class.java)).isEmpty()
636640
}
637641

642+
@Test
643+
fun testBorderRadius() {
644+
// Percentage border radii arrive as strings and must not crash the property updater
645+
manager.updateProperties(view, buildStyles("borderRadius", "50%"))
646+
assertThat(BackgroundStyleApplicator.getBorderRadius(view, BorderRadiusProp.BORDER_RADIUS))
647+
.isEqualTo(LengthPercentage(50f, LengthPercentageType.PERCENT))
648+
649+
manager.updateProperties(view, buildStyles("borderRadius", 10.0))
650+
assertThat(BackgroundStyleApplicator.getBorderRadius(view, BorderRadiusProp.BORDER_RADIUS))
651+
.isEqualTo(LengthPercentage(10f, LengthPercentageType.POINT))
652+
653+
manager.updateProperties(view, buildStyles("borderRadius", null))
654+
assertThat(BackgroundStyleApplicator.getBorderRadius(view, BorderRadiusProp.BORDER_RADIUS))
655+
.isNull()
656+
}
657+
638658
private fun buildStyles(vararg keysAndValues: Any?): ReactStylesDiffMap {
639659
return ReactStylesDiffMap(JavaOnlyMap.of(*keysAndValues))
640660
}

0 commit comments

Comments
 (0)