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 ( + <> +