From c005830958921a030fd46b6968b778509d3bcb45 Mon Sep 17 00:00:00 2001 From: Riccardo Cipolleschi Date: Fri, 10 Mar 2023 04:52:44 -0800 Subject: [PATCH] Add Fabric Interop event example Summary: This changes adds an example to RNTester to verify that the Interop Layer can process bubbling events in Fabric as it used to do in Paper. ## Changelog: [iOS][Added] - Add example in the Interop Layer to use events Reviewed By: sammy-SC Differential Revision: D43911390 fbshipit-source-id: ae75db25078669676e5a609e090f1e9674026391 --- .../ios/RNTLegacyView.h | 19 ++++++++++ .../ios/RNTLegacyView.mm | 34 ++++++++++++++++++ .../ios/RNTMyLegacyNativeViewManager.mm | 6 ++-- .../js/MyLegacyViewNativeComponent.js | 12 +++++++ .../NativeComponentExample/js/MyNativeView.js | 35 +++++++++++++++++++ 5 files changed, 104 insertions(+), 2 deletions(-) create mode 100644 packages/rn-tester/NativeComponentExample/ios/RNTLegacyView.h create mode 100644 packages/rn-tester/NativeComponentExample/ios/RNTLegacyView.mm diff --git a/packages/rn-tester/NativeComponentExample/ios/RNTLegacyView.h b/packages/rn-tester/NativeComponentExample/ios/RNTLegacyView.h new file mode 100644 index 00000000000000..dcfe00f2e76862 --- /dev/null +++ b/packages/rn-tester/NativeComponentExample/ios/RNTLegacyView.h @@ -0,0 +1,19 @@ +/* + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +#import +#import + +NS_ASSUME_NONNULL_BEGIN + +@interface RNTLegacyView : UIView + +@property (nonatomic, copy) RCTBubblingEventBlock onColorChanged; + +@end + +NS_ASSUME_NONNULL_END diff --git a/packages/rn-tester/NativeComponentExample/ios/RNTLegacyView.mm b/packages/rn-tester/NativeComponentExample/ios/RNTLegacyView.mm new file mode 100644 index 00000000000000..3577ac72e82cb2 --- /dev/null +++ b/packages/rn-tester/NativeComponentExample/ios/RNTLegacyView.mm @@ -0,0 +1,34 @@ +/* + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +#import "RNTLegacyView.h" + +@implementation RNTLegacyView + +- (void)setBackgroundColor:(UIColor *)backgroundColor +{ + super.backgroundColor = backgroundColor; + [self emitEvent]; +} + +- (void)emitEvent +{ + if (!self.onColorChanged) { + return; + } + CGFloat hue = 0.0; + CGFloat saturation = 0.0; + CGFloat brightness = 0.0; + CGFloat alpha = 0.0; + [self.backgroundColor getHue:&hue saturation:&saturation brightness:&brightness alpha:&alpha]; + self.onColorChanged(@{ + @"backgroundColor" : + @{@"hue" : @(hue), @"saturation" : @(saturation), @"brightness" : @(brightness), @"alpha" : @(alpha)} + }); +} + +@end diff --git a/packages/rn-tester/NativeComponentExample/ios/RNTMyLegacyNativeViewManager.mm b/packages/rn-tester/NativeComponentExample/ios/RNTMyLegacyNativeViewManager.mm index 3540eca3465577..93a65a45e9be0e 100644 --- a/packages/rn-tester/NativeComponentExample/ios/RNTMyLegacyNativeViewManager.mm +++ b/packages/rn-tester/NativeComponentExample/ios/RNTMyLegacyNativeViewManager.mm @@ -8,6 +8,7 @@ #import #import #import +#import "RNTLegacyView.h" #import "RNTMyNativeViewComponentView.h" @interface RNTMyLegacyNativeViewManager : RCTViewManager @@ -22,10 +23,11 @@ @implementation RNTMyLegacyNativeViewManager RCT_REMAP_VIEW_PROPERTY(opacity, alpha, CGFloat) +RCT_EXPORT_VIEW_PROPERTY(onColorChanged, RCTBubblingEventBlock) + - (UIView *)view { - UIView *view = [[UIView alloc] init]; - view.backgroundColor = UIColor.greenColor; + RNTLegacyView *view = [[RNTLegacyView alloc] init]; return view; } diff --git a/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js b/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js index d753339df891fc..3ed7e1f295ffa7 100644 --- a/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js +++ b/packages/rn-tester/NativeComponentExample/js/MyLegacyViewNativeComponent.js @@ -12,10 +12,22 @@ import type {HostComponent} from 'react-native'; import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes'; import {requireNativeComponent} from 'react-native'; +type ColorChangedEvent = { + nativeEvent: { + backgroundColor: { + hue: number, + saturation: number, + brightness: number, + alpha: number, + }, + }, +}; + type NativeProps = $ReadOnly<{| ...ViewProps, opacity?: number, color?: string, + onColorChanged?: (event: ColorChangedEvent) => void, |}>; export type MyLegacyViewType = HostComponent; diff --git a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js index f48233a0829e47..f96a749e486774 100644 --- a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js +++ b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js @@ -26,11 +26,35 @@ const colors = [ '#000033', ]; +class HSBA { + hue: number; + saturation: number; + brightness: number; + alpha: number; + + constructor( + hue: number = 0.0, + saturation: number = 0.0, + brightness: number = 0.0, + alpha: number = 0.0, + ) { + this.hue = hue; + this.saturation = saturation; + this.brightness = brightness; + this.alpha = alpha; + } + + toString(): string { + return `h: ${this.hue}, s: ${this.saturation}, b: ${this.brightness}, a: ${this.alpha}`; + } +} + // This is an example component that migrates to use the new architecture. export default function MyNativeView(props: {}): React.Node { const ref = useRef | null>(null); const [opacity, setOpacity] = useState(1.0); const [color, setColor] = useState('#FF0000'); + const [hsba, setHsba] = useState(new HSBA()); return ( Fabric View @@ -40,7 +64,18 @@ export default function MyNativeView(props: {}): React.Node { style={{flex: 1}} opacity={opacity} color={color} + onColorChanged={event => + setHsba( + new HSBA( + event.nativeEvent.backgroundColor.hue, + event.nativeEvent.backgroundColor.saturation, + event.nativeEvent.backgroundColor.brightness, + event.nativeEvent.backgroundColor.alpha, + ), + ) + } /> + HSBA: {hsba.toString()}