feat: Allow overriding theme variant used by native ios picker (#354)

Author: coffe0wl

README.md

@@ -387,6 +387,7 @@ If set to false, the specific item will be disabled, i.e. the user will not be a
 - [`itemStyle`](#itemstyle)
 - [`onValueChange`](#onvaluechange)
 - [`selectedValue`](#selectedvalue)
+- [`themeVariant`](#themeVariant)
 
 ---
 
@@ -416,4 +417,10 @@ If set to false, the specific item will be disabled, i.e. the user will not be a
 | ---- | -------- |
 | any  | No       |
 
-  
+---
+
+### `themeVariant`
+
+| Type | Required |
+| ---- | -------- |
+|  enum('light', 'dark')  | No       |

example/src/PickerExample.tsx

@@ -165,6 +165,35 @@ function NoListenerPickerExample() {
   );
 }
 
+function ThemeVariantOverridePickerExample() {
+  const [themeVariantValue, setThemeVariantValue] = React.useState('dark');
+  const isDarkMode = themeVariantValue === 'dark';
+
+  const handleSelect = ({nativeEvent: {newValue}}) =>
+    setThemeVariantValue(newValue);
+
+  return (
+    <View style={{backgroundColor: isDarkMode ? 'black' : 'transparent'}}>
+      <Picker
+        selectedValue={themeVariantValue}
+        selectedColor={'white'}
+        themeVariant={themeVariantValue}
+        onChange={handleSelect}>
+        <Item
+          color={isDarkMode ? 'white' : 'black'}
+          label="Dark mode"
+          value="dark"
+        />
+        <Item
+          color={isDarkMode ? 'white' : 'black'}
+          label="Light mode"
+          value="light"
+        />
+      </Picker>
+    </View>
+  );
+}
+
 function ColorPickerExample() {
   const [value, setValue] = React.useState('red');
   const [isFocused, setIsFocused] = React.useState(false);
@@ -245,6 +274,10 @@ export const examples = [
     title: 'Styled Picker',
     render: StyledPickerExample,
   },
+  {
+    title: 'Picker with overrided theme variant',
+    render: ThemeVariantOverridePickerExample,
+  },
   {
     title: 'Disabled Picker',
     render: DisabledPickerExample,

ios/RNCPickerManager.m

@@ -42,5 +42,18 @@ - (UIView *)view
 {
   view.font = [RCTFont updateFont:view.font withFamily:json ?: defaultView.font.familyName];
 }
+RCT_CUSTOM_VIEW_PROPERTY(themeVariant, NSString, RNCPicker)
+{
+    if (@available(iOS 13.4, *)) {
+            if (json) {
+                if ([json isEqual:@"dark"])
+                    view.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;
+                else if ([json isEqual:@"light"])
+                    view.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
+                else
+                    view.overrideUserInterfaceStyle = UIUserInterfaceStyleUnspecified;
+            }
+        }
+}
 
 @end

js/PickerIOS.ios.js

@@ -16,6 +16,7 @@
 import * as React from 'react';
 import {processColor, StyleSheet, View} from 'react-native';
 import RNCPickerNativeComponent from './RNCPickerNativeComponent';
+import type {RNCPickerIOSType} from './RNCPickerNativeComponent';
 
 import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
@@ -38,17 +39,6 @@ type RNCPickerIOSItemType = $ReadOnly<{|
   testID: ?string,
 |}>;
 
-type RNCPickerIOSType = HostComponent<
-  $ReadOnly<{|
-    items: $ReadOnlyArray<RNCPickerIOSItemType>,
-    onChange: (event: PickerIOSChangeEvent) => void,
-    selectedIndex: number,
-    style?: ?TextStyleProp,
-    testID?: ?string,
-    numberOfLines?: ?number,
-  |}>,
->;
-
 type Label = Stringish | number;
 
 type Props = $ReadOnly<{|
@@ -59,6 +49,7 @@ type Props = $ReadOnly<{|
   onValueChange?: ?(itemValue: string | number, itemIndex: number) => mixed,
   selectedValue: ?(number | string),
   numberOfLines: ?number,
+  themeVariant: ?string,
 |}>;
 
 type State = {|
@@ -115,6 +106,7 @@ class PickerIOS extends React.Component<Props, State> {
           ref={(picker) => {
             this._picker = picker;
           }}
+          themeVariant={this.props.themeVariant}
           testID={this.props.testID}
           style={[styles.pickerIOS, this.props.itemStyle]}
           items={this.state.items}

js/RNCPickerNativeComponent.js

@@ -31,14 +31,15 @@ type RNCPickerIOSTypeItemType = $ReadOnly<{|
 
 type Label = Stringish | number;
 
-type RNCPickerIOSType = HostComponent<
+export type RNCPickerIOSType = HostComponent<
   $ReadOnly<{|
     items: $ReadOnlyArray<RNCPickerIOSTypeItemType>,
     onChange: (event: PickerIOSChangeEvent) => void,
     selectedIndex: number,
     style?: ?TextStyleProp,
     testID?: ?string,
     numberOfLines?: ?number,
+    themeVariant?: ?string,
   |}>,
 >;
 

typings/PickerIOS.d.ts

@@ -19,6 +19,7 @@ export interface PickerIOSProps extends ViewProps {
 	selectedValue?: ItemValue;
 	testID?: string;
 	numberOfLines?: number;
+	themeVariant ?: string;
 }
 
 declare class PickerIOS extends React.Component<PickerIOSProps, {}> {