diff --git a/FabricExample/.bundle/config b/FabricExample/.bundle/config
new file mode 100644
index 0000000000..848943bb52
--- /dev/null
+++ b/FabricExample/.bundle/config
@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1
diff --git a/FabricExample/.eslintrc.js b/FabricExample/.eslintrc.js
new file mode 100644
index 0000000000..187894b6af
--- /dev/null
+++ b/FabricExample/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+ root: true,
+ extends: '@react-native',
+};
diff --git a/FabricExample/.gitignore b/FabricExample/.gitignore
new file mode 100644
index 0000000000..0cab2ac6fc
--- /dev/null
+++ b/FabricExample/.gitignore
@@ -0,0 +1,66 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+ios/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+/ios/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage
diff --git a/FabricExample/.prettierrc.js b/FabricExample/.prettierrc.js
new file mode 100644
index 0000000000..2b540746a7
--- /dev/null
+++ b/FabricExample/.prettierrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+ arrowParens: 'avoid',
+ bracketSameLine: true,
+ bracketSpacing: false,
+ singleQuote: true,
+ trailingComma: 'all',
+};
diff --git a/FabricExample/.watchmanconfig b/FabricExample/.watchmanconfig
new file mode 100644
index 0000000000..0967ef424b
--- /dev/null
+++ b/FabricExample/.watchmanconfig
@@ -0,0 +1 @@
+{}
diff --git a/FabricExample/App.tsx b/FabricExample/App.tsx
new file mode 100644
index 0000000000..8dc8080f6c
--- /dev/null
+++ b/FabricExample/App.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import {
+ Platform,
+ ScrollView,
+ StyleSheet,
+ Text,
+ View,
+ SafeAreaView,
+ I18nManager,
+ Switch,
+} from 'react-native';
+
+import * as PickerExamples from './PickerExample';
+import * as PickerIOSExamples from './PickerIOSExample';
+
+export default function App() {
+ const [isRTL, setIsRTL] = React.useState(I18nManager.isRTL);
+ React.useEffect(() => {
+ I18nManager.allowRTL(true);
+ }, []);
+
+ return (
+
+
+
+ {
+ setIsRTL(newValue);
+ I18nManager.forceRTL(newValue);
+ }}
+ />
+ {I18nManager.isRTL ? 'RTL' : 'LTR'}
+
+
+ Picker Examples
+ {PickerExamples.examples.map((element) => (
+
+ {element.title}
+ {element.render()}
+
+ ))}
+ {Platform.OS === 'ios' && (
+ PickerIOS Examples
+ )}
+ {Platform.OS === 'ios' &&
+ PickerIOSExamples.examples.map((element) => (
+
+ {element.title}
+ {element.render()}
+
+ ))}
+ {Platform.OS === 'windows' && (
+ PickerWindows Examples
+ )}
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ main: {
+ backgroundColor: '#F5FCFF',
+ },
+ container: {
+ padding: 24,
+ paddingBottom: 60,
+ },
+ title: {
+ fontSize: 18,
+ },
+ elementContainer: {
+ marginTop: 8,
+ },
+ heading: {
+ fontSize: 22,
+ color: 'black',
+ },
+ rtlSwitchContainer: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ paddingHorizontal: 40,
+ paddingTop: 20,
+ },
+});
diff --git a/FabricExample/Gemfile b/FabricExample/Gemfile
new file mode 100644
index 0000000000..6a7d5c7a49
--- /dev/null
+++ b/FabricExample/Gemfile
@@ -0,0 +1,7 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+gem 'cocoapods', '~> 1.13'
+gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'
diff --git a/FabricExample/Gemfile.lock b/FabricExample/Gemfile.lock
new file mode 100644
index 0000000000..c8cfb316ed
--- /dev/null
+++ b/FabricExample/Gemfile.lock
@@ -0,0 +1,99 @@
+GEM
+ remote: https://rubygems.org/
+ specs:
+ CFPropertyList (3.0.6)
+ rexml
+ activesupport (7.0.8)
+ concurrent-ruby (~> 1.0, >= 1.0.2)
+ i18n (>= 1.6, < 2)
+ minitest (>= 5.1)
+ tzinfo (~> 2.0)
+ addressable (2.8.5)
+ public_suffix (>= 2.0.2, < 6.0)
+ algoliasearch (1.27.5)
+ httpclient (~> 2.8, >= 2.8.3)
+ json (>= 1.5.1)
+ atomos (0.1.3)
+ claide (1.1.0)
+ cocoapods (1.14.3)
+ addressable (~> 2.8)
+ claide (>= 1.0.2, < 2.0)
+ cocoapods-core (= 1.14.3)
+ cocoapods-deintegrate (>= 1.0.3, < 2.0)
+ cocoapods-downloader (>= 2.1, < 3.0)
+ cocoapods-plugins (>= 1.0.0, < 2.0)
+ cocoapods-search (>= 1.0.0, < 2.0)
+ cocoapods-trunk (>= 1.6.0, < 2.0)
+ cocoapods-try (>= 1.1.0, < 2.0)
+ colored2 (~> 3.1)
+ escape (~> 0.0.4)
+ fourflusher (>= 2.3.0, < 3.0)
+ gh_inspector (~> 1.0)
+ molinillo (~> 0.8.0)
+ nap (~> 1.0)
+ ruby-macho (>= 2.3.0, < 3.0)
+ xcodeproj (>= 1.23.0, < 2.0)
+ cocoapods-core (1.14.3)
+ activesupport (>= 5.0, < 8)
+ addressable (~> 2.8)
+ algoliasearch (~> 1.0)
+ concurrent-ruby (~> 1.1)
+ fuzzy_match (~> 2.0.4)
+ nap (~> 1.0)
+ netrc (~> 0.11)
+ public_suffix (~> 4.0)
+ typhoeus (~> 1.0)
+ cocoapods-deintegrate (1.0.5)
+ cocoapods-downloader (2.1)
+ cocoapods-plugins (1.0.0)
+ nap
+ cocoapods-search (1.0.1)
+ cocoapods-trunk (1.6.0)
+ nap (>= 0.8, < 2.0)
+ netrc (~> 0.11)
+ cocoapods-try (1.2.0)
+ colored2 (3.1.2)
+ concurrent-ruby (1.2.2)
+ escape (0.0.4)
+ ethon (0.16.0)
+ ffi (>= 1.15.0)
+ ffi (1.16.3)
+ fourflusher (2.3.1)
+ fuzzy_match (2.0.4)
+ gh_inspector (1.1.3)
+ httpclient (2.8.3)
+ i18n (1.14.1)
+ concurrent-ruby (~> 1.0)
+ json (2.6.3)
+ minitest (5.20.0)
+ molinillo (0.8.0)
+ nanaimo (0.3.0)
+ nap (1.1.0)
+ netrc (0.11.0)
+ public_suffix (4.0.7)
+ rexml (3.2.6)
+ ruby-macho (2.5.1)
+ typhoeus (1.4.1)
+ ethon (>= 0.9.0)
+ tzinfo (2.0.6)
+ concurrent-ruby (~> 1.0)
+ xcodeproj (1.23.0)
+ CFPropertyList (>= 2.3.3, < 4.0)
+ atomos (~> 0.1.3)
+ claide (>= 1.0.2, < 2.0)
+ colored2 (~> 3.1)
+ nanaimo (~> 0.3.0)
+ rexml (~> 3.2.4)
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ activesupport (>= 6.1.7.3, < 7.1.0)
+ cocoapods (~> 1.13)
+
+RUBY VERSION
+ ruby 2.7.5p203
+
+BUNDLED WITH
+ 2.1.4
diff --git a/FabricExample/PickerExample.tsx b/FabricExample/PickerExample.tsx
new file mode 100644
index 0000000000..578bfb2368
--- /dev/null
+++ b/FabricExample/PickerExample.tsx
@@ -0,0 +1,326 @@
+import * as React from 'react';
+import {Text, View, StyleSheet, Button} from 'react-native';
+import {Picker} from '@react-native-picker/picker';
+
+const Item: any = Picker.Item;
+
+export function BasicPickerExample() {
+ const [value, setValue] = React.useState('key1');
+ return (
+ setValue(v)}
+ accessibilityLabel="Basic Picker Accessibility Label"
+ >
+
+
+
+ );
+}
+
+function StyledPickerExample() {
+ const [value, setValue] = React.useState('key1');
+ return (
+ setValue(v)}
+ accessibilityLabel="Styled Picker Accessibility Label"
+ >
+
+
+
+
+ );
+}
+
+function DisabledPickerExample() {
+ const [value] = React.useState('key1');
+
+ return (
+
+
+
+
+ );
+}
+
+function DisabledSpecificPickerExample() {
+ const [value] = React.useState('key1');
+
+ return (
+
+
+
+
+
+ );
+}
+
+function DropdownPickerExample() {
+ const [value, setValue] = React.useState('key1');
+
+ return (
+ setValue(v)}
+ mode="dropdown"
+ >
+
+
+
+ );
+}
+
+function DropdownMultilinePickerExample() {
+ const [value, setValue] = React.useState('key1');
+
+ return (
+ setValue(v)}
+ mode="dropdown"
+ >
+
+
+
+ );
+}
+
+function PromptPickerExample() {
+ const [value, setValue] = React.useState('key1');
+ return (
+ setValue(v)}
+ prompt="Pick one, just one"
+ >
+
+
+
+ );
+}
+
+function PromptMultilinePickerExample() {
+ const [value, setValue] = React.useState('key1');
+ return (
+ setValue(v)}
+ prompt="Pick one, just one"
+ >
+
+
+
+ );
+}
+
+function CustomDropdownArrowColorPickerExample() {
+ return (
+
+
+
+
+
+
+ );
+}
+
+function NoListenerPickerExample() {
+ return (
+
+
+
+
+
+
+ Cannot change the value of this picker because it doesn't update
+ selectedValue.
+
+
+ );
+}
+
+function ThemeVariantOverridePickerExample() {
+ const [themeVariantValue, setThemeVariantValue] = React.useState('dark');
+ const isDarkMode = themeVariantValue === 'dark';
+
+ const handleSelect = ({nativeEvent: {newValue}}) =>
+ setThemeVariantValue(newValue);
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+function ColorPickerExample() {
+ const [value, setValue] = React.useState('red');
+ const [isFocused, setIsFocused] = React.useState(false);
+ const [isSecondFocused, setIsSecondFocused] = React.useState(false);
+ const pickerRef = React.useRef(null);
+
+ return (
+ <>
+