diff --git a/README.md b/README.md
index f4b36e03ef..7b0d9938b9 100644
--- a/README.md
+++ b/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       |
diff --git a/example/src/PickerExample.tsx b/example/src/PickerExample.tsx
index e52fad41b0..ec897a3d4f 100644
--- a/example/src/PickerExample.tsx
+++ b/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,
diff --git a/ios/RNCPickerManager.m b/ios/RNCPickerManager.m
index 6eae8de0a2..be5c37f365 100644
--- a/ios/RNCPickerManager.m
+++ b/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
diff --git a/js/PickerIOS.ios.js b/js/PickerIOS.ios.js
index 00198c720d..0b7ac5061f 100644
--- a/js/PickerIOS.ios.js
+++ b/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}
diff --git a/js/RNCPickerNativeComponent.js b/js/RNCPickerNativeComponent.js
index 47476fdfc6..2b528687e3 100644
--- a/js/RNCPickerNativeComponent.js
+++ b/js/RNCPickerNativeComponent.js
@@ -31,7 +31,7 @@ type RNCPickerIOSTypeItemType = $ReadOnly<{|
 
 type Label = Stringish | number;
 
-type RNCPickerIOSType = HostComponent<
+export type RNCPickerIOSType = HostComponent<
   $ReadOnly<{|
     items: $ReadOnlyArray<RNCPickerIOSTypeItemType>,
     onChange: (event: PickerIOSChangeEvent) => void,
@@ -39,6 +39,7 @@ type RNCPickerIOSType = HostComponent<
     style?: ?TextStyleProp,
     testID?: ?string,
     numberOfLines?: ?number,
+    themeVariant?: ?string,
   |}>,
 >;
 
diff --git a/typings/PickerIOS.d.ts b/typings/PickerIOS.d.ts
index f808c0e2d7..0f928f0e36 100644
--- a/typings/PickerIOS.d.ts
+++ b/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, {}> {