From aa53d0ed21a08ddcd0fe525fa803a2d022742577 Mon Sep 17 00:00:00 2001 From: Yevhenii Date: Tue, 20 Oct 2026 17:19:17 +0300 Subject: [PATCH 1/3] Draw any colour on RNTester's legacy native view on Android, as iOS does --- .../js/MyLegacyViewNativeComponent.js | 4 ++-- .../react/uiapp/component/MyLegacyViewManager.kt | 9 +++------ 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js b/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js index 70219cdca613..6cdeafe8261f 100644 --- a/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js +++ b/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js @@ -8,7 +8,7 @@ * @format */ -import type {HostComponent, ViewProps} from 'react-native'; +import type {ColorValue, HostComponent, ViewProps} from 'react-native'; import * as React from 'react'; import {UIManager, findNodeHandle, requireNativeComponent} from 'react-native'; @@ -27,7 +27,7 @@ type ColorChangedEvent = { type NativeProps = Readonly<{ ...ViewProps, opacity?: number, - color?: string, + color?: ColorValue, onColorChanged?: (event: ColorChangedEvent) => void, }>; diff --git a/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/component/MyLegacyViewManager.kt b/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/component/MyLegacyViewManager.kt index f65f7a45b35e..666ee54e6f7e 100644 --- a/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/component/MyLegacyViewManager.kt +++ b/packages/rn-tester/android/app/src/main/java/com/facebook/react/uiapp/component/MyLegacyViewManager.kt @@ -33,12 +33,9 @@ internal class MyLegacyViewManager(reactContext: ReactApplicationContext) : super.setOpacity(view, opacity) } - @ReactProp(name = ViewProps.COLOR) - fun setColor(view: MyNativeView, color: String?): Unit = - when (color) { - null -> view.setBackgroundColor(Color.TRANSPARENT) - else -> view.setBackgroundColor(Color.parseColor(color)) - } + @ReactProp(name = ViewProps.COLOR, customType = "Color") + fun setColor(view: MyNativeView, color: Int?): Unit = + view.setBackgroundColor(color ?: Color.TRANSPARENT) @ReactProp(name = "cornerRadius") fun setCornerRadius(view: MyNativeView, cornerRadius: Float) { From 8ceda7aa1d67db24dbf2c0a094f357233f7b8424 Mon Sep 17 00:00:00 2001 From: Yevhenii Date: Tue, 20 Oct 2026 20:02:54 +0300 Subject: [PATCH 2/3] Cover the legacy view's color prop in the New Architecture Examples flow RNTester's example set no color on the legacy view, so no e2e job reached the setter. A "Set Color Prop" button gives the view rgb(255, 255, 255), and new-arch-examples.yml asserts the HSBA the view reports back, which reads h: 0, s: 0, b: 1, a: 255 on both platforms. --- packages/rn-tester/.maestro/new-arch-examples.yml | 3 +++ .../rn-tester/NativeComponentExample/js/MyNativeView.js | 9 +++++++++ 2 files changed, 12 insertions(+) diff --git a/packages/rn-tester/.maestro/new-arch-examples.yml b/packages/rn-tester/.maestro/new-arch-examples.yml index 803eb7708efd..66896b177af1 100644 --- a/packages/rn-tester/.maestro/new-arch-examples.yml +++ b/packages/rn-tester/.maestro/new-arch-examples.yml @@ -12,6 +12,9 @@ appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebo - tapOn: 'Change Background' - assertVisible: text: 'HSBA: h: 0, s: 1, b: 1, a: 255' +- tapOn: 'Set Color Prop' +- assertVisible: + text: 'HSBA: h: 0, s: 0, b: 1, a: 255' - assertVisible: text: '> Interop Layer Measurements <' - assertVisible: diff --git a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js index 198ade0266fb..a3b09fb710de 100644 --- a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js +++ b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js @@ -10,6 +10,7 @@ import type {MyLegacyViewType} from './MyLegacyViewNativeComponent'; import type {MyNativeViewType} from './MyNativeViewNativeComponent'; +import type {ColorValue} from 'react-native'; import RNTMyLegacyNativeView from './MyLegacyViewNativeComponent'; import { @@ -101,6 +102,7 @@ export default function MyNativeView(props: {}): React.Node { const ref = useRef | null>(null); const legacyRef = useRef | null>(null); const [currentBGColor, setCurrentBGColor] = useState(0); + const [legacyColor, setLegacyColor] = useState(undefined); const [opacity, setOpacity] = useState(1.0); const [arrayValues, setArrayValues] = useState([1, 2, 3]); const [hsba, setHsba] = useState(new HSBA()); @@ -141,6 +143,7 @@ export default function MyNativeView(props: {}): React.Node { ref={legacyRef} style={{flex: 1}} opacity={opacity} + color={legacyColor} onColorChanged={event => { const normalizedHue = Platform.OS === 'android' @@ -195,6 +198,12 @@ export default function MyNativeView(props: {}): React.Node { setCurrentBGColor(nextBGColor); }} /> +