feat: enhance SwiftUIPicker with onChange event and tint support

Author: mgcrea

example/src/views/StandalonePickerExample.tsx

@@ -42,10 +42,8 @@ export const StandalonePickerExample: FunctionComponent = () => {
             selection={pickerStyle}
             options={['default', 'inline', 'menu', 'segmented', 'wheel']}
             pickerStyle="segmented"
-            onNativeChange={event =>
-              setPickerStyle(event.nativeEvent.value as typeof pickerStyle)
-            }
-            style={styles.picker}
+            onChange={value => setPickerStyle(value as typeof pickerStyle)}
+            style={[styles.picker, { tint: '#fb7185' }]}
           />
         </View>
 
@@ -57,8 +55,8 @@ export const StandalonePickerExample: FunctionComponent = () => {
             selection={selectedFruit}
             options={['Apple', 'Banana', 'Orange', 'Grape', 'Mango']}
             pickerStyle={pickerStyle}
-            onNativeChange={event => setSelectedFruit(event.nativeEvent.value)}
-            style={styles.picker}
+            onChange={value => setSelectedFruit(value)}
+            style={[styles.picker, { tint: '#22d3ee' }]}
           />
         </View>
 
@@ -70,8 +68,8 @@ export const StandalonePickerExample: FunctionComponent = () => {
             selection={selectedColor}
             options={['Red', 'Blue', 'Green', 'Yellow', 'Purple']}
             pickerStyle={pickerStyle}
-            onNativeChange={event => setSelectedColor(event.nativeEvent.value)}
-            style={styles.picker}
+            onChange={value => setSelectedColor(value)}
+            style={[styles.picker, { tint: '#a855f7' }]}
           />
         </View>
 
@@ -83,7 +81,7 @@ export const StandalonePickerExample: FunctionComponent = () => {
             selection={selectedSize}
             options={['Small', 'Medium', 'Large', 'Extra Large']}
             pickerStyle={pickerStyle}
-            onNativeChange={event => setSelectedSize(event.nativeEvent.value)}
+            onChange={value => setSelectedSize(value)}
             style={styles.picker}
           />
         </View>

ios/components/Picker/PickerProps.swift

@@ -104,13 +104,25 @@ public final class PickerProps: ObservableObject, Decodable {
   public init() {}
 
   public func merge(from other: PickerProps) {
-    options = other.options
-    selection = other.selection
-    config = other.config
-    label = other.label
+    if options != other.options {
+      options = other.options
+    }
+    if selection != other.selection {
+      selection = other.selection
+    }
+    if config != other.config {
+      config = other.config
+    }
+    if label != other.label {
+      label = other.label
+    }
     labelColor = other.labelColor
-    pickerStyle = other.pickerStyle
-    disabled = other.disabled
+    if pickerStyle != other.pickerStyle {
+      pickerStyle = other.pickerStyle
+    }
+    if disabled != other.disabled {
+      disabled = other.disabled
+    }
     style = other.style
   }
 }

ios/components/StyleProps.swift

@@ -4,6 +4,7 @@ public struct StyleProps: Decodable {
   // ViewStyle
   public var color: ColorValue? // alias for foregroundColor
   public var accentColor: ColorValue?
+  public var tint: ColorValue?
   public var tintColor: ColorValue?
   public var foregroundColor: ColorValue?
   public var backgroundColor: ColorValue?
@@ -42,7 +43,7 @@ public struct StyleProps: Decodable {
   public var textAlign: TextAlignment?
 
   enum CodingKeys: String, CodingKey {
-    case color, accentColor, tintColor, backgroundColor, preferredColorScheme, foregroundColor, width, minWidth, maxWidth, height, minHeight, maxHeight, position, top, left, bottom, right, padding, paddingHorizontal, paddingVertical, paddingLeft, paddingRight, paddingTop, paddingBottom, borderColor, borderWidth, borderRadius, cornerRadius, fontWeight, fontSize, font, fontFamily, textAlign
+    case color, accentColor, tint, tintColor, backgroundColor, preferredColorScheme, foregroundColor, width, minWidth, maxWidth, height, minHeight, maxHeight, position, top, left, bottom, right, padding, paddingHorizontal, paddingVertical, paddingLeft, paddingRight, paddingTop, paddingBottom, borderColor, borderWidth, borderRadius, cornerRadius, fontWeight, fontSize, font, fontFamily, textAlign
   }
 
   public init(from decoder: Decoder) throws {
@@ -51,6 +52,7 @@ public struct StyleProps: Decodable {
     // ViewStyle
     color = try container.decodeIfPresent(ColorValue.self, forKey: .color) // alias for foregroundColor
     accentColor = try container.decodeIfPresent(ColorValue.self, forKey: .accentColor)
+    tint = try container.decodeIfPresent(ColorValue.self, forKey: .tint)
     tintColor = try container.decodeIfPresent(ColorValue.self, forKey: .tintColor)
     foregroundColor = try container.decodeIfPresent(ColorValue.self, forKey: .foregroundColor)
     backgroundColor = try container.decodeIfPresent(ColorValue.self, forKey: .backgroundColor)

ios/extensions/View+Styling.swift

@@ -81,7 +81,9 @@ extension View {
           .applyIf(style.backgroundColor != nil) { $0.background(Color(value: style.backgroundColor!)) }
           .applyIf(style.color != nil || style.foregroundColor != nil) { $0.foregroundStyle(Color(value: style.color ?? style.foregroundColor!)) }
           .applyIf(style.accentColor != nil) { $0.accentColor(Color(value: style.accentColor!)) }
-          .applyIf(style.tintColor != nil) { $0.tint(Color(value: style.tintColor!)) }
+          .applyIf(style.tint != nil || style.tintColor != nil) {
+            $0.tint(Color(value: style.tint ?? style.tintColor!))
+          }
           .applyIf(style.preferredColorScheme != nil) { $0.preferredColorScheme(style.preferredColorScheme!) }
           .applyIf(style.borderWidth != nil) { view in
             view.overlay(

src/SwiftUIPicker.tsx

@@ -5,6 +5,7 @@ import NativePickerViewNativeComponent, {
   type NativePickerProps,
   type NativePickerStyle,
 } from "./native/PickerViewNativeComponent";
+import { NativeTextStyle } from "./types";
 
 type NativePickerComponentRef = React.ComponentRef<typeof NativePickerViewNativeComponent>;
 
@@ -16,14 +17,35 @@ const DEFAULT_HEIGHTS: Record<NativePickerStyle, number> = {
   wheel: 216,
 };
 
-export const SwiftUIPicker = forwardRef<NativePickerComponentRef, NativePickerProps>(
-  ({ pickerStyle, style, ...restProps }, ref) => {
+type NativeOnChangeEvent = Parameters<NonNullable<NativePickerProps["onNativeChange"]>>[0];
+
+export type SwiftUIPickerProps = Omit<
+  NativePickerProps,
+  "onNativeChange" | "onNativeFocus" | "onNativeBlur" | "style"
+> & {
+  onChange?: (value: string, event: NativeOnChangeEvent) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  style?: StyleProp<ViewStyle & Pick<NativeTextStyle, "tint">>;
+};
+
+export const SwiftUIPicker = forwardRef<NativePickerComponentRef, SwiftUIPickerProps>(
+  ({ pickerStyle, style, onChange, onFocus, onBlur, ...restProps }, ref) => {
     const defaultHeight = DEFAULT_HEIGHTS[pickerStyle ?? "default"];
     const composedStyle: StyleProp<ViewStyle> = [{ minHeight: defaultHeight }, style];
 
     return (
       <NativePickerViewNativeComponent
         {...restProps}
+        onNativeChange={
+          onChange
+            ? (event) => {
+                onChange(event.nativeEvent.value, event);
+              }
+            : undefined
+        }
+        onNativeFocus={onFocus ?? undefined}
+        onNativeBlur={onBlur ?? undefined}
         pickerStyle={pickerStyle}
         style={composedStyle}
         ref={ref}

src/types/style.ts

@@ -25,6 +25,7 @@ export type NativeViewStyle = Pick<
   | "right"
   | "bottom"
 > & {
+  tint?: ColorValue;
   tintColor?: ColorValue;
   accentColor?: ColorValue;
   foregroundColor?: ColorValue;