├── Example ├── .bundle │ └── config ├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.tsx ├── Gemfile ├── Gemfile.lock ├── README.md ├── __tests__ │ └── App.test.tsx ├── android │ ├── app │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── king │ │ │ │ └── ReactNativeFlipper.java │ │ │ ├── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── king │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ │ ├── drawable │ │ │ │ └── rn_edit_text_material.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ │ └── release │ │ │ └── java │ │ │ └── com │ │ │ └── king │ │ │ └── ReactNativeFlipper.java │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── example │ ├── dog.png │ ├── index.tsx │ └── test_data │ │ ├── cascade_position.json │ │ ├── parallel_sku.json │ │ └── parallel_time.json ├── index.HTML ├── index.js ├── ios │ ├── .xcode.env │ ├── King.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── King.xcscheme │ ├── King.xcworkspace │ │ └── contents.xcworkspacedata │ ├── King │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── main.m │ ├── KingTests │ │ ├── Info.plist │ │ └── KingTests.m │ ├── Podfile │ └── Podfile.lock ├── jest.config.js ├── metro.config.js ├── package-lock.json ├── package.json ├── src │ ├── README.md │ ├── core │ │ ├── Header.tsx │ │ ├── PureCascade.tsx │ │ ├── PureParallel.tsx │ │ ├── Wheel.tsx │ │ └── mask.tsx │ ├── index.tsx │ └── type.d.ts ├── tsconfig.json └── yarn.lock ├── README.md ├── README_CN.md ├── example_pic.gif ├── package.json └── src ├── README.md ├── core ├── Header.tsx ├── PureCascade.tsx ├── PureParallel.tsx ├── Wheel.tsx └── mask.tsx ├── index.tsx └── type.d.ts /Example/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /Example/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native', 4 | }; 5 | -------------------------------------------------------------------------------- /Example/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | ios/.xcode.env.local 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | *.hprof 33 | .cxx/ 34 | *.keystore 35 | !debug.keystore 36 | 37 | # node.js 38 | # 39 | node_modules/ 40 | npm-debug.log 41 | yarn-error.log 42 | 43 | # fastlane 44 | # 45 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 46 | # screenshots whenever they are needed. 47 | # For more information about the recommended setup visit: 48 | # https://docs.fastlane.tools/best-practices/source-control/ 49 | 50 | **/fastlane/report.xml 51 | **/fastlane/Preview.html 52 | **/fastlane/screenshots 53 | **/fastlane/test_output 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # Ruby / CocoaPods 59 | /ios/Pods/ 60 | /vendor/bundle/ 61 | 62 | # Temporary files created by Metro to check the health of the file watcher 63 | .metro-health-check* 64 | 65 | # testing 66 | /coverage 67 | -------------------------------------------------------------------------------- /Example/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /Example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /Example/App.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | import React from 'react'; 9 | import type {PropsWithChildren} from 'react'; 10 | import { 11 | SafeAreaView, 12 | ScrollView, 13 | StatusBar, 14 | StyleSheet, 15 | Text, 16 | useColorScheme, 17 | View, 18 | } from 'react-native'; 19 | 20 | import { 21 | Colors, 22 | DebugInstructions, 23 | Header, 24 | LearnMoreLinks, 25 | ReloadInstructions, 26 | } from 'react-native/Libraries/NewAppScreen'; 27 | 28 | type SectionProps = PropsWithChildren<{ 29 | title: string; 30 | }>; 31 | 32 | function Section({children, title}: SectionProps): JSX.Element { 33 | const isDarkMode = useColorScheme() === 'dark'; 34 | return ( 35 | 36 | 43 | {title} 44 | 45 | 52 | {children} 53 | 54 | 55 | ); 56 | } 57 | 58 | function App(): JSX.Element { 59 | const isDarkMode = useColorScheme() === 'dark'; 60 | 61 | const backgroundStyle = { 62 | backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, 63 | }; 64 | 65 | return ( 66 | 67 | 71 | 74 |
75 | 79 |
80 | Edit App.tsx to change this 81 | screen and then come back to see your edits. 82 |
83 |
84 | 85 |
86 |
87 | 88 |
89 |
90 | Read the docs to discover what to do next: 91 |
92 | 93 |
94 | 95 | 96 | ); 97 | } 98 | 99 | const styles = StyleSheet.create({ 100 | sectionContainer: { 101 | marginTop: 32, 102 | paddingHorizontal: 24, 103 | }, 104 | sectionTitle: { 105 | fontSize: 24, 106 | fontWeight: '600', 107 | }, 108 | sectionDescription: { 109 | marginTop: 8, 110 | fontSize: 18, 111 | fontWeight: '400', 112 | }, 113 | highlight: { 114 | fontWeight: '700', 115 | }, 116 | }); 117 | 118 | export default App; 119 | -------------------------------------------------------------------------------- /Example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby ">= 2.6.10" 5 | 6 | gem 'cocoapods', '~> 1.13' 7 | gem 'activesupport', '>= 6.1.7.3', '< 7.1.0' 8 | -------------------------------------------------------------------------------- /Example/Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | CFPropertyList (3.0.6) 5 | rexml 6 | activesupport (6.1.7.6) 7 | concurrent-ruby (~> 1.0, >= 1.0.2) 8 | i18n (>= 1.6, < 2) 9 | minitest (>= 5.1) 10 | tzinfo (~> 2.0) 11 | zeitwerk (~> 2.3) 12 | addressable (2.8.5) 13 | public_suffix (>= 2.0.2, < 6.0) 14 | algoliasearch (1.27.5) 15 | httpclient (~> 2.8, >= 2.8.3) 16 | json (>= 1.5.1) 17 | atomos (0.1.3) 18 | claide (1.1.0) 19 | cocoapods (1.13.0) 20 | addressable (~> 2.8) 21 | claide (>= 1.0.2, < 2.0) 22 | cocoapods-core (= 1.13.0) 23 | cocoapods-deintegrate (>= 1.0.3, < 2.0) 24 | cocoapods-downloader (>= 1.6.0, < 2.0) 25 | cocoapods-plugins (>= 1.0.0, < 2.0) 26 | cocoapods-search (>= 1.0.0, < 2.0) 27 | cocoapods-trunk (>= 1.6.0, < 2.0) 28 | cocoapods-try (>= 1.1.0, < 2.0) 29 | colored2 (~> 3.1) 30 | escape (~> 0.0.4) 31 | fourflusher (>= 2.3.0, < 3.0) 32 | gh_inspector (~> 1.0) 33 | molinillo (~> 0.8.0) 34 | nap (~> 1.0) 35 | ruby-macho (>= 2.3.0, < 3.0) 36 | xcodeproj (>= 1.23.0, < 2.0) 37 | cocoapods-core (1.13.0) 38 | activesupport (>= 5.0, < 8) 39 | addressable (~> 2.8) 40 | algoliasearch (~> 1.0) 41 | concurrent-ruby (~> 1.1) 42 | fuzzy_match (~> 2.0.4) 43 | nap (~> 1.0) 44 | netrc (~> 0.11) 45 | public_suffix (~> 4.0) 46 | typhoeus (~> 1.0) 47 | cocoapods-deintegrate (1.0.5) 48 | cocoapods-downloader (1.6.3) 49 | cocoapods-plugins (1.0.0) 50 | nap 51 | cocoapods-search (1.0.1) 52 | cocoapods-trunk (1.6.0) 53 | nap (>= 0.8, < 2.0) 54 | netrc (~> 0.11) 55 | cocoapods-try (1.2.0) 56 | colored2 (3.1.2) 57 | concurrent-ruby (1.2.2) 58 | escape (0.0.4) 59 | ethon (0.16.0) 60 | ffi (>= 1.15.0) 61 | ffi (1.16.3) 62 | fourflusher (2.3.1) 63 | fuzzy_match (2.0.4) 64 | gh_inspector (1.1.3) 65 | httpclient (2.8.3) 66 | i18n (1.14.1) 67 | concurrent-ruby (~> 1.0) 68 | json (2.6.3) 69 | minitest (5.20.0) 70 | molinillo (0.8.0) 71 | nanaimo (0.3.0) 72 | nap (1.1.0) 73 | netrc (0.11.0) 74 | public_suffix (4.0.7) 75 | rexml (3.2.6) 76 | ruby-macho (2.5.1) 77 | typhoeus (1.4.0) 78 | ethon (>= 0.9.0) 79 | tzinfo (2.0.6) 80 | concurrent-ruby (~> 1.0) 81 | xcodeproj (1.23.0) 82 | CFPropertyList (>= 2.3.3, < 4.0) 83 | atomos (~> 0.1.3) 84 | claide (>= 1.0.2, < 2.0) 85 | colored2 (~> 3.1) 86 | nanaimo (~> 0.3.0) 87 | rexml (~> 3.2.4) 88 | zeitwerk (2.6.12) 89 | 90 | PLATFORMS 91 | ruby 92 | 93 | DEPENDENCIES 94 | activesupport (>= 6.1.7.3, < 7.1.0) 95 | cocoapods (~> 1.13) 96 | 97 | RUBY VERSION 98 | ruby 2.6.10p210 99 | 100 | BUNDLED WITH 101 | 1.17.2 102 | -------------------------------------------------------------------------------- /Example/README.md: -------------------------------------------------------------------------------- 1 | This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). 2 | 3 | # Getting Started 4 | 5 | >**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding. 6 | 7 | ## Step 1: Start the Metro Server 8 | 9 | First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native. 10 | 11 | To start Metro, run the following command from the _root_ of your React Native project: 12 | 13 | ```bash 14 | # using npm 15 | npm start 16 | 17 | # OR using Yarn 18 | yarn start 19 | ``` 20 | 21 | ## Step 2: Start your Application 22 | 23 | Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app: 24 | 25 | ### For Android 26 | 27 | ```bash 28 | # using npm 29 | npm run android 30 | 31 | # OR using Yarn 32 | yarn android 33 | ``` 34 | 35 | ### For iOS 36 | 37 | ```bash 38 | # using npm 39 | npm run ios 40 | 41 | # OR using Yarn 42 | yarn ios 43 | ``` 44 | 45 | If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly. 46 | 47 | This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively. 48 | 49 | ## Step 3: Modifying your App 50 | 51 | Now that you have successfully run the app, let's modify it. 52 | 53 | 1. Open `App.tsx` in your text editor of choice and edit some lines. 54 | 2. For **Android**: Press the R key twice or select **"Reload"** from the **Developer Menu** (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes! 55 | 56 | For **iOS**: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes! 57 | 58 | ## Congratulations! :tada: 59 | 60 | You've successfully run and modified your React Native App. :partying_face: 61 | 62 | ### Now what? 63 | 64 | - If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). 65 | - If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started). 66 | 67 | # Troubleshooting 68 | 69 | If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. 70 | 71 | # Learn More 72 | 73 | To learn more about React Native, take a look at the following resources: 74 | 75 | - [React Native Website](https://reactnative.dev) - learn more about React Native. 76 | - [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. 77 | - [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. 78 | - [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. 79 | - [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. 80 | -------------------------------------------------------------------------------- /Example/__tests__/App.test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: import explicitly to use the types shiped with jest. 10 | import {it} from '@jest/globals'; 11 | 12 | // Note: test renderer must be required after react-native. 13 | import renderer from 'react-test-renderer'; 14 | 15 | it('renders correctly', () => { 16 | renderer.create(); 17 | }); 18 | -------------------------------------------------------------------------------- /Example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | apply plugin: "com.facebook.react" 3 | 4 | /** 5 | * This is the configuration block to customize your React Native Android app. 6 | * By default you don't need to apply any configuration, just uncomment the lines you need. 7 | */ 8 | react { 9 | /* Folders */ 10 | // The root of your project, i.e. where "package.json" lives. Default is '..' 11 | // root = file("../") 12 | // The folder where the react-native NPM package is. Default is ../node_modules/react-native 13 | // reactNativeDir = file("../node_modules/react-native") 14 | // The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen 15 | // codegenDir = file("../node_modules/@react-native/codegen") 16 | // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js 17 | // cliFile = file("../node_modules/react-native/cli.js") 18 | 19 | /* Variants */ 20 | // The list of variants to that are debuggable. For those we're going to 21 | // skip the bundling of the JS bundle and the assets. By default is just 'debug'. 22 | // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants. 23 | // debuggableVariants = ["liteDebug", "prodDebug"] 24 | 25 | /* Bundling */ 26 | // A list containing the node command and its flags. Default is just 'node'. 27 | // nodeExecutableAndArgs = ["node"] 28 | // 29 | // The command to run when bundling. By default is 'bundle' 30 | // bundleCommand = "ram-bundle" 31 | // 32 | // The path to the CLI configuration file. Default is empty. 33 | // bundleConfig = file(../rn-cli.config.js) 34 | // 35 | // The name of the generated asset file containing your JS bundle 36 | // bundleAssetName = "MyApplication.android.bundle" 37 | // 38 | // The entry file for bundle generation. Default is 'index.android.js' or 'index.js' 39 | // entryFile = file("../js/MyApplication.android.js") 40 | // 41 | // A list of extra flags to pass to the 'bundle' commands. 42 | // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle 43 | // extraPackagerArgs = [] 44 | 45 | /* Hermes Commands */ 46 | // The hermes compiler command to run. By default it is 'hermesc' 47 | // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc" 48 | // 49 | // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map" 50 | // hermesFlags = ["-O", "-output-source-map"] 51 | } 52 | 53 | /** 54 | * Set this to true to Run Proguard on Release builds to minify the Java bytecode. 55 | */ 56 | def enableProguardInReleaseBuilds = false 57 | 58 | /** 59 | * The preferred build flavor of JavaScriptCore (JSC) 60 | * 61 | * For example, to use the international variant, you can use: 62 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 63 | * 64 | * The international variant includes ICU i18n library and necessary data 65 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 66 | * give correct results when using with locales other than en-US. Note that 67 | * this variant is about 6MiB larger per architecture than default. 68 | */ 69 | def jscFlavor = 'org.webkit:android-jsc:+' 70 | 71 | android { 72 | ndkVersion rootProject.ext.ndkVersion 73 | 74 | compileSdkVersion rootProject.ext.compileSdkVersion 75 | 76 | namespace "com.king" 77 | defaultConfig { 78 | applicationId "com.king" 79 | minSdkVersion rootProject.ext.minSdkVersion 80 | targetSdkVersion rootProject.ext.targetSdkVersion 81 | versionCode 1 82 | versionName "1.0" 83 | } 84 | signingConfigs { 85 | debug { 86 | storeFile file('debug.keystore') 87 | storePassword 'android' 88 | keyAlias 'androiddebugkey' 89 | keyPassword 'android' 90 | } 91 | } 92 | buildTypes { 93 | debug { 94 | signingConfig signingConfigs.debug 95 | } 96 | release { 97 | // Caution! In production, you need to generate your own keystore file. 98 | // see https://reactnative.dev/docs/signed-apk-android. 99 | signingConfig signingConfigs.debug 100 | minifyEnabled enableProguardInReleaseBuilds 101 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 102 | } 103 | } 104 | } 105 | 106 | dependencies { 107 | // The version of react-native is set by the React Native Gradle Plugin 108 | implementation("com.facebook.react:react-android") 109 | 110 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") 111 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { 112 | exclude group:'com.squareup.okhttp3', module:'okhttp' 113 | } 114 | 115 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") 116 | if (hermesEnabled.toBoolean()) { 117 | implementation("com.facebook.react:hermes-android") 118 | } else { 119 | implementation jscFlavor 120 | } 121 | } 122 | 123 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 124 | -------------------------------------------------------------------------------- /Example/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/Example/android/app/debug.keystore -------------------------------------------------------------------------------- /Example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /Example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Example/android/app/src/debug/java/com/king/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.king; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 21 | import com.facebook.react.ReactInstanceEventListener; 22 | import com.facebook.react.ReactInstanceManager; 23 | import com.facebook.react.bridge.ReactContext; 24 | import com.facebook.react.modules.network.NetworkingModule; 25 | import okhttp3.OkHttpClient; 26 | 27 | /** 28 | * Class responsible of loading Flipper inside your React Native application. This is the debug 29 | * flavor of it. Here you can add your own plugins and customize the Flipper setup. 30 | */ 31 | public class ReactNativeFlipper { 32 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 33 | if (FlipperUtils.shouldEnableFlipper(context)) { 34 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 35 | 36 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 37 | client.addPlugin(new DatabasesFlipperPlugin(context)); 38 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 39 | client.addPlugin(CrashReporterPlugin.getInstance()); 40 | 41 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 42 | NetworkingModule.setCustomClientBuilder( 43 | new NetworkingModule.CustomClientBuilder() { 44 | @Override 45 | public void apply(OkHttpClient.Builder builder) { 46 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 47 | } 48 | }); 49 | client.addPlugin(networkFlipperPlugin); 50 | client.start(); 51 | 52 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 53 | // Hence we run if after all native modules have been initialized 54 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 55 | if (reactContext == null) { 56 | reactInstanceManager.addReactInstanceEventListener( 57 | new ReactInstanceEventListener() { 58 | @Override 59 | public void onReactContextInitialized(ReactContext reactContext) { 60 | reactInstanceManager.removeReactInstanceEventListener(this); 61 | reactContext.runOnNativeModulesQueueThread( 62 | new Runnable() { 63 | @Override 64 | public void run() { 65 | client.addPlugin(new FrescoFlipperPlugin()); 66 | } 67 | }); 68 | } 69 | }); 70 | } else { 71 | client.addPlugin(new FrescoFlipperPlugin()); 72 | } 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /Example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Example/android/app/src/main/java/com/king/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.king; 2 | 3 | import com.facebook.react.ReactActivity; 4 | import com.facebook.react.ReactActivityDelegate; 5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 6 | import com.facebook.react.defaults.DefaultReactActivityDelegate; 7 | 8 | public class MainActivity extends ReactActivity { 9 | 10 | /** 11 | * Returns the name of the main component registered from JavaScript. This is used to schedule 12 | * rendering of the component. 13 | */ 14 | @Override 15 | protected String getMainComponentName() { 16 | return "PickerDemo"; 17 | } 18 | 19 | /** 20 | * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link 21 | * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React 22 | * (aka React 18) with two boolean flags. 23 | */ 24 | @Override 25 | protected ReactActivityDelegate createReactActivityDelegate() { 26 | return new DefaultReactActivityDelegate( 27 | this, 28 | getMainComponentName(), 29 | // If you opted-in for the New Architecture, we enable the Fabric Renderer. 30 | DefaultNewArchitectureEntryPoint.getFabricEnabled()); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /Example/android/app/src/main/java/com/king/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.king; 2 | 3 | import android.app.Application; 4 | import com.facebook.react.PackageList; 5 | import com.facebook.react.ReactApplication; 6 | import com.facebook.react.ReactNativeHost; 7 | import com.facebook.react.ReactPackage; 8 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 9 | import com.facebook.react.defaults.DefaultReactNativeHost; 10 | import com.facebook.soloader.SoLoader; 11 | import java.util.List; 12 | 13 | public class MainApplication extends Application implements ReactApplication { 14 | 15 | private final ReactNativeHost mReactNativeHost = 16 | new DefaultReactNativeHost(this) { 17 | @Override 18 | public boolean getUseDeveloperSupport() { 19 | return BuildConfig.DEBUG; 20 | } 21 | 22 | @Override 23 | protected List getPackages() { 24 | @SuppressWarnings("UnnecessaryLocalVariable") 25 | List packages = new PackageList(this).getPackages(); 26 | // Packages that cannot be autolinked yet can be added manually here, for example: 27 | // packages.add(new MyReactNativePackage()); 28 | return packages; 29 | } 30 | 31 | @Override 32 | protected String getJSMainModuleName() { 33 | return "index"; 34 | } 35 | 36 | @Override 37 | protected boolean isNewArchEnabled() { 38 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 39 | } 40 | 41 | @Override 42 | protected Boolean isHermesEnabled() { 43 | return BuildConfig.IS_HERMES_ENABLED; 44 | } 45 | }; 46 | 47 | @Override 48 | public ReactNativeHost getReactNativeHost() { 49 | return mReactNativeHost; 50 | } 51 | 52 | @Override 53 | public void onCreate() { 54 | super.onCreate(); 55 | SoLoader.init(this, /* native exopackage */ false); 56 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 57 | // If you opted-in for the New Architecture, we load the native entry point for this app. 58 | DefaultNewArchitectureEntryPoint.load(); 59 | } 60 | ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /Example/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/Example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/Example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/Example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/Example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/Example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/Example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | PickerDemo 3 | 4 | -------------------------------------------------------------------------------- /Example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Example/android/app/src/release/java/com/king/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.king; 8 | 9 | import android.content.Context; 10 | import com.facebook.react.ReactInstanceManager; 11 | 12 | /** 13 | * Class responsible of loading Flipper inside your React Native application. This is the release 14 | * flavor of it so it's empty as we don't want to load Flipper. 15 | */ 16 | public class ReactNativeFlipper { 17 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 18 | // Do nothing as we don't want to initialize Flipper on Release. 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "33.0.0" 6 | minSdkVersion = 21 7 | compileSdkVersion = 33 8 | targetSdkVersion = 33 9 | 10 | // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. 11 | ndkVersion = "23.1.7779620" 12 | } 13 | repositories { 14 | google() 15 | mavenCentral() 16 | } 17 | dependencies { 18 | classpath("com.android.tools.build:gradle") 19 | classpath("com.facebook.react:react-native-gradle-plugin") 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.182.0 29 | 30 | # Use this property to specify which architecture you want to build. 31 | # You can also override it from the CLI using 32 | # ./gradlew -PreactNativeArchitectures=x86_64 33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 34 | 35 | # Use this property to enable support to the new architecture. 36 | # This will allow you to use TurboModules and the Fabric render in 37 | # your application. You should enable this flag either if you want 38 | # to write custom TurboModules/Fabric components OR use libraries that 39 | # are providing them. 40 | newArchEnabled=false 41 | 42 | # Use this property to enable or disable the Hermes JS engine. 43 | # If set to false, you will be using JSC instead. 44 | hermesEnabled=true 45 | -------------------------------------------------------------------------------- /Example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/Example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /Example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip 4 | networkTimeout=10000 5 | zipStoreBase=GRADLE_USER_HOME 6 | zipStorePath=wrapper/dists 7 | -------------------------------------------------------------------------------- /Example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | # 21 | # Gradle start up script for POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | # This is normally unused 84 | # shellcheck disable=SC2034 85 | APP_BASE_NAME=${0##*/} 86 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit 87 | 88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 90 | 91 | # Use the maximum available, or set MAX_FD != -1 to use that value. 92 | MAX_FD=maximum 93 | 94 | warn () { 95 | echo "$*" 96 | } >&2 97 | 98 | die () { 99 | echo 100 | echo "$*" 101 | echo 102 | exit 1 103 | } >&2 104 | 105 | # OS specific support (must be 'true' or 'false'). 106 | cygwin=false 107 | msys=false 108 | darwin=false 109 | nonstop=false 110 | case "$( uname )" in #( 111 | CYGWIN* ) cygwin=true ;; #( 112 | Darwin* ) darwin=true ;; #( 113 | MSYS* | MINGW* ) msys=true ;; #( 114 | NONSTOP* ) nonstop=true ;; 115 | esac 116 | 117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 118 | 119 | 120 | # Determine the Java command to use to start the JVM. 121 | if [ -n "$JAVA_HOME" ] ; then 122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 123 | # IBM's JDK on AIX uses strange locations for the executables 124 | JAVACMD=$JAVA_HOME/jre/sh/java 125 | else 126 | JAVACMD=$JAVA_HOME/bin/java 127 | fi 128 | if [ ! -x "$JAVACMD" ] ; then 129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 130 | 131 | Please set the JAVA_HOME variable in your environment to match the 132 | location of your Java installation." 133 | fi 134 | else 135 | JAVACMD=java 136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | 142 | # Increase the maximum file descriptors if we can. 143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 144 | case $MAX_FD in #( 145 | max*) 146 | # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked. 147 | # shellcheck disable=SC3045 148 | MAX_FD=$( ulimit -H -n ) || 149 | warn "Could not query maximum file descriptor limit" 150 | esac 151 | case $MAX_FD in #( 152 | '' | soft) :;; #( 153 | *) 154 | # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked. 155 | # shellcheck disable=SC3045 156 | ulimit -n "$MAX_FD" || 157 | warn "Could not set maximum file descriptor limit to $MAX_FD" 158 | esac 159 | fi 160 | 161 | # Collect all arguments for the java command, stacking in reverse order: 162 | # * args from the command line 163 | # * the main class name 164 | # * -classpath 165 | # * -D...appname settings 166 | # * --module-path (only if needed) 167 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 168 | 169 | # For Cygwin or MSYS, switch paths to Windows format before running java 170 | if "$cygwin" || "$msys" ; then 171 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 172 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 173 | 174 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 175 | 176 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 177 | for arg do 178 | if 179 | case $arg in #( 180 | -*) false ;; # don't mess with options #( 181 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 182 | [ -e "$t" ] ;; #( 183 | *) false ;; 184 | esac 185 | then 186 | arg=$( cygpath --path --ignore --mixed "$arg" ) 187 | fi 188 | # Roll the args list around exactly as many times as the number of 189 | # args, so each arg winds up back in the position where it started, but 190 | # possibly modified. 191 | # 192 | # NB: a `for` loop captures its iteration list before it begins, so 193 | # changing the positional parameters here affects neither the number of 194 | # iterations, nor the values presented in `arg`. 195 | shift # remove old arg 196 | set -- "$@" "$arg" # push replacement arg 197 | done 198 | fi 199 | 200 | # Collect all arguments for the java command; 201 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of 202 | # shell script including quotes and variable substitutions, so put them in 203 | # double quotes to make sure that they get re-expanded; and 204 | # * put everything else in single quotes, so that it's not re-expanded. 205 | 206 | set -- \ 207 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 208 | -classpath "$CLASSPATH" \ 209 | org.gradle.wrapper.GradleWrapperMain \ 210 | "$@" 211 | 212 | # Stop when "xargs" is not available. 213 | if ! command -v xargs >/dev/null 2>&1 214 | then 215 | die "xargs is not available" 216 | fi 217 | 218 | # Use "xargs" to parse quoted args. 219 | # 220 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 221 | # 222 | # In Bash we could simply go: 223 | # 224 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 225 | # set -- "${ARGS[@]}" "$@" 226 | # 227 | # but POSIX shell has neither arrays nor command substitution, so instead we 228 | # post-process each arg (as a line of input to sed) to backslash-escape any 229 | # character that might be a shell metacharacter, then use eval to reverse 230 | # that process (while maintaining the separation between arguments), and wrap 231 | # the whole thing up as a single "set" statement. 232 | # 233 | # This will of course break if any of these variables contains a newline or 234 | # an unmatched quote. 235 | # 236 | 237 | eval "set -- $( 238 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 239 | xargs -n1 | 240 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 241 | tr '\n' ' ' 242 | )" '"$@"' 243 | 244 | exec "$JAVACMD" "$@" 245 | -------------------------------------------------------------------------------- /Example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%"=="" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%"=="" set DIRNAME=. 29 | @rem This is normally unused 30 | set APP_BASE_NAME=%~n0 31 | set APP_HOME=%DIRNAME% 32 | 33 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 34 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 35 | 36 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 37 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 38 | 39 | @rem Find java.exe 40 | if defined JAVA_HOME goto findJavaFromJavaHome 41 | 42 | set JAVA_EXE=java.exe 43 | %JAVA_EXE% -version >NUL 2>&1 44 | if %ERRORLEVEL% equ 0 goto execute 45 | 46 | echo. 47 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 48 | echo. 49 | echo Please set the JAVA_HOME variable in your environment to match the 50 | echo location of your Java installation. 51 | 52 | goto fail 53 | 54 | :findJavaFromJavaHome 55 | set JAVA_HOME=%JAVA_HOME:"=% 56 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 57 | 58 | if exist "%JAVA_EXE%" goto execute 59 | 60 | echo. 61 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 62 | echo. 63 | echo Please set the JAVA_HOME variable in your environment to match the 64 | echo location of your Java installation. 65 | 66 | goto fail 67 | 68 | :execute 69 | @rem Setup the command line 70 | 71 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 72 | 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if %ERRORLEVEL% equ 0 goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | set EXIT_CODE=%ERRORLEVEL% 85 | if %EXIT_CODE% equ 0 set EXIT_CODE=1 86 | if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE% 87 | exit /b %EXIT_CODE% 88 | 89 | :mainEnd 90 | if "%OS%"=="Windows_NT" endlocal 91 | 92 | :omega 93 | -------------------------------------------------------------------------------- /Example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'PickerDemo' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | includeBuild('../node_modules/@react-native/gradle-plugin') 5 | -------------------------------------------------------------------------------- /Example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "PickerDemo", 3 | "displayName": "PickerDemo" 4 | } 5 | -------------------------------------------------------------------------------- /Example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /Example/example/dog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/Example/example/dog.png -------------------------------------------------------------------------------- /Example/example/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component, PropsWithChildren} from 'react'; 2 | import { 3 | StyleSheet, 4 | TouchableOpacity, 5 | View, 6 | Text, 7 | Image, 8 | Pressable, 9 | } from 'react-native'; 10 | // import SlidePicker from '../src'; 11 | import SlidePicker from 'react-native-slidepicker'; 12 | 13 | import CASCADE_POSITION from './test_data/cascade_position.json'; 14 | import PARALLEL_TIME from './test_data/parallel_time.json'; 15 | import PARALLEL_SKU from './test_data/parallel_sku.json'; 16 | import ICON_DOG from './dog.png'; 17 | 18 | type IExampleState = { 19 | skuData: IPickerValueProps[]; 20 | positionData: IPickerValueProps[]; 21 | timeData: IPickerValueProps[]; 22 | demoType: string; 23 | }; 24 | 25 | export default class Demo extends Component { 26 | skuRef: React.RefObject; 27 | 28 | constructor(props: any) { 29 | super(props); 30 | this.state = { 31 | demoType: '', 32 | timeData: [], 33 | skuData: [], 34 | positionData: [], 35 | }; 36 | this.skuRef = React.createRef(); 37 | } 38 | 39 | render() { 40 | const {positionData, skuData, timeData} = this.state; 41 | 42 | return ( 43 | 44 | 45 | Cascade 46 | this.setState({demoType: 'cascade_position'})}> 49 | position 50 | 51 | {[...positionData] 52 | .reverse() 53 | .map(ele => ele.label) 54 | .join(',')} 55 | 56 | 57 | 58 | 59 | Parallel 60 | 61 | this.setState({demoType: 'parallel_time'})}> 64 | Time 65 | 66 | {timeData.map(ele => ele.label).join(',')} 67 | 68 | 69 | 70 | this.setState({demoType: 'parallel_sku'})}> 73 | SKU 74 | 75 | {skuData.map(ele => ele.label).join(',')} 76 | 77 | 78 | 79 | 80 | this.setState({demoType: ''})} 93 | onCancelClick={() => this.setState({demoType: ''})} 94 | onConfirmClick={res => { 95 | console.info('[res]', res); 96 | this.setState({positionData: res, demoType: ''}); 97 | }} 98 | /> 99 | 100 | this.setState({demoType: ''})} 108 | onConfirmClick={res => { 109 | console.info('[res]', res); 110 | this.setState({timeData: res, demoType: ''}); 111 | }} 112 | /> 113 | 114 | this.setState({demoType: ''})} 122 | HeaderComponent={ 123 | 124 | 125 | 126 | What you want? 127 | 128 | { 130 | const res = this.skuRef?.current?._getValues(); 131 | console.info('res', res); 132 | this.setState({skuData: res, demoType: ''}); 133 | }}> 134 | Done 135 | 136 | 137 | } 138 | /> 139 | 140 | ); 141 | } 142 | } 143 | 144 | const styles = StyleSheet.create({ 145 | page: { 146 | flex: 1, 147 | paddingTop: 120, 148 | alignItems: 'center', 149 | }, 150 | block: { 151 | width: '80%', 152 | }, 153 | title: { 154 | fontWeight: '700', 155 | fontSize: 18, 156 | color: '#222', 157 | }, 158 | name: { 159 | fontSize: 16, 160 | color: '#444', 161 | }, 162 | values: { 163 | color: '#000', 164 | fontWeight: '700', 165 | }, 166 | item: { 167 | marginTop: 16, 168 | borderBottomColor: '#aaa', 169 | borderBottomWidth: 1, 170 | flexDirection: 'row', 171 | alignItems: 'center', 172 | justifyContent: 'space-between', 173 | }, 174 | checkedStyle: { 175 | color: '#a00', 176 | }, 177 | cancelTextStyle: { 178 | color: '#a00', 179 | }, 180 | header: { 181 | backgroundColor: '#fff', 182 | height: 50, 183 | flexDirection: 'row', 184 | justifyContent: 'space-between', 185 | alignItems: 'center', 186 | paddingHorizontal: 12, 187 | }, 188 | }); 189 | -------------------------------------------------------------------------------- /Example/example/test_data/cascade_position.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "label": "Asia", 4 | "value": "asia", 5 | "options": [ 6 | { 7 | "label": "China", 8 | "value": "china", 9 | "options": [ 10 | { 11 | "label": "shandong", 12 | "value": "shandong", 13 | "options": [ 14 | { 15 | "label": "Ji Nan", 16 | "value": "Ji Nan" 17 | }, 18 | { 19 | "label": "Qing Dao", 20 | "value": "Qing Dao" 21 | }, 22 | { 23 | "label": "Bin Zhou", 24 | "value": "Bin Zhou" 25 | }, 26 | { 27 | "label": "Zi Bo", 28 | "value": "Zi Bo" 29 | } 30 | ] 31 | }, 32 | { 33 | "label": "Gan Su", 34 | "value": "Gan Su", 35 | "options": [ 36 | { 37 | "label": "Lan Zhou", 38 | "value": "Lan Zhou" 39 | }, 40 | { 41 | "label": "Zhang Ye", 42 | "value": "Zhang Ye" 43 | }, 44 | { 45 | "label": "Wu Wei", 46 | "value": "Wu Wei" 47 | }, 48 | { 49 | "label": "Jiu Quan", 50 | "value": "Jiu Quan" 51 | }, 52 | { 53 | "label": "Tian Shui", 54 | "value": "Tian Shui" 55 | } 56 | ] 57 | }, 58 | { 59 | "label": "Zhe Jiang", 60 | "value": "Zhe Jiang", 61 | "options": [ 62 | { 63 | "label": "Hang Zhou", 64 | "value": "Hang Zhou" 65 | }, 66 | { 67 | "label": "Wen Zhou", 68 | "value": "Wen Zhou" 69 | }, 70 | { 71 | "label": "Shao Xing", 72 | "value": "Shao Xing" 73 | } 74 | ] 75 | }, 76 | { 77 | "label": "Hu Bei", 78 | "value": "Hu Bei", 79 | "options": [ 80 | { 81 | "label": "Wu Han", 82 | "value": "Wu Han" 83 | }, 84 | { 85 | "label": "Xiang Yang", 86 | "value": "Xiang Yang" 87 | }, 88 | { 89 | "label": "Jing Zhou", 90 | "value": "Jing Zhou" 91 | } 92 | ] 93 | } 94 | ] 95 | }, 96 | { 97 | "label": "Japan", 98 | "value": "japan", 99 | "options": [] 100 | }, 101 | { 102 | "label": "South Korea", 103 | "value": "South Korea" 104 | } 105 | ] 106 | }, 107 | { 108 | "label": "North America", 109 | "value": "north america", 110 | "options": [ 111 | { 112 | "label": "USA", 113 | "value": "usa", 114 | "options": [ 115 | { 116 | "label": "Pennsylvania", 117 | "value": "Pennsylvania", 118 | "options": [{"label": "Philly", "value": "Philly"}] 119 | }, 120 | {"label": "Hawaii", "value": "Hawaii"}, 121 | { 122 | "label": "New Mexico", 123 | "value": "New Mexico", 124 | "options": [ 125 | { 126 | "label": "ABQ", 127 | "value": "ABQ" 128 | }, 129 | { 130 | "label": "Santa Fe", 131 | "value": "Santa Fe" 132 | } 133 | ] 134 | }, 135 | {"label": "Texas", "value": "Texas"}, 136 | {"label": "Nevada", "value": "Nevada"} 137 | ] 138 | }, 139 | { 140 | "label": "Canada", 141 | "value": "canada", 142 | "options": [ 143 | {"label": "Ottawa", "value": "Ottawa"}, 144 | {"label": "Toronto", "value": "Toronto"}, 145 | {"label": "Montreal", "value": "Montreal"}, 146 | {"label": "Vancouver", "value": "Vancouver"}, 147 | {"label": "Quebec City", "value": "Quebec City"} 148 | ] 149 | }, 150 | { 151 | "label": "Mexico", 152 | "value": "Mexico" 153 | } 154 | ] 155 | }, 156 | { 157 | "label": "Europe", 158 | "value": "europe", 159 | "options": [ 160 | { 161 | "label": "Germany", 162 | "value": "Germany", 163 | "options": [ 164 | {"label": "Berlin", "value": "Berlin"}, 165 | {"label": "Hamburg", "value": "Hamburg"}, 166 | {"label": "Munich", "value": "Munich"}, 167 | {"label": "Cologne", "value": "Cologne"}, 168 | {"label": "Bremen", "value": "Bremen"}, 169 | {"label": "Stuttgart", "value": "Stuttgart"}, 170 | {"label": "Dortmund", "value": "Dortmund"} 171 | ] 172 | }, 173 | { 174 | "label": "France", 175 | "value": "France", 176 | "options": [ 177 | {"label": "Paris", "value": "Paris"}, 178 | {"label": "Dunkerque", "value": "Dunkerque"}, 179 | {"label": "Lille", "value": "Lille"}, 180 | {"label": "Cherbourg", "value": "Cherbourg"}, 181 | {"label": "Rouen", "value": "Rouen"} 182 | ] 183 | }, 184 | { 185 | "label": "U.K.", 186 | "value": "uk", 187 | "options": [ 188 | {"label": "London", "value": "London"}, 189 | {"label": "Manchester", "value": "Manchester"}, 190 | {"label": "Edinburgh", "value": "Edinburgh"}, 191 | {"label": "Birmingham", "value": "Birmingham"}, 192 | {"label": "Cambrvaluege", "value": "Cambrvaluege"} 193 | ] 194 | } 195 | ] 196 | }, 197 | { 198 | "label": "Africa", 199 | "value": "Africa" 200 | } 201 | ] 202 | -------------------------------------------------------------------------------- /Example/example/test_data/parallel_sku.json: -------------------------------------------------------------------------------- 1 | [ 2 | [ 3 | {"label": "type A", "value": 0}, 4 | {"label": "type B", "value": 1}, 5 | {"label": "type C", "value": 2}, 6 | {"label": "type D", "value": 3} 7 | ], 8 | [ 9 | {"label": "red", "value": 0}, 10 | {"label": "yellow", "value": 1}, 11 | {"label": "blue", "value": 2}, 12 | {"label": "green", "value": 3}, 13 | {"label": "gray", "value": 4} 14 | ], 15 | [ 16 | {"label": 33, "value": 33}, 17 | {"label": 34, "value": 34}, 18 | {"label": 35, "value": 35}, 19 | {"label": 36, "value": 36}, 20 | {"label": 37, "value": 37}, 21 | {"label": 38, "value": 38}, 22 | {"label": 39, "value": 39}, 23 | {"label": 40, "value": 40}, 24 | {"label": 41, "value": 41}, 25 | {"label": 42, "value": 42}, 26 | {"label": 43, "value": 43}, 27 | {"label": 44, "value": 44} 28 | ] 29 | ] 30 | -------------------------------------------------------------------------------- /Example/example/test_data/parallel_time.json: -------------------------------------------------------------------------------- 1 | [ 2 | [ 3 | { 4 | "label": "Monday", 5 | "id": "1", 6 | "value": "1" 7 | }, 8 | { 9 | "label": "Tuesday", 10 | "id": "2", 11 | "value": "2" 12 | }, 13 | { 14 | "label": "Wednesday", 15 | "id": "3", 16 | "value": "3" 17 | }, 18 | { 19 | "label": "Thursday", 20 | "id": "4", 21 | "value": "4" 22 | }, 23 | { 24 | "label": "Friday", 25 | "id": "5", 26 | "value": "5" 27 | }, 28 | { 29 | "label": "Saturday", 30 | "id": "6", 31 | "value": "6" 32 | }, 33 | { 34 | "label": "Sunday", 35 | "id": "7", 36 | "value": "7" 37 | } 38 | ], 39 | [ 40 | {"label": "00:00", "id": 0, "value": 0}, 41 | {"label": "01:00", "id": 1, "value": 1}, 42 | {"label": "02:00", "id": 2, "value": 2}, 43 | {"label": "03:00", "id": 3, "value": 3}, 44 | {"label": "04:00", "id": 4, "value": 4}, 45 | {"label": "05:00", "id": 5, "value": 5}, 46 | {"label": "06:00", "id": 6, "value": 6}, 47 | {"label": "07:00", "id": 7, "value": 7}, 48 | {"label": "08:00", "id": 8, "value": 8}, 49 | {"label": "09:00", "id": 9, "value": 9}, 50 | {"label": "10:00", "id": 10, "value": 10}, 51 | {"label": "11:00", "id": 11, "value": 11}, 52 | {"label": "12:00", "id": 12, "value": 12}, 53 | {"label": "13:00", "id": 13, "value": 13}, 54 | {"label": "14:00", "id": 14, "value": 14}, 55 | {"label": "15:00", "id": 15, "value": 15}, 56 | {"label": "16:00", "id": 16, "value": 16}, 57 | {"label": "17:00", "id": 17, "value": 17}, 58 | {"label": "18:00", "id": 18, "value": 18}, 59 | {"label": "19:00", "id": 19, "value": 19}, 60 | {"label": "20:00", "id": 20, "value": 20}, 61 | {"label": "21:00", "id": 21, "value": 21}, 62 | {"label": "22:00", "id": 22, "value": 22}, 63 | {"label": "23:00", "id": 23, "value": 23} 64 | ] 65 | ] 66 | -------------------------------------------------------------------------------- /Example/index.HTML: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Example/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | // import App from './App'; 7 | // import Picker from './src/Wheel.tsx'; 8 | import Demo from './example'; 9 | import {name as appName} from './app.json'; 10 | 11 | AppRegistry.registerComponent(appName, () => Demo); 12 | -------------------------------------------------------------------------------- /Example/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /Example/ios/King.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 54; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 00E356F31AD99517003FC87E /* KingTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* KingTests.m */; }; 11 | 0C80B921A6F3F58F76C31292 /* libPods-PickerDemo.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5DCACB8F33CDC322A6C60F78 /* libPods-PickerDemo.a */; }; 12 | 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; }; 13 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 14 | 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 15 | 7699B88040F8A987B510C191 /* libPods-PickerDemo-KingTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-PickerDemo-KingTests.a */; }; 16 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; }; 17 | /* End PBXBuildFile section */ 18 | 19 | /* Begin PBXContainerItemProxy section */ 20 | 00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = { 21 | isa = PBXContainerItemProxy; 22 | containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */; 23 | proxyType = 1; 24 | remoteGlobalIDString = 13B07F861A680F5B00A75B9A; 25 | remoteInfo = PickerDemo; 26 | }; 27 | /* End PBXContainerItemProxy section */ 28 | 29 | /* Begin PBXFileReference section */ 30 | 00E356EE1AD99517003FC87E /* KingTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = KingTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 31 | 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 32 | 00E356F21AD99517003FC87E /* KingTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = KingTests.m; sourceTree = ""; }; 33 | 13B07F961A680F5B00A75B9A /* PickerDemo.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = PickerDemo.app; sourceTree = BUILT_PRODUCTS_DIR; }; 34 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = PickerDemo/AppDelegate.h; sourceTree = ""; }; 35 | 13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = PickerDemo/AppDelegate.mm; sourceTree = ""; }; 36 | 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = PickerDemo/Images.xcassets; sourceTree = ""; }; 37 | 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = PickerDemo/Info.plist; sourceTree = ""; }; 38 | 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = PickerDemo/main.m; sourceTree = ""; }; 39 | 19F6CBCC0A4E27FBF8BF4A61 /* libPods-PickerDemo-KingTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-PickerDemo-KingTests.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 40 | 3B4392A12AC88292D35C810B /* Pods-PickerDemo.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-PickerDemo.debug.xcconfig"; path = "Target Support Files/Pods-PickerDemo/Pods-PickerDemo.debug.xcconfig"; sourceTree = ""; }; 41 | 5709B34CF0A7D63546082F79 /* Pods-PickerDemo.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-PickerDemo.release.xcconfig"; path = "Target Support Files/Pods-PickerDemo/Pods-PickerDemo.release.xcconfig"; sourceTree = ""; }; 42 | 5B7EB9410499542E8C5724F5 /* Pods-PickerDemo-KingTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-PickerDemo-KingTests.debug.xcconfig"; path = "Target Support Files/Pods-PickerDemo-KingTests/Pods-PickerDemo-KingTests.debug.xcconfig"; sourceTree = ""; }; 43 | 5DCACB8F33CDC322A6C60F78 /* libPods-PickerDemo.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-PickerDemo.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 44 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = PickerDemo/LaunchScreen.storyboard; sourceTree = ""; }; 45 | 89C6BE57DB24E9ADA2F236DE /* Pods-PickerDemo-KingTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-PickerDemo-KingTests.release.xcconfig"; path = "Target Support Files/Pods-PickerDemo-KingTests/Pods-PickerDemo-KingTests.release.xcconfig"; sourceTree = ""; }; 46 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; 47 | /* End PBXFileReference section */ 48 | 49 | /* Begin PBXFrameworksBuildPhase section */ 50 | 00E356EB1AD99517003FC87E /* Frameworks */ = { 51 | isa = PBXFrameworksBuildPhase; 52 | buildActionMask = 2147483647; 53 | files = ( 54 | 7699B88040F8A987B510C191 /* libPods-PickerDemo-KingTests.a in Frameworks */, 55 | ); 56 | runOnlyForDeploymentPostprocessing = 0; 57 | }; 58 | 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { 59 | isa = PBXFrameworksBuildPhase; 60 | buildActionMask = 2147483647; 61 | files = ( 62 | 0C80B921A6F3F58F76C31292 /* libPods-PickerDemo.a in Frameworks */, 63 | ); 64 | runOnlyForDeploymentPostprocessing = 0; 65 | }; 66 | /* End PBXFrameworksBuildPhase section */ 67 | 68 | /* Begin PBXGroup section */ 69 | 00E356EF1AD99517003FC87E /* KingTests */ = { 70 | isa = PBXGroup; 71 | children = ( 72 | 00E356F21AD99517003FC87E /* KingTests.m */, 73 | 00E356F01AD99517003FC87E /* Supporting Files */, 74 | ); 75 | path = KingTests; 76 | sourceTree = ""; 77 | }; 78 | 00E356F01AD99517003FC87E /* Supporting Files */ = { 79 | isa = PBXGroup; 80 | children = ( 81 | 00E356F11AD99517003FC87E /* Info.plist */, 82 | ); 83 | name = "Supporting Files"; 84 | sourceTree = ""; 85 | }; 86 | 13B07FAE1A68108700A75B9A /* PickerDemo */ = { 87 | isa = PBXGroup; 88 | children = ( 89 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */, 90 | 13B07FB01A68108700A75B9A /* AppDelegate.mm */, 91 | 13B07FB51A68108700A75B9A /* Images.xcassets */, 92 | 13B07FB61A68108700A75B9A /* Info.plist */, 93 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */, 94 | 13B07FB71A68108700A75B9A /* main.m */, 95 | ); 96 | name = PickerDemo; 97 | sourceTree = ""; 98 | }; 99 | 2D16E6871FA4F8E400B85C8A /* Frameworks */ = { 100 | isa = PBXGroup; 101 | children = ( 102 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */, 103 | 5DCACB8F33CDC322A6C60F78 /* libPods-PickerDemo.a */, 104 | 19F6CBCC0A4E27FBF8BF4A61 /* libPods-PickerDemo-KingTests.a */, 105 | ); 106 | name = Frameworks; 107 | sourceTree = ""; 108 | }; 109 | 832341AE1AAA6A7D00B99B32 /* Libraries */ = { 110 | isa = PBXGroup; 111 | children = ( 112 | ); 113 | name = Libraries; 114 | sourceTree = ""; 115 | }; 116 | 83CBB9F61A601CBA00E9B192 = { 117 | isa = PBXGroup; 118 | children = ( 119 | 13B07FAE1A68108700A75B9A /* PickerDemo */, 120 | 832341AE1AAA6A7D00B99B32 /* Libraries */, 121 | 00E356EF1AD99517003FC87E /* KingTests */, 122 | 83CBBA001A601CBA00E9B192 /* Products */, 123 | 2D16E6871FA4F8E400B85C8A /* Frameworks */, 124 | BBD78D7AC51CEA395F1C20DB /* Pods */, 125 | ); 126 | indentWidth = 2; 127 | sourceTree = ""; 128 | tabWidth = 2; 129 | usesTabs = 0; 130 | }; 131 | 83CBBA001A601CBA00E9B192 /* Products */ = { 132 | isa = PBXGroup; 133 | children = ( 134 | 13B07F961A680F5B00A75B9A /* PickerDemo.app */, 135 | 00E356EE1AD99517003FC87E /* KingTests.xctest */, 136 | ); 137 | name = Products; 138 | sourceTree = ""; 139 | }; 140 | BBD78D7AC51CEA395F1C20DB /* Pods */ = { 141 | isa = PBXGroup; 142 | children = ( 143 | 3B4392A12AC88292D35C810B /* Pods-PickerDemo.debug.xcconfig */, 144 | 5709B34CF0A7D63546082F79 /* Pods-PickerDemo.release.xcconfig */, 145 | 5B7EB9410499542E8C5724F5 /* Pods-PickerDemo-KingTests.debug.xcconfig */, 146 | 89C6BE57DB24E9ADA2F236DE /* Pods-PickerDemo-KingTests.release.xcconfig */, 147 | ); 148 | path = Pods; 149 | sourceTree = ""; 150 | }; 151 | /* End PBXGroup section */ 152 | 153 | /* Begin PBXNativeTarget section */ 154 | 00E356ED1AD99517003FC87E /* KingTests */ = { 155 | isa = PBXNativeTarget; 156 | buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "KingTests" */; 157 | buildPhases = ( 158 | A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */, 159 | 00E356EA1AD99517003FC87E /* Sources */, 160 | 00E356EB1AD99517003FC87E /* Frameworks */, 161 | 00E356EC1AD99517003FC87E /* Resources */, 162 | C59DA0FBD6956966B86A3779 /* [CP] Embed Pods Frameworks */, 163 | F6A41C54EA430FDDC6A6ED99 /* [CP] Copy Pods Resources */, 164 | ); 165 | buildRules = ( 166 | ); 167 | dependencies = ( 168 | 00E356F51AD99517003FC87E /* PBXTargetDependency */, 169 | ); 170 | name = KingTests; 171 | productName = KingTests; 172 | productReference = 00E356EE1AD99517003FC87E /* KingTests.xctest */; 173 | productType = "com.apple.product-type.bundle.unit-test"; 174 | }; 175 | 13B07F861A680F5B00A75B9A /* PickerDemo */ = { 176 | isa = PBXNativeTarget; 177 | buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "PickerDemo" */; 178 | buildPhases = ( 179 | C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */, 180 | FD10A7F022414F080027D42C /* Start Packager */, 181 | 13B07F871A680F5B00A75B9A /* Sources */, 182 | 13B07F8C1A680F5B00A75B9A /* Frameworks */, 183 | 13B07F8E1A680F5B00A75B9A /* Resources */, 184 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 185 | 00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */, 186 | E235C05ADACE081382539298 /* [CP] Copy Pods Resources */, 187 | ); 188 | buildRules = ( 189 | ); 190 | dependencies = ( 191 | ); 192 | name = PickerDemo; 193 | productName = PickerDemo; 194 | productReference = 13B07F961A680F5B00A75B9A /* PickerDemo.app */; 195 | productType = "com.apple.product-type.application"; 196 | }; 197 | /* End PBXNativeTarget section */ 198 | 199 | /* Begin PBXProject section */ 200 | 83CBB9F71A601CBA00E9B192 /* Project object */ = { 201 | isa = PBXProject; 202 | attributes = { 203 | LastUpgradeCheck = 1210; 204 | TargetAttributes = { 205 | 00E356ED1AD99517003FC87E = { 206 | CreatedOnToolsVersion = 6.2; 207 | TestTargetID = 13B07F861A680F5B00A75B9A; 208 | }; 209 | 13B07F861A680F5B00A75B9A = { 210 | LastSwiftMigration = 1120; 211 | }; 212 | }; 213 | }; 214 | buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "PickerDemo" */; 215 | compatibilityVersion = "Xcode 12.0"; 216 | developmentRegion = en; 217 | hasScannedForEncodings = 0; 218 | knownRegions = ( 219 | en, 220 | Base, 221 | ); 222 | mainGroup = 83CBB9F61A601CBA00E9B192; 223 | productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; 224 | projectDirPath = ""; 225 | projectRoot = ""; 226 | targets = ( 227 | 13B07F861A680F5B00A75B9A /* PickerDemo */, 228 | 00E356ED1AD99517003FC87E /* KingTests */, 229 | ); 230 | }; 231 | /* End PBXProject section */ 232 | 233 | /* Begin PBXResourcesBuildPhase section */ 234 | 00E356EC1AD99517003FC87E /* Resources */ = { 235 | isa = PBXResourcesBuildPhase; 236 | buildActionMask = 2147483647; 237 | files = ( 238 | ); 239 | runOnlyForDeploymentPostprocessing = 0; 240 | }; 241 | 13B07F8E1A680F5B00A75B9A /* Resources */ = { 242 | isa = PBXResourcesBuildPhase; 243 | buildActionMask = 2147483647; 244 | files = ( 245 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */, 246 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 247 | ); 248 | runOnlyForDeploymentPostprocessing = 0; 249 | }; 250 | /* End PBXResourcesBuildPhase section */ 251 | 252 | /* Begin PBXShellScriptBuildPhase section */ 253 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { 254 | isa = PBXShellScriptBuildPhase; 255 | buildActionMask = 2147483647; 256 | files = ( 257 | ); 258 | inputPaths = ( 259 | "$(SRCROOT)/.xcode.env.local", 260 | "$(SRCROOT)/.xcode.env", 261 | ); 262 | name = "Bundle React Native code and images"; 263 | outputPaths = ( 264 | ); 265 | runOnlyForDeploymentPostprocessing = 0; 266 | shellPath = /bin/sh; 267 | shellScript = "set -e\n\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"../node_modules/react-native/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n"; 268 | }; 269 | 00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = { 270 | isa = PBXShellScriptBuildPhase; 271 | buildActionMask = 2147483647; 272 | files = ( 273 | ); 274 | inputFileListPaths = ( 275 | "${PODS_ROOT}/Target Support Files/Pods-PickerDemo/Pods-PickerDemo-frameworks-${CONFIGURATION}-input-files.xcfilelist", 276 | ); 277 | name = "[CP] Embed Pods Frameworks"; 278 | outputFileListPaths = ( 279 | "${PODS_ROOT}/Target Support Files/Pods-PickerDemo/Pods-PickerDemo-frameworks-${CONFIGURATION}-output-files.xcfilelist", 280 | ); 281 | runOnlyForDeploymentPostprocessing = 0; 282 | shellPath = /bin/sh; 283 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-PickerDemo/Pods-PickerDemo-frameworks.sh\"\n"; 284 | showEnvVarsInLog = 0; 285 | }; 286 | A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */ = { 287 | isa = PBXShellScriptBuildPhase; 288 | buildActionMask = 2147483647; 289 | files = ( 290 | ); 291 | inputFileListPaths = ( 292 | ); 293 | inputPaths = ( 294 | "${PODS_PODFILE_DIR_PATH}/Podfile.lock", 295 | "${PODS_ROOT}/Manifest.lock", 296 | ); 297 | name = "[CP] Check Pods Manifest.lock"; 298 | outputFileListPaths = ( 299 | ); 300 | outputPaths = ( 301 | "$(DERIVED_FILE_DIR)/Pods-PickerDemo-KingTests-checkManifestLockResult.txt", 302 | ); 303 | runOnlyForDeploymentPostprocessing = 0; 304 | shellPath = /bin/sh; 305 | shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; 306 | showEnvVarsInLog = 0; 307 | }; 308 | C38B50BA6285516D6DCD4F65 /* [CP] Check Pods Manifest.lock */ = { 309 | isa = PBXShellScriptBuildPhase; 310 | buildActionMask = 2147483647; 311 | files = ( 312 | ); 313 | inputFileListPaths = ( 314 | ); 315 | inputPaths = ( 316 | "${PODS_PODFILE_DIR_PATH}/Podfile.lock", 317 | "${PODS_ROOT}/Manifest.lock", 318 | ); 319 | name = "[CP] Check Pods Manifest.lock"; 320 | outputFileListPaths = ( 321 | ); 322 | outputPaths = ( 323 | "$(DERIVED_FILE_DIR)/Pods-PickerDemo-checkManifestLockResult.txt", 324 | ); 325 | runOnlyForDeploymentPostprocessing = 0; 326 | shellPath = /bin/sh; 327 | shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; 328 | showEnvVarsInLog = 0; 329 | }; 330 | C59DA0FBD6956966B86A3779 /* [CP] Embed Pods Frameworks */ = { 331 | isa = PBXShellScriptBuildPhase; 332 | buildActionMask = 2147483647; 333 | files = ( 334 | ); 335 | inputFileListPaths = ( 336 | "${PODS_ROOT}/Target Support Files/Pods-PickerDemo-KingTests/Pods-PickerDemo-KingTests-frameworks-${CONFIGURATION}-input-files.xcfilelist", 337 | ); 338 | name = "[CP] Embed Pods Frameworks"; 339 | outputFileListPaths = ( 340 | "${PODS_ROOT}/Target Support Files/Pods-PickerDemo-KingTests/Pods-PickerDemo-KingTests-frameworks-${CONFIGURATION}-output-files.xcfilelist", 341 | ); 342 | runOnlyForDeploymentPostprocessing = 0; 343 | shellPath = /bin/sh; 344 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-PickerDemo-KingTests/Pods-PickerDemo-KingTests-frameworks.sh\"\n"; 345 | showEnvVarsInLog = 0; 346 | }; 347 | E235C05ADACE081382539298 /* [CP] Copy Pods Resources */ = { 348 | isa = PBXShellScriptBuildPhase; 349 | buildActionMask = 2147483647; 350 | files = ( 351 | ); 352 | inputFileListPaths = ( 353 | "${PODS_ROOT}/Target Support Files/Pods-PickerDemo/Pods-PickerDemo-resources-${CONFIGURATION}-input-files.xcfilelist", 354 | ); 355 | name = "[CP] Copy Pods Resources"; 356 | outputFileListPaths = ( 357 | "${PODS_ROOT}/Target Support Files/Pods-PickerDemo/Pods-PickerDemo-resources-${CONFIGURATION}-output-files.xcfilelist", 358 | ); 359 | runOnlyForDeploymentPostprocessing = 0; 360 | shellPath = /bin/sh; 361 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-PickerDemo/Pods-PickerDemo-resources.sh\"\n"; 362 | showEnvVarsInLog = 0; 363 | }; 364 | F6A41C54EA430FDDC6A6ED99 /* [CP] Copy Pods Resources */ = { 365 | isa = PBXShellScriptBuildPhase; 366 | buildActionMask = 2147483647; 367 | files = ( 368 | ); 369 | inputFileListPaths = ( 370 | "${PODS_ROOT}/Target Support Files/Pods-PickerDemo-KingTests/Pods-PickerDemo-KingTests-resources-${CONFIGURATION}-input-files.xcfilelist", 371 | ); 372 | name = "[CP] Copy Pods Resources"; 373 | outputFileListPaths = ( 374 | "${PODS_ROOT}/Target Support Files/Pods-PickerDemo-KingTests/Pods-PickerDemo-KingTests-resources-${CONFIGURATION}-output-files.xcfilelist", 375 | ); 376 | runOnlyForDeploymentPostprocessing = 0; 377 | shellPath = /bin/sh; 378 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-PickerDemo-KingTests/Pods-PickerDemo-KingTests-resources.sh\"\n"; 379 | showEnvVarsInLog = 0; 380 | }; 381 | FD10A7F022414F080027D42C /* Start Packager */ = { 382 | isa = PBXShellScriptBuildPhase; 383 | buildActionMask = 2147483647; 384 | files = ( 385 | ); 386 | inputFileListPaths = ( 387 | ); 388 | inputPaths = ( 389 | ); 390 | name = "Start Packager"; 391 | outputFileListPaths = ( 392 | ); 393 | outputPaths = ( 394 | ); 395 | runOnlyForDeploymentPostprocessing = 0; 396 | shellPath = /bin/sh; 397 | shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n exit 2\n fi\n else\n open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n fi\nfi\n"; 398 | showEnvVarsInLog = 0; 399 | }; 400 | /* End PBXShellScriptBuildPhase section */ 401 | 402 | /* Begin PBXSourcesBuildPhase section */ 403 | 00E356EA1AD99517003FC87E /* Sources */ = { 404 | isa = PBXSourcesBuildPhase; 405 | buildActionMask = 2147483647; 406 | files = ( 407 | 00E356F31AD99517003FC87E /* KingTests.m in Sources */, 408 | ); 409 | runOnlyForDeploymentPostprocessing = 0; 410 | }; 411 | 13B07F871A680F5B00A75B9A /* Sources */ = { 412 | isa = PBXSourcesBuildPhase; 413 | buildActionMask = 2147483647; 414 | files = ( 415 | 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */, 416 | 13B07FC11A68108700A75B9A /* main.m in Sources */, 417 | ); 418 | runOnlyForDeploymentPostprocessing = 0; 419 | }; 420 | /* End PBXSourcesBuildPhase section */ 421 | 422 | /* Begin PBXTargetDependency section */ 423 | 00E356F51AD99517003FC87E /* PBXTargetDependency */ = { 424 | isa = PBXTargetDependency; 425 | target = 13B07F861A680F5B00A75B9A /* PickerDemo */; 426 | targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */; 427 | }; 428 | /* End PBXTargetDependency section */ 429 | 430 | /* Begin XCBuildConfiguration section */ 431 | 00E356F61AD99517003FC87E /* Debug */ = { 432 | isa = XCBuildConfiguration; 433 | baseConfigurationReference = 5B7EB9410499542E8C5724F5 /* Pods-PickerDemo-KingTests.debug.xcconfig */; 434 | buildSettings = { 435 | BUNDLE_LOADER = "$(TEST_HOST)"; 436 | GCC_PREPROCESSOR_DEFINITIONS = ( 437 | "DEBUG=1", 438 | "$(inherited)", 439 | ); 440 | INFOPLIST_FILE = KingTests/Info.plist; 441 | IPHONEOS_DEPLOYMENT_TARGET = 12.4; 442 | LD_RUNPATH_SEARCH_PATHS = ( 443 | "$(inherited)", 444 | "@executable_path/Frameworks", 445 | "@loader_path/Frameworks", 446 | ); 447 | OTHER_LDFLAGS = ( 448 | "-ObjC", 449 | "-lc++", 450 | "$(inherited)", 451 | ); 452 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 453 | PRODUCT_NAME = "$(TARGET_NAME)"; 454 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/PickerDemo.app/PickerDemo"; 455 | }; 456 | name = Debug; 457 | }; 458 | 00E356F71AD99517003FC87E /* Release */ = { 459 | isa = XCBuildConfiguration; 460 | baseConfigurationReference = 89C6BE57DB24E9ADA2F236DE /* Pods-PickerDemo-KingTests.release.xcconfig */; 461 | buildSettings = { 462 | BUNDLE_LOADER = "$(TEST_HOST)"; 463 | COPY_PHASE_STRIP = NO; 464 | INFOPLIST_FILE = KingTests/Info.plist; 465 | IPHONEOS_DEPLOYMENT_TARGET = 12.4; 466 | LD_RUNPATH_SEARCH_PATHS = ( 467 | "$(inherited)", 468 | "@executable_path/Frameworks", 469 | "@loader_path/Frameworks", 470 | ); 471 | OTHER_LDFLAGS = ( 472 | "-ObjC", 473 | "-lc++", 474 | "$(inherited)", 475 | ); 476 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 477 | PRODUCT_NAME = "$(TARGET_NAME)"; 478 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/PickerDemo.app/PickerDemo"; 479 | }; 480 | name = Release; 481 | }; 482 | 13B07F941A680F5B00A75B9A /* Debug */ = { 483 | isa = XCBuildConfiguration; 484 | baseConfigurationReference = 3B4392A12AC88292D35C810B /* Pods-PickerDemo.debug.xcconfig */; 485 | buildSettings = { 486 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 487 | CLANG_ENABLE_MODULES = YES; 488 | CURRENT_PROJECT_VERSION = 1; 489 | ENABLE_BITCODE = NO; 490 | INFOPLIST_FILE = PickerDemo/Info.plist; 491 | LD_RUNPATH_SEARCH_PATHS = ( 492 | "$(inherited)", 493 | "@executable_path/Frameworks", 494 | ); 495 | MARKETING_VERSION = 1.0; 496 | OTHER_LDFLAGS = ( 497 | "$(inherited)", 498 | "-ObjC", 499 | "-lc++", 500 | ); 501 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 502 | PRODUCT_NAME = PickerDemo; 503 | SWIFT_OPTIMIZATION_LEVEL = "-Onone"; 504 | SWIFT_VERSION = 5.0; 505 | VERSIONING_SYSTEM = "apple-generic"; 506 | }; 507 | name = Debug; 508 | }; 509 | 13B07F951A680F5B00A75B9A /* Release */ = { 510 | isa = XCBuildConfiguration; 511 | baseConfigurationReference = 5709B34CF0A7D63546082F79 /* Pods-PickerDemo.release.xcconfig */; 512 | buildSettings = { 513 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 514 | CLANG_ENABLE_MODULES = YES; 515 | CURRENT_PROJECT_VERSION = 1; 516 | INFOPLIST_FILE = PickerDemo/Info.plist; 517 | LD_RUNPATH_SEARCH_PATHS = ( 518 | "$(inherited)", 519 | "@executable_path/Frameworks", 520 | ); 521 | MARKETING_VERSION = 1.0; 522 | OTHER_LDFLAGS = ( 523 | "$(inherited)", 524 | "-ObjC", 525 | "-lc++", 526 | ); 527 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 528 | PRODUCT_NAME = PickerDemo; 529 | SWIFT_VERSION = 5.0; 530 | VERSIONING_SYSTEM = "apple-generic"; 531 | }; 532 | name = Release; 533 | }; 534 | 83CBBA201A601CBA00E9B192 /* Debug */ = { 535 | isa = XCBuildConfiguration; 536 | buildSettings = { 537 | ALWAYS_SEARCH_USER_PATHS = NO; 538 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 539 | CLANG_CXX_LANGUAGE_STANDARD = "c++17"; 540 | CLANG_CXX_LIBRARY = "libc++"; 541 | CLANG_ENABLE_MODULES = YES; 542 | CLANG_ENABLE_OBJC_ARC = YES; 543 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 544 | CLANG_WARN_BOOL_CONVERSION = YES; 545 | CLANG_WARN_COMMA = YES; 546 | CLANG_WARN_CONSTANT_CONVERSION = YES; 547 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 548 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 549 | CLANG_WARN_EMPTY_BODY = YES; 550 | CLANG_WARN_ENUM_CONVERSION = YES; 551 | CLANG_WARN_INFINITE_RECURSION = YES; 552 | CLANG_WARN_INT_CONVERSION = YES; 553 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 554 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 555 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 556 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 557 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 558 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 559 | CLANG_WARN_STRICT_PROTOTYPES = YES; 560 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 561 | CLANG_WARN_UNREACHABLE_CODE = YES; 562 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 563 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 564 | COPY_PHASE_STRIP = NO; 565 | ENABLE_STRICT_OBJC_MSGSEND = YES; 566 | ENABLE_TESTABILITY = YES; 567 | "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386; 568 | GCC_C_LANGUAGE_STANDARD = gnu99; 569 | GCC_DYNAMIC_NO_PIC = NO; 570 | GCC_NO_COMMON_BLOCKS = YES; 571 | GCC_OPTIMIZATION_LEVEL = 0; 572 | GCC_PREPROCESSOR_DEFINITIONS = ( 573 | "DEBUG=1", 574 | "$(inherited)", 575 | _LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION, 576 | ); 577 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 578 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 579 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 580 | GCC_WARN_UNDECLARED_SELECTOR = YES; 581 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 582 | GCC_WARN_UNUSED_FUNCTION = YES; 583 | GCC_WARN_UNUSED_VARIABLE = YES; 584 | IPHONEOS_DEPLOYMENT_TARGET = 12.4; 585 | LD_RUNPATH_SEARCH_PATHS = ( 586 | /usr/lib/swift, 587 | "$(inherited)", 588 | ); 589 | LIBRARY_SEARCH_PATHS = ( 590 | "\"$(SDKROOT)/usr/lib/swift\"", 591 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 592 | "\"$(inherited)\"", 593 | ); 594 | MTL_ENABLE_DEBUG_INFO = YES; 595 | ONLY_ACTIVE_ARCH = YES; 596 | OTHER_CFLAGS = "$(inherited)"; 597 | OTHER_CPLUSPLUSFLAGS = ( 598 | "$(OTHER_CFLAGS)", 599 | "-DFOLLY_NO_CONFIG", 600 | "-DFOLLY_MOBILE=1", 601 | "-DFOLLY_USE_LIBCPP=1", 602 | ); 603 | OTHER_LDFLAGS = ( 604 | "$(inherited)", 605 | " ", 606 | ); 607 | REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; 608 | SDKROOT = iphoneos; 609 | }; 610 | name = Debug; 611 | }; 612 | 83CBBA211A601CBA00E9B192 /* Release */ = { 613 | isa = XCBuildConfiguration; 614 | buildSettings = { 615 | ALWAYS_SEARCH_USER_PATHS = NO; 616 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 617 | CLANG_CXX_LANGUAGE_STANDARD = "c++17"; 618 | CLANG_CXX_LIBRARY = "libc++"; 619 | CLANG_ENABLE_MODULES = YES; 620 | CLANG_ENABLE_OBJC_ARC = YES; 621 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 622 | CLANG_WARN_BOOL_CONVERSION = YES; 623 | CLANG_WARN_COMMA = YES; 624 | CLANG_WARN_CONSTANT_CONVERSION = YES; 625 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 626 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 627 | CLANG_WARN_EMPTY_BODY = YES; 628 | CLANG_WARN_ENUM_CONVERSION = YES; 629 | CLANG_WARN_INFINITE_RECURSION = YES; 630 | CLANG_WARN_INT_CONVERSION = YES; 631 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 632 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 633 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 634 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 635 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 636 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 637 | CLANG_WARN_STRICT_PROTOTYPES = YES; 638 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 639 | CLANG_WARN_UNREACHABLE_CODE = YES; 640 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 641 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 642 | COPY_PHASE_STRIP = YES; 643 | ENABLE_NS_ASSERTIONS = NO; 644 | ENABLE_STRICT_OBJC_MSGSEND = YES; 645 | "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386; 646 | GCC_C_LANGUAGE_STANDARD = gnu99; 647 | GCC_NO_COMMON_BLOCKS = YES; 648 | GCC_PREPROCESSOR_DEFINITIONS = ( 649 | "$(inherited)", 650 | _LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION, 651 | ); 652 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 653 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 654 | GCC_WARN_UNDECLARED_SELECTOR = YES; 655 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 656 | GCC_WARN_UNUSED_FUNCTION = YES; 657 | GCC_WARN_UNUSED_VARIABLE = YES; 658 | IPHONEOS_DEPLOYMENT_TARGET = 12.4; 659 | LD_RUNPATH_SEARCH_PATHS = ( 660 | /usr/lib/swift, 661 | "$(inherited)", 662 | ); 663 | LIBRARY_SEARCH_PATHS = ( 664 | "\"$(SDKROOT)/usr/lib/swift\"", 665 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 666 | "\"$(inherited)\"", 667 | ); 668 | MTL_ENABLE_DEBUG_INFO = NO; 669 | OTHER_CFLAGS = "$(inherited)"; 670 | OTHER_CPLUSPLUSFLAGS = ( 671 | "$(OTHER_CFLAGS)", 672 | "-DFOLLY_NO_CONFIG", 673 | "-DFOLLY_MOBILE=1", 674 | "-DFOLLY_USE_LIBCPP=1", 675 | ); 676 | OTHER_LDFLAGS = ( 677 | "$(inherited)", 678 | " ", 679 | ); 680 | REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; 681 | SDKROOT = iphoneos; 682 | VALIDATE_PRODUCT = YES; 683 | }; 684 | name = Release; 685 | }; 686 | /* End XCBuildConfiguration section */ 687 | 688 | /* Begin XCConfigurationList section */ 689 | 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "KingTests" */ = { 690 | isa = XCConfigurationList; 691 | buildConfigurations = ( 692 | 00E356F61AD99517003FC87E /* Debug */, 693 | 00E356F71AD99517003FC87E /* Release */, 694 | ); 695 | defaultConfigurationIsVisible = 0; 696 | defaultConfigurationName = Release; 697 | }; 698 | 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "PickerDemo" */ = { 699 | isa = XCConfigurationList; 700 | buildConfigurations = ( 701 | 13B07F941A680F5B00A75B9A /* Debug */, 702 | 13B07F951A680F5B00A75B9A /* Release */, 703 | ); 704 | defaultConfigurationIsVisible = 0; 705 | defaultConfigurationName = Release; 706 | }; 707 | 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "PickerDemo" */ = { 708 | isa = XCConfigurationList; 709 | buildConfigurations = ( 710 | 83CBBA201A601CBA00E9B192 /* Debug */, 711 | 83CBBA211A601CBA00E9B192 /* Release */, 712 | ); 713 | defaultConfigurationIsVisible = 0; 714 | defaultConfigurationName = Release; 715 | }; 716 | /* End XCConfigurationList section */ 717 | }; 718 | rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; 719 | } 720 | -------------------------------------------------------------------------------- /Example/ios/King.xcodeproj/xcshareddata/xcschemes/King.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 33 | 39 | 40 | 41 | 42 | 43 | 53 | 55 | 61 | 62 | 63 | 64 | 70 | 72 | 78 | 79 | 80 | 81 | 83 | 84 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /Example/ios/King.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Example/ios/King/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : RCTAppDelegate 5 | 6 | @end 7 | -------------------------------------------------------------------------------- /Example/ios/King/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | 5 | @implementation AppDelegate 6 | 7 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 8 | { 9 | self.moduleName = @"PickerDemo"; 10 | // You can add your custom initial props in the dictionary below. 11 | // They will be passed down to the ViewController used by React Native. 12 | self.initialProps = @{}; 13 | 14 | return [super application:application didFinishLaunchingWithOptions:launchOptions]; 15 | } 16 | 17 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 18 | { 19 | #if DEBUG 20 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 21 | #else 22 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 23 | #endif 24 | } 25 | 26 | @end 27 | -------------------------------------------------------------------------------- /Example/ios/King/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /Example/ios/King/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Example/ios/King/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | PickerDemo 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | $(MARKETING_VERSION) 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | $(CURRENT_PROJECT_VERSION) 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSExceptionDomains 30 | 31 | localhost 32 | 33 | NSExceptionAllowsInsecureHTTPLoads 34 | 35 | 36 | 37 | 38 | NSLocationWhenInUseUsageDescription 39 | 40 | UILaunchStoryboardName 41 | LaunchScreen 42 | UIRequiredDeviceCapabilities 43 | 44 | armv7 45 | 46 | UISupportedInterfaceOrientations 47 | 48 | UIInterfaceOrientationPortrait 49 | UIInterfaceOrientationLandscapeLeft 50 | UIInterfaceOrientationLandscapeRight 51 | 52 | UIViewControllerBasedStatusBarAppearance 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /Example/ios/King/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Example/ios/King/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /Example/ios/KingTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /Example/ios/KingTests/KingTests.m: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import 5 | #import 6 | 7 | #define TIMEOUT_SECONDS 600 8 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 9 | 10 | @interface KingTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation KingTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction( 38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 39 | if (level >= RCTLogLevelError) { 40 | redboxError = message; 41 | } 42 | }); 43 | #endif 44 | 45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 48 | 49 | foundElement = [self findSubviewInView:vc.view 50 | matching:^BOOL(UIView *view) { 51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 52 | return YES; 53 | } 54 | return NO; 55 | }]; 56 | } 57 | 58 | #ifdef DEBUG 59 | RCTSetLogFunction(RCTDefaultLogFunction); 60 | #endif 61 | 62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 64 | } 65 | 66 | @end 67 | -------------------------------------------------------------------------------- /Example/ios/Podfile: -------------------------------------------------------------------------------- 1 | # Resolve react_native_pods.rb with node to allow for hoisting 2 | require Pod::Executable.execute_command('node', ['-p', 3 | 'require.resolve( 4 | "react-native/scripts/react_native_pods.rb", 5 | {paths: [process.argv[1]]}, 6 | )', __dir__]).strip 7 | 8 | platform :ios, min_ios_version_supported 9 | prepare_react_native_project! 10 | 11 | # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set. 12 | # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded 13 | # 14 | # To fix this you can also exclude `react-native-flipper` using a `react-native.config.js` 15 | # ```js 16 | # module.exports = { 17 | # dependencies: { 18 | # ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}), 19 | # ``` 20 | flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled 21 | 22 | linkage = ENV['USE_FRAMEWORKS'] 23 | if linkage != nil 24 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 25 | use_frameworks! :linkage => linkage.to_sym 26 | end 27 | 28 | target 'PickerDemo' do 29 | config = use_native_modules! 30 | 31 | # Flags change depending on the env values. 32 | flags = get_default_flags() 33 | 34 | use_react_native!( 35 | :path => config[:reactNativePath], 36 | # Hermes is now enabled by default. Disable by setting this flag to false. 37 | :hermes_enabled => flags[:hermes_enabled], 38 | :fabric_enabled => flags[:fabric_enabled], 39 | # Enables Flipper. 40 | # 41 | # Note that if you have use_frameworks! enabled, Flipper will not work and 42 | # you should disable the next line. 43 | :flipper_configuration => flipper_config, 44 | # An absolute path to your application root. 45 | :app_path => "#{Pod::Config.instance.installation_root}/.." 46 | ) 47 | 48 | target 'KingTests' do 49 | inherit! :complete 50 | # Pods for testing 51 | end 52 | 53 | post_install do |installer| 54 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 55 | react_native_post_install( 56 | installer, 57 | config[:reactNativePath], 58 | :mac_catalyst_enabled => false 59 | ) 60 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 61 | end 62 | end 63 | -------------------------------------------------------------------------------- /Example/ios/Podfile.lock: -------------------------------------------------------------------------------- 1 | PODS: 2 | - boost (1.76.0) 3 | - CocoaAsyncSocket (7.6.5) 4 | - DoubleConversion (1.1.6) 5 | - FBLazyVector (0.72.6) 6 | - FBReactNativeSpec (0.72.6): 7 | - RCT-Folly (= 2021.07.22.00) 8 | - RCTRequired (= 0.72.6) 9 | - RCTTypeSafety (= 0.72.6) 10 | - React-Core (= 0.72.6) 11 | - React-jsi (= 0.72.6) 12 | - ReactCommon/turbomodule/core (= 0.72.6) 13 | - Flipper (0.182.0): 14 | - Flipper-Folly (~> 2.6) 15 | - Flipper-Boost-iOSX (1.76.0.1.11) 16 | - Flipper-DoubleConversion (3.2.0.1) 17 | - Flipper-Fmt (7.1.7) 18 | - Flipper-Folly (2.6.10): 19 | - Flipper-Boost-iOSX 20 | - Flipper-DoubleConversion 21 | - Flipper-Fmt (= 7.1.7) 22 | - Flipper-Glog 23 | - libevent (~> 2.1.12) 24 | - OpenSSL-Universal (= 1.1.1100) 25 | - Flipper-Glog (0.5.0.5) 26 | - Flipper-PeerTalk (0.0.4) 27 | - FlipperKit (0.182.0): 28 | - FlipperKit/Core (= 0.182.0) 29 | - FlipperKit/Core (0.182.0): 30 | - Flipper (~> 0.182.0) 31 | - FlipperKit/CppBridge 32 | - FlipperKit/FBCxxFollyDynamicConvert 33 | - FlipperKit/FBDefines 34 | - FlipperKit/FKPortForwarding 35 | - SocketRocket (~> 0.6.0) 36 | - FlipperKit/CppBridge (0.182.0): 37 | - Flipper (~> 0.182.0) 38 | - FlipperKit/FBCxxFollyDynamicConvert (0.182.0): 39 | - Flipper-Folly (~> 2.6) 40 | - FlipperKit/FBDefines (0.182.0) 41 | - FlipperKit/FKPortForwarding (0.182.0): 42 | - CocoaAsyncSocket (~> 7.6) 43 | - Flipper-PeerTalk (~> 0.0.4) 44 | - FlipperKit/FlipperKitHighlightOverlay (0.182.0) 45 | - FlipperKit/FlipperKitLayoutHelpers (0.182.0): 46 | - FlipperKit/Core 47 | - FlipperKit/FlipperKitHighlightOverlay 48 | - FlipperKit/FlipperKitLayoutTextSearchable 49 | - FlipperKit/FlipperKitLayoutIOSDescriptors (0.182.0): 50 | - FlipperKit/Core 51 | - FlipperKit/FlipperKitHighlightOverlay 52 | - FlipperKit/FlipperKitLayoutHelpers 53 | - YogaKit (~> 1.18) 54 | - FlipperKit/FlipperKitLayoutPlugin (0.182.0): 55 | - FlipperKit/Core 56 | - FlipperKit/FlipperKitHighlightOverlay 57 | - FlipperKit/FlipperKitLayoutHelpers 58 | - FlipperKit/FlipperKitLayoutIOSDescriptors 59 | - FlipperKit/FlipperKitLayoutTextSearchable 60 | - YogaKit (~> 1.18) 61 | - FlipperKit/FlipperKitLayoutTextSearchable (0.182.0) 62 | - FlipperKit/FlipperKitNetworkPlugin (0.182.0): 63 | - FlipperKit/Core 64 | - FlipperKit/FlipperKitReactPlugin (0.182.0): 65 | - FlipperKit/Core 66 | - FlipperKit/FlipperKitUserDefaultsPlugin (0.182.0): 67 | - FlipperKit/Core 68 | - FlipperKit/SKIOSNetworkPlugin (0.182.0): 69 | - FlipperKit/Core 70 | - FlipperKit/FlipperKitNetworkPlugin 71 | - fmt (6.2.1) 72 | - glog (0.3.5) 73 | - hermes-engine (0.72.6): 74 | - hermes-engine/Pre-built (= 0.72.6) 75 | - hermes-engine/Pre-built (0.72.6) 76 | - libevent (2.1.12) 77 | - OpenSSL-Universal (1.1.1100) 78 | - RCT-Folly (2021.07.22.00): 79 | - boost 80 | - DoubleConversion 81 | - fmt (~> 6.2.1) 82 | - glog 83 | - RCT-Folly/Default (= 2021.07.22.00) 84 | - RCT-Folly/Default (2021.07.22.00): 85 | - boost 86 | - DoubleConversion 87 | - fmt (~> 6.2.1) 88 | - glog 89 | - RCT-Folly/Futures (2021.07.22.00): 90 | - boost 91 | - DoubleConversion 92 | - fmt (~> 6.2.1) 93 | - glog 94 | - libevent 95 | - RCTRequired (0.72.6) 96 | - RCTTypeSafety (0.72.6): 97 | - FBLazyVector (= 0.72.6) 98 | - RCTRequired (= 0.72.6) 99 | - React-Core (= 0.72.6) 100 | - React (0.72.6): 101 | - React-Core (= 0.72.6) 102 | - React-Core/DevSupport (= 0.72.6) 103 | - React-Core/RCTWebSocket (= 0.72.6) 104 | - React-RCTActionSheet (= 0.72.6) 105 | - React-RCTAnimation (= 0.72.6) 106 | - React-RCTBlob (= 0.72.6) 107 | - React-RCTImage (= 0.72.6) 108 | - React-RCTLinking (= 0.72.6) 109 | - React-RCTNetwork (= 0.72.6) 110 | - React-RCTSettings (= 0.72.6) 111 | - React-RCTText (= 0.72.6) 112 | - React-RCTVibration (= 0.72.6) 113 | - React-callinvoker (0.72.6) 114 | - React-Codegen (0.72.6): 115 | - DoubleConversion 116 | - FBReactNativeSpec 117 | - glog 118 | - hermes-engine 119 | - RCT-Folly 120 | - RCTRequired 121 | - RCTTypeSafety 122 | - React-Core 123 | - React-jsi 124 | - React-jsiexecutor 125 | - React-NativeModulesApple 126 | - React-rncore 127 | - ReactCommon/turbomodule/bridging 128 | - ReactCommon/turbomodule/core 129 | - React-Core (0.72.6): 130 | - glog 131 | - hermes-engine 132 | - RCT-Folly (= 2021.07.22.00) 133 | - React-Core/Default (= 0.72.6) 134 | - React-cxxreact 135 | - React-hermes 136 | - React-jsi 137 | - React-jsiexecutor 138 | - React-perflogger 139 | - React-runtimeexecutor 140 | - React-utils 141 | - SocketRocket (= 0.6.1) 142 | - Yoga 143 | - React-Core/CoreModulesHeaders (0.72.6): 144 | - glog 145 | - hermes-engine 146 | - RCT-Folly (= 2021.07.22.00) 147 | - React-Core/Default 148 | - React-cxxreact 149 | - React-hermes 150 | - React-jsi 151 | - React-jsiexecutor 152 | - React-perflogger 153 | - React-runtimeexecutor 154 | - React-utils 155 | - SocketRocket (= 0.6.1) 156 | - Yoga 157 | - React-Core/Default (0.72.6): 158 | - glog 159 | - hermes-engine 160 | - RCT-Folly (= 2021.07.22.00) 161 | - React-cxxreact 162 | - React-hermes 163 | - React-jsi 164 | - React-jsiexecutor 165 | - React-perflogger 166 | - React-runtimeexecutor 167 | - React-utils 168 | - SocketRocket (= 0.6.1) 169 | - Yoga 170 | - React-Core/DevSupport (0.72.6): 171 | - glog 172 | - hermes-engine 173 | - RCT-Folly (= 2021.07.22.00) 174 | - React-Core/Default (= 0.72.6) 175 | - React-Core/RCTWebSocket (= 0.72.6) 176 | - React-cxxreact 177 | - React-hermes 178 | - React-jsi 179 | - React-jsiexecutor 180 | - React-jsinspector (= 0.72.6) 181 | - React-perflogger 182 | - React-runtimeexecutor 183 | - React-utils 184 | - SocketRocket (= 0.6.1) 185 | - Yoga 186 | - React-Core/RCTActionSheetHeaders (0.72.6): 187 | - glog 188 | - hermes-engine 189 | - RCT-Folly (= 2021.07.22.00) 190 | - React-Core/Default 191 | - React-cxxreact 192 | - React-hermes 193 | - React-jsi 194 | - React-jsiexecutor 195 | - React-perflogger 196 | - React-runtimeexecutor 197 | - React-utils 198 | - SocketRocket (= 0.6.1) 199 | - Yoga 200 | - React-Core/RCTAnimationHeaders (0.72.6): 201 | - glog 202 | - hermes-engine 203 | - RCT-Folly (= 2021.07.22.00) 204 | - React-Core/Default 205 | - React-cxxreact 206 | - React-hermes 207 | - React-jsi 208 | - React-jsiexecutor 209 | - React-perflogger 210 | - React-runtimeexecutor 211 | - React-utils 212 | - SocketRocket (= 0.6.1) 213 | - Yoga 214 | - React-Core/RCTBlobHeaders (0.72.6): 215 | - glog 216 | - hermes-engine 217 | - RCT-Folly (= 2021.07.22.00) 218 | - React-Core/Default 219 | - React-cxxreact 220 | - React-hermes 221 | - React-jsi 222 | - React-jsiexecutor 223 | - React-perflogger 224 | - React-runtimeexecutor 225 | - React-utils 226 | - SocketRocket (= 0.6.1) 227 | - Yoga 228 | - React-Core/RCTImageHeaders (0.72.6): 229 | - glog 230 | - hermes-engine 231 | - RCT-Folly (= 2021.07.22.00) 232 | - React-Core/Default 233 | - React-cxxreact 234 | - React-hermes 235 | - React-jsi 236 | - React-jsiexecutor 237 | - React-perflogger 238 | - React-runtimeexecutor 239 | - React-utils 240 | - SocketRocket (= 0.6.1) 241 | - Yoga 242 | - React-Core/RCTLinkingHeaders (0.72.6): 243 | - glog 244 | - hermes-engine 245 | - RCT-Folly (= 2021.07.22.00) 246 | - React-Core/Default 247 | - React-cxxreact 248 | - React-hermes 249 | - React-jsi 250 | - React-jsiexecutor 251 | - React-perflogger 252 | - React-runtimeexecutor 253 | - React-utils 254 | - SocketRocket (= 0.6.1) 255 | - Yoga 256 | - React-Core/RCTNetworkHeaders (0.72.6): 257 | - glog 258 | - hermes-engine 259 | - RCT-Folly (= 2021.07.22.00) 260 | - React-Core/Default 261 | - React-cxxreact 262 | - React-hermes 263 | - React-jsi 264 | - React-jsiexecutor 265 | - React-perflogger 266 | - React-runtimeexecutor 267 | - React-utils 268 | - SocketRocket (= 0.6.1) 269 | - Yoga 270 | - React-Core/RCTSettingsHeaders (0.72.6): 271 | - glog 272 | - hermes-engine 273 | - RCT-Folly (= 2021.07.22.00) 274 | - React-Core/Default 275 | - React-cxxreact 276 | - React-hermes 277 | - React-jsi 278 | - React-jsiexecutor 279 | - React-perflogger 280 | - React-runtimeexecutor 281 | - React-utils 282 | - SocketRocket (= 0.6.1) 283 | - Yoga 284 | - React-Core/RCTTextHeaders (0.72.6): 285 | - glog 286 | - hermes-engine 287 | - RCT-Folly (= 2021.07.22.00) 288 | - React-Core/Default 289 | - React-cxxreact 290 | - React-hermes 291 | - React-jsi 292 | - React-jsiexecutor 293 | - React-perflogger 294 | - React-runtimeexecutor 295 | - React-utils 296 | - SocketRocket (= 0.6.1) 297 | - Yoga 298 | - React-Core/RCTVibrationHeaders (0.72.6): 299 | - glog 300 | - hermes-engine 301 | - RCT-Folly (= 2021.07.22.00) 302 | - React-Core/Default 303 | - React-cxxreact 304 | - React-hermes 305 | - React-jsi 306 | - React-jsiexecutor 307 | - React-perflogger 308 | - React-runtimeexecutor 309 | - React-utils 310 | - SocketRocket (= 0.6.1) 311 | - Yoga 312 | - React-Core/RCTWebSocket (0.72.6): 313 | - glog 314 | - hermes-engine 315 | - RCT-Folly (= 2021.07.22.00) 316 | - React-Core/Default (= 0.72.6) 317 | - React-cxxreact 318 | - React-hermes 319 | - React-jsi 320 | - React-jsiexecutor 321 | - React-perflogger 322 | - React-runtimeexecutor 323 | - React-utils 324 | - SocketRocket (= 0.6.1) 325 | - Yoga 326 | - React-CoreModules (0.72.6): 327 | - RCT-Folly (= 2021.07.22.00) 328 | - RCTTypeSafety (= 0.72.6) 329 | - React-Codegen (= 0.72.6) 330 | - React-Core/CoreModulesHeaders (= 0.72.6) 331 | - React-jsi (= 0.72.6) 332 | - React-RCTBlob 333 | - React-RCTImage (= 0.72.6) 334 | - ReactCommon/turbomodule/core (= 0.72.6) 335 | - SocketRocket (= 0.6.1) 336 | - React-cxxreact (0.72.6): 337 | - boost (= 1.76.0) 338 | - DoubleConversion 339 | - glog 340 | - hermes-engine 341 | - RCT-Folly (= 2021.07.22.00) 342 | - React-callinvoker (= 0.72.6) 343 | - React-debug (= 0.72.6) 344 | - React-jsi (= 0.72.6) 345 | - React-jsinspector (= 0.72.6) 346 | - React-logger (= 0.72.6) 347 | - React-perflogger (= 0.72.6) 348 | - React-runtimeexecutor (= 0.72.6) 349 | - React-debug (0.72.6) 350 | - React-hermes (0.72.6): 351 | - DoubleConversion 352 | - glog 353 | - hermes-engine 354 | - RCT-Folly (= 2021.07.22.00) 355 | - RCT-Folly/Futures (= 2021.07.22.00) 356 | - React-cxxreact (= 0.72.6) 357 | - React-jsi 358 | - React-jsiexecutor (= 0.72.6) 359 | - React-jsinspector (= 0.72.6) 360 | - React-perflogger (= 0.72.6) 361 | - React-jsi (0.72.6): 362 | - boost (= 1.76.0) 363 | - DoubleConversion 364 | - glog 365 | - hermes-engine 366 | - RCT-Folly (= 2021.07.22.00) 367 | - React-jsiexecutor (0.72.6): 368 | - DoubleConversion 369 | - glog 370 | - hermes-engine 371 | - RCT-Folly (= 2021.07.22.00) 372 | - React-cxxreact (= 0.72.6) 373 | - React-jsi (= 0.72.6) 374 | - React-perflogger (= 0.72.6) 375 | - React-jsinspector (0.72.6) 376 | - React-logger (0.72.6): 377 | - glog 378 | - React-NativeModulesApple (0.72.6): 379 | - hermes-engine 380 | - React-callinvoker 381 | - React-Core 382 | - React-cxxreact 383 | - React-jsi 384 | - React-runtimeexecutor 385 | - ReactCommon/turbomodule/bridging 386 | - ReactCommon/turbomodule/core 387 | - React-perflogger (0.72.6) 388 | - React-RCTActionSheet (0.72.6): 389 | - React-Core/RCTActionSheetHeaders (= 0.72.6) 390 | - React-RCTAnimation (0.72.6): 391 | - RCT-Folly (= 2021.07.22.00) 392 | - RCTTypeSafety (= 0.72.6) 393 | - React-Codegen (= 0.72.6) 394 | - React-Core/RCTAnimationHeaders (= 0.72.6) 395 | - React-jsi (= 0.72.6) 396 | - ReactCommon/turbomodule/core (= 0.72.6) 397 | - React-RCTAppDelegate (0.72.6): 398 | - RCT-Folly 399 | - RCTRequired 400 | - RCTTypeSafety 401 | - React-Core 402 | - React-CoreModules 403 | - React-hermes 404 | - React-NativeModulesApple 405 | - React-RCTImage 406 | - React-RCTNetwork 407 | - React-runtimescheduler 408 | - ReactCommon/turbomodule/core 409 | - React-RCTBlob (0.72.6): 410 | - hermes-engine 411 | - RCT-Folly (= 2021.07.22.00) 412 | - React-Codegen (= 0.72.6) 413 | - React-Core/RCTBlobHeaders (= 0.72.6) 414 | - React-Core/RCTWebSocket (= 0.72.6) 415 | - React-jsi (= 0.72.6) 416 | - React-RCTNetwork (= 0.72.6) 417 | - ReactCommon/turbomodule/core (= 0.72.6) 418 | - React-RCTImage (0.72.6): 419 | - RCT-Folly (= 2021.07.22.00) 420 | - RCTTypeSafety (= 0.72.6) 421 | - React-Codegen (= 0.72.6) 422 | - React-Core/RCTImageHeaders (= 0.72.6) 423 | - React-jsi (= 0.72.6) 424 | - React-RCTNetwork (= 0.72.6) 425 | - ReactCommon/turbomodule/core (= 0.72.6) 426 | - React-RCTLinking (0.72.6): 427 | - React-Codegen (= 0.72.6) 428 | - React-Core/RCTLinkingHeaders (= 0.72.6) 429 | - React-jsi (= 0.72.6) 430 | - ReactCommon/turbomodule/core (= 0.72.6) 431 | - React-RCTNetwork (0.72.6): 432 | - RCT-Folly (= 2021.07.22.00) 433 | - RCTTypeSafety (= 0.72.6) 434 | - React-Codegen (= 0.72.6) 435 | - React-Core/RCTNetworkHeaders (= 0.72.6) 436 | - React-jsi (= 0.72.6) 437 | - ReactCommon/turbomodule/core (= 0.72.6) 438 | - React-RCTSettings (0.72.6): 439 | - RCT-Folly (= 2021.07.22.00) 440 | - RCTTypeSafety (= 0.72.6) 441 | - React-Codegen (= 0.72.6) 442 | - React-Core/RCTSettingsHeaders (= 0.72.6) 443 | - React-jsi (= 0.72.6) 444 | - ReactCommon/turbomodule/core (= 0.72.6) 445 | - React-RCTText (0.72.6): 446 | - React-Core/RCTTextHeaders (= 0.72.6) 447 | - React-RCTVibration (0.72.6): 448 | - RCT-Folly (= 2021.07.22.00) 449 | - React-Codegen (= 0.72.6) 450 | - React-Core/RCTVibrationHeaders (= 0.72.6) 451 | - React-jsi (= 0.72.6) 452 | - ReactCommon/turbomodule/core (= 0.72.6) 453 | - React-rncore (0.72.6) 454 | - React-runtimeexecutor (0.72.6): 455 | - React-jsi (= 0.72.6) 456 | - React-runtimescheduler (0.72.6): 457 | - glog 458 | - hermes-engine 459 | - RCT-Folly (= 2021.07.22.00) 460 | - React-callinvoker 461 | - React-debug 462 | - React-jsi 463 | - React-runtimeexecutor 464 | - React-utils (0.72.6): 465 | - glog 466 | - RCT-Folly (= 2021.07.22.00) 467 | - React-debug 468 | - ReactCommon/turbomodule/bridging (0.72.6): 469 | - DoubleConversion 470 | - glog 471 | - hermes-engine 472 | - RCT-Folly (= 2021.07.22.00) 473 | - React-callinvoker (= 0.72.6) 474 | - React-cxxreact (= 0.72.6) 475 | - React-jsi (= 0.72.6) 476 | - React-logger (= 0.72.6) 477 | - React-perflogger (= 0.72.6) 478 | - ReactCommon/turbomodule/core (0.72.6): 479 | - DoubleConversion 480 | - glog 481 | - hermes-engine 482 | - RCT-Folly (= 2021.07.22.00) 483 | - React-callinvoker (= 0.72.6) 484 | - React-cxxreact (= 0.72.6) 485 | - React-jsi (= 0.72.6) 486 | - React-logger (= 0.72.6) 487 | - React-perflogger (= 0.72.6) 488 | - SocketRocket (0.6.1) 489 | - Yoga (1.14.0) 490 | - YogaKit (1.18.1): 491 | - Yoga (~> 1.14) 492 | 493 | DEPENDENCIES: 494 | - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`) 495 | - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`) 496 | - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) 497 | - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`) 498 | - Flipper (= 0.182.0) 499 | - Flipper-Boost-iOSX (= 1.76.0.1.11) 500 | - Flipper-DoubleConversion (= 3.2.0.1) 501 | - Flipper-Fmt (= 7.1.7) 502 | - Flipper-Folly (= 2.6.10) 503 | - Flipper-Glog (= 0.5.0.5) 504 | - Flipper-PeerTalk (= 0.0.4) 505 | - FlipperKit (= 0.182.0) 506 | - FlipperKit/Core (= 0.182.0) 507 | - FlipperKit/CppBridge (= 0.182.0) 508 | - FlipperKit/FBCxxFollyDynamicConvert (= 0.182.0) 509 | - FlipperKit/FBDefines (= 0.182.0) 510 | - FlipperKit/FKPortForwarding (= 0.182.0) 511 | - FlipperKit/FlipperKitHighlightOverlay (= 0.182.0) 512 | - FlipperKit/FlipperKitLayoutPlugin (= 0.182.0) 513 | - FlipperKit/FlipperKitLayoutTextSearchable (= 0.182.0) 514 | - FlipperKit/FlipperKitNetworkPlugin (= 0.182.0) 515 | - FlipperKit/FlipperKitReactPlugin (= 0.182.0) 516 | - FlipperKit/FlipperKitUserDefaultsPlugin (= 0.182.0) 517 | - FlipperKit/SKIOSNetworkPlugin (= 0.182.0) 518 | - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`) 519 | - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`) 520 | - libevent (~> 2.1.12) 521 | - OpenSSL-Universal (= 1.1.1100) 522 | - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`) 523 | - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`) 524 | - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`) 525 | - React (from `../node_modules/react-native/`) 526 | - React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`) 527 | - React-Codegen (from `build/generated/ios`) 528 | - React-Core (from `../node_modules/react-native/`) 529 | - React-Core/DevSupport (from `../node_modules/react-native/`) 530 | - React-Core/RCTWebSocket (from `../node_modules/react-native/`) 531 | - React-CoreModules (from `../node_modules/react-native/React/CoreModules`) 532 | - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`) 533 | - React-debug (from `../node_modules/react-native/ReactCommon/react/debug`) 534 | - React-hermes (from `../node_modules/react-native/ReactCommon/hermes`) 535 | - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`) 536 | - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) 537 | - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) 538 | - React-logger (from `../node_modules/react-native/ReactCommon/logger`) 539 | - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`) 540 | - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`) 541 | - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) 542 | - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) 543 | - React-RCTAppDelegate (from `../node_modules/react-native/Libraries/AppDelegate`) 544 | - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) 545 | - React-RCTImage (from `../node_modules/react-native/Libraries/Image`) 546 | - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`) 547 | - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`) 548 | - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`) 549 | - React-RCTText (from `../node_modules/react-native/Libraries/Text`) 550 | - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) 551 | - React-rncore (from `../node_modules/react-native/ReactCommon`) 552 | - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`) 553 | - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`) 554 | - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`) 555 | - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) 556 | - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) 557 | 558 | SPEC REPOS: 559 | trunk: 560 | - CocoaAsyncSocket 561 | - Flipper 562 | - Flipper-Boost-iOSX 563 | - Flipper-DoubleConversion 564 | - Flipper-Fmt 565 | - Flipper-Folly 566 | - Flipper-Glog 567 | - Flipper-PeerTalk 568 | - FlipperKit 569 | - fmt 570 | - libevent 571 | - OpenSSL-Universal 572 | - SocketRocket 573 | - YogaKit 574 | 575 | EXTERNAL SOURCES: 576 | boost: 577 | :podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec" 578 | DoubleConversion: 579 | :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" 580 | FBLazyVector: 581 | :path: "../node_modules/react-native/Libraries/FBLazyVector" 582 | FBReactNativeSpec: 583 | :path: "../node_modules/react-native/React/FBReactNativeSpec" 584 | glog: 585 | :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec" 586 | hermes-engine: 587 | :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec" 588 | :tag: hermes-2023-08-07-RNv0.72.4-813b2def12bc9df02654b3e3653ae4a68d0572e0 589 | RCT-Folly: 590 | :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec" 591 | RCTRequired: 592 | :path: "../node_modules/react-native/Libraries/RCTRequired" 593 | RCTTypeSafety: 594 | :path: "../node_modules/react-native/Libraries/TypeSafety" 595 | React: 596 | :path: "../node_modules/react-native/" 597 | React-callinvoker: 598 | :path: "../node_modules/react-native/ReactCommon/callinvoker" 599 | React-Codegen: 600 | :path: build/generated/ios 601 | React-Core: 602 | :path: "../node_modules/react-native/" 603 | React-CoreModules: 604 | :path: "../node_modules/react-native/React/CoreModules" 605 | React-cxxreact: 606 | :path: "../node_modules/react-native/ReactCommon/cxxreact" 607 | React-debug: 608 | :path: "../node_modules/react-native/ReactCommon/react/debug" 609 | React-hermes: 610 | :path: "../node_modules/react-native/ReactCommon/hermes" 611 | React-jsi: 612 | :path: "../node_modules/react-native/ReactCommon/jsi" 613 | React-jsiexecutor: 614 | :path: "../node_modules/react-native/ReactCommon/jsiexecutor" 615 | React-jsinspector: 616 | :path: "../node_modules/react-native/ReactCommon/jsinspector" 617 | React-logger: 618 | :path: "../node_modules/react-native/ReactCommon/logger" 619 | React-NativeModulesApple: 620 | :path: "../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios" 621 | React-perflogger: 622 | :path: "../node_modules/react-native/ReactCommon/reactperflogger" 623 | React-RCTActionSheet: 624 | :path: "../node_modules/react-native/Libraries/ActionSheetIOS" 625 | React-RCTAnimation: 626 | :path: "../node_modules/react-native/Libraries/NativeAnimation" 627 | React-RCTAppDelegate: 628 | :path: "../node_modules/react-native/Libraries/AppDelegate" 629 | React-RCTBlob: 630 | :path: "../node_modules/react-native/Libraries/Blob" 631 | React-RCTImage: 632 | :path: "../node_modules/react-native/Libraries/Image" 633 | React-RCTLinking: 634 | :path: "../node_modules/react-native/Libraries/LinkingIOS" 635 | React-RCTNetwork: 636 | :path: "../node_modules/react-native/Libraries/Network" 637 | React-RCTSettings: 638 | :path: "../node_modules/react-native/Libraries/Settings" 639 | React-RCTText: 640 | :path: "../node_modules/react-native/Libraries/Text" 641 | React-RCTVibration: 642 | :path: "../node_modules/react-native/Libraries/Vibration" 643 | React-rncore: 644 | :path: "../node_modules/react-native/ReactCommon" 645 | React-runtimeexecutor: 646 | :path: "../node_modules/react-native/ReactCommon/runtimeexecutor" 647 | React-runtimescheduler: 648 | :path: "../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler" 649 | React-utils: 650 | :path: "../node_modules/react-native/ReactCommon/react/utils" 651 | ReactCommon: 652 | :path: "../node_modules/react-native/ReactCommon" 653 | Yoga: 654 | :path: "../node_modules/react-native/ReactCommon/yoga" 655 | 656 | SPEC CHECKSUMS: 657 | boost: 57d2868c099736d80fcd648bf211b4431e51a558 658 | CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 659 | DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54 660 | FBLazyVector: 748c0ef74f2bf4b36cfcccf37916806940a64c32 661 | FBReactNativeSpec: 966f29e4e697de53a3b366355e8f57375c856ad9 662 | Flipper: 6edb735e6c3e332975d1b17956bcc584eccf5818 663 | Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c 664 | Flipper-DoubleConversion: 2dc99b02f658daf147069aad9dbd29d8feb06d30 665 | Flipper-Fmt: 60cbdd92fc254826e61d669a5d87ef7015396a9b 666 | Flipper-Folly: 584845625005ff068a6ebf41f857f468decd26b3 667 | Flipper-Glog: 70c50ce58ddaf67dc35180db05f191692570f446 668 | Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9 669 | FlipperKit: 2efad7007d6745a3f95e4034d547be637f89d3f6 670 | fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 671 | glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b 672 | hermes-engine: 8057e75cfc1437b178ac86c8654b24e7fead7f60 673 | libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 674 | OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c 675 | RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1 676 | RCTRequired: 28469809442eb4eb5528462705f7d852948c8a74 677 | RCTTypeSafety: e9c6c409fca2cc584e5b086862d562540cb38d29 678 | React: 769f469909b18edfe934f0539fffb319c4c61043 679 | React-callinvoker: e48ce12c83706401251921896576710d81e54763 680 | React-Codegen: a136b8094d39fd071994eaa935366e6be2239cb1 681 | React-Core: e548a186fb01c3a78a9aeeffa212d625ca9511bf 682 | React-CoreModules: d226b22d06ea1bc4e49d3c073b2c6cbb42265405 683 | React-cxxreact: 44a3560510ead6633b6e02f9fbbdd1772fb40f92 684 | React-debug: 238501490155574ae9f3f8dd1c74330eba30133e 685 | React-hermes: 46e66dc854124d7645c20bfec0a6be9542826ecd 686 | React-jsi: fbdaf4166bae60524b591b18c851b530c8cdb90c 687 | React-jsiexecutor: 3bf18ff7cb03cd8dfdce08fbbc0d15058c1d71ae 688 | React-jsinspector: 194e32c6aab382d88713ad3dd0025c5f5c4ee072 689 | React-logger: cebf22b6cf43434e471dc561e5911b40ac01d289 690 | React-NativeModulesApple: 02e35e9a51e10c6422f04f5e4076a7c02243fff2 691 | React-perflogger: e3596db7e753f51766bceadc061936ef1472edc3 692 | React-RCTActionSheet: 17ab132c748b4471012abbcdcf5befe860660485 693 | React-RCTAnimation: c8bbaab62be5817d2a31c36d5f2571e3f7dcf099 694 | React-RCTAppDelegate: af1c7dace233deba4b933cd1d6491fe4e3584ad1 695 | React-RCTBlob: 1bcf3a0341eb8d6950009b1ddb8aefaf46996b8c 696 | React-RCTImage: 670a3486b532292649b1aef3ffddd0b495a5cee4 697 | React-RCTLinking: bd7ab853144aed463903237e615fd91d11b4f659 698 | React-RCTNetwork: be86a621f3e4724758f23ad1fdce32474ab3d829 699 | React-RCTSettings: 4f3a29a6d23ffa639db9701bc29af43f30781058 700 | React-RCTText: adde32164a243103aaba0b1dc7b0a2599733873e 701 | React-RCTVibration: 6bd85328388ac2e82ae0ca11afe48ad5555b483a 702 | React-rncore: fda7b1ae5918fa7baa259105298a5487875a57c8 703 | React-runtimeexecutor: 57d85d942862b08f6d15441a0badff2542fd233c 704 | React-runtimescheduler: f23e337008403341177fc52ee4ca94e442c17ede 705 | React-utils: fa59c9a3375fb6f4aeb66714fd3f7f76b43a9f16 706 | ReactCommon: dd03c17275c200496f346af93a7b94c53f3093a4 707 | SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 708 | Yoga: b76f1acfda8212aa16b7e26bcce3983230c82603 709 | YogaKit: f782866e155069a2cca2517aafea43200b01fd5a 710 | 711 | PODFILE CHECKSUM: ef7c7e87d70c8a04d6d679cd036dc2e0d0a549b5 712 | 713 | COCOAPODS: 1.13.0 714 | -------------------------------------------------------------------------------- /Example/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /Example/metro.config.js: -------------------------------------------------------------------------------- 1 | const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); 2 | 3 | /** 4 | * Metro configuration 5 | * https://facebook.github.io/metro/docs/configuration 6 | * 7 | * @type {import('metro-config').MetroConfig} 8 | */ 9 | const config = {}; 10 | 11 | module.exports = mergeConfig(getDefaultConfig(__dirname), config); 12 | -------------------------------------------------------------------------------- /Example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "PickerDemo", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "lint": "eslint .", 9 | "start": "react-native start", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "react": "18.2.0", 14 | "react-native": "0.72.6", 15 | "react-native-slidepicker": "^2.0.0" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.20.0", 19 | "@babel/preset-env": "^7.20.0", 20 | "@babel/runtime": "^7.20.0", 21 | "@react-native/eslint-config": "^0.72.2", 22 | "@react-native/metro-config": "^0.72.11", 23 | "@tsconfig/react-native": "^3.0.0", 24 | "@types/react": "^18.0.24", 25 | "@types/react-test-renderer": "^18.0.0", 26 | "babel-jest": "^29.2.1", 27 | "eslint": "^8.19.0", 28 | "jest": "^29.2.1", 29 | "metro-react-native-babel-preset": "0.76.8", 30 | "prettier": "^2.4.1", 31 | "react-test-renderer": "18.2.0", 32 | "typescript": "4.8.4" 33 | }, 34 | "engines": { 35 | "node": ">=16" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /Example/src/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/Example/src/README.md -------------------------------------------------------------------------------- /Example/src/core/Header.tsx: -------------------------------------------------------------------------------- 1 | import React, {PureComponent} from 'react'; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | TextStyle, 7 | Pressable, 8 | TouchableOpacity, 9 | } from 'react-native'; 10 | 11 | interface IHeaderProps { 12 | titleText?: string; 13 | titleTextStyle?: TextStyle; 14 | cancelText?: string; 15 | cancelTextStyle?: TextStyle; 16 | onCancelClick?: () => void; 17 | confirmText?: string; 18 | confirmTextStyle?: TextStyle; 19 | HeaderComponent?: React.ReactNode; 20 | onConfirmClick?: () => void; 21 | } 22 | 23 | export default class Header extends PureComponent { 24 | static defaultProps: IHeaderProps; 25 | 26 | constructor(props: any) { 27 | super(props); 28 | } 29 | 30 | render() { 31 | const { 32 | HeaderComponent, 33 | titleText, 34 | titleTextStyle, 35 | cancelText, 36 | cancelTextStyle, 37 | confirmText, 38 | confirmTextStyle, 39 | onCancelClick, 40 | onConfirmClick, 41 | } = this.props; 42 | 43 | if (HeaderComponent) return HeaderComponent; 44 | 45 | const cancelStyle = StyleSheet.flatten([ 46 | styles.base_textStyle, 47 | cancelTextStyle, 48 | ]); 49 | 50 | const confirmStyle = StyleSheet.flatten([ 51 | styles.base_textStyle, 52 | confirmTextStyle, 53 | ]); 54 | 55 | return ( 56 | 57 | 58 | 62 | {cancelText} 63 | 64 | 65 | {titleText} 66 | 67 | 71 | {confirmText} 72 | 73 | 74 | 75 | ); 76 | } 77 | } 78 | 79 | Header.defaultProps = { 80 | cancelText: 'cancel', 81 | confirmText: 'OK', 82 | }; 83 | 84 | const styles = StyleSheet.create({ 85 | defaultHeader: { 86 | height: 50, 87 | borderTopLeftRadius: 8, 88 | borderTopRightRadius: 8, 89 | backgroundColor: '#fff', 90 | flexDirection: 'row', 91 | alignItems: 'center', 92 | }, 93 | leftBox: { 94 | flex: 1, 95 | alignItems: 'flex-start', 96 | }, 97 | rightBox: { 98 | flex: 1, 99 | alignItems: 'flex-end', 100 | }, 101 | btn: { 102 | padding: 12, 103 | }, 104 | base_textStyle: { 105 | fontSize: 15, 106 | color: 'rgb(42, 123, 152)', 107 | }, 108 | }); 109 | -------------------------------------------------------------------------------- /Example/src/core/PureCascade.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {View, StyleSheet} from 'react-native'; 3 | import Wheel from './Wheel'; 4 | import Header from './Header'; 5 | 6 | interface IParallelState { 7 | checkedIndexMarks: number[]; 8 | } 9 | 10 | class PureCascade extends Component { 11 | static defaultProps: SlidePickerType; 12 | setMarkTimer: ReturnType | null; 13 | cacheMarks: number[]; 14 | wheelRefs: any[]; 15 | 16 | constructor(props: any) { 17 | super(props); 18 | const {wheels} = this.props; 19 | const checkedMarks = new Array(wheels).fill(0); 20 | this.state = {checkedIndexMarks: checkedMarks}; 21 | this.setMarkTimer = null; 22 | this.cacheMarks = checkedMarks; 23 | this.wheelRefs = checkedMarks.map(() => React.createRef()); 24 | } 25 | 26 | componentDidMount(): void { 27 | const {values, wheels} = this.props; 28 | if (values && values.length === wheels) { 29 | const initialCheckedIndexMarks = this.getCheckMarksByValues(); 30 | this.setState({checkedIndexMarks: initialCheckedIndexMarks}, () => { 31 | this.wheelRefs.forEach((ele, i) => { 32 | ele.current.manualSetChecked(initialCheckedIndexMarks[i], false); 33 | }); 34 | }); 35 | } 36 | } 37 | 38 | componentWillUnmount(): void { 39 | this.setMarkTimer && clearTimeout(this.setMarkTimer); 40 | } 41 | 42 | setCheckMark = (locationMark: number, checkedIndex: number) => { 43 | const {wheels} = this.props; 44 | this.cacheMarks[locationMark] = checkedIndex; 45 | this.setMarkTimer && clearTimeout(this.setMarkTimer); 46 | this.setMarkTimer = setTimeout(() => { 47 | const targetMarks = [...this.cacheMarks]; 48 | if (locationMark !== wheels - 1) { 49 | targetMarks.fill(0, locationMark + 1); 50 | } 51 | this.setState({checkedIndexMarks: targetMarks}); 52 | if (locationMark !== wheels - 1) { 53 | const refs = this.wheelRefs.slice(locationMark + 1); 54 | refs.forEach(ele => ele?.current?.manualSetChecked(0, true)); 55 | } 56 | }, 200); 57 | }; 58 | 59 | getValuesByCheckMarks = () => { 60 | const {wheels, dataSource} = this.props; 61 | const result = []; 62 | let temp = dataSource as ICascadeItemsProps; 63 | for (let i = 0; i < wheels; i++) { 64 | const checkedIndex = this.state.checkedIndexMarks[i]; 65 | const wheelData = {...temp[checkedIndex]}; 66 | if (wheelData) { 67 | temp = wheelData.options || []; 68 | delete wheelData.options; 69 | result.push(wheelData); 70 | } 71 | } 72 | return result; 73 | }; 74 | 75 | getCheckMarksByValues = () => { 76 | const {values, dataSource} = this.props; 77 | const initialCheckedIndexMarks = []; 78 | let temp = dataSource as ICascadeItemsProps; 79 | for (let i = 0; i < values.length; i++) { 80 | const element = values[i]; 81 | if (temp && temp.length > 0) { 82 | // console.info('[temp]', JSON.stringify(temp)); 83 | const index = temp.findIndex(ele => ele.value === element.value); 84 | initialCheckedIndexMarks.push(index); 85 | temp = temp[index].options || []; 86 | } 87 | } 88 | return initialCheckedIndexMarks; 89 | }; 90 | 91 | onConfirmClickProxy = () => { 92 | const {onConfirmClick} = this.props; 93 | const result = this.getValuesByCheckMarks(); 94 | onConfirmClick && onConfirmClick(result); 95 | }; 96 | 97 | // ref 98 | _getValues = () => this.getValuesByCheckMarks(); 99 | 100 | getWheelItemsData = () => { 101 | const {dataSource, wheels} = this.props; 102 | const {checkedIndexMarks} = this.state; 103 | let temp = dataSource; 104 | const AllWheelItems = [temp]; 105 | for (let index = 0; index < wheels; index++) { 106 | temp = (temp?.[checkedIndexMarks[index]] as IWheelItemProps) 107 | ?.options as IWheelItemProps[]; 108 | AllWheelItems.push(temp); 109 | } 110 | return AllWheelItems as IWheelItemProps[][]; 111 | }; 112 | 113 | render() { 114 | const {wheels} = this.props; 115 | 116 | const AllWheelItems = this.getWheelItemsData(); 117 | 118 | return ( 119 | 120 |

121 | 122 | {new Array(wheels).fill(1).map((wheel, i) => { 123 | return ( 124 | 132 | ); 133 | })} 134 | 135 | 136 | ); 137 | } 138 | } 139 | 140 | PureCascade.defaultProps = { 141 | visible: false, 142 | wheels: 2, 143 | checkRange: 3, 144 | dataSource: [], 145 | itemHeight: 50, 146 | values: [], 147 | }; 148 | 149 | const styles = StyleSheet.create({ 150 | lists: { 151 | flexDirection: 'row', 152 | alignItems: 'center', 153 | }, 154 | }); 155 | 156 | export default PureCascade; 157 | -------------------------------------------------------------------------------- /Example/src/core/PureParallel.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {View, StyleSheet} from 'react-native'; 3 | import Wheel from './Wheel'; 4 | import Header from './Header'; 5 | 6 | interface IParallelState { 7 | checkedIndexMarks: number[]; 8 | } 9 | 10 | class PureParallel extends Component { 11 | static defaultProps: SlidePickerType; 12 | setMarkTimer: ReturnType | null; 13 | // cacheMarks: number[]; 14 | wheelRefs: any[]; 15 | 16 | constructor(props: any) { 17 | super(props); 18 | const {wheels} = this.props; 19 | const initialCheckMarks = new Array(wheels).fill(0); 20 | this.state = {checkedIndexMarks: initialCheckMarks}; 21 | this.setMarkTimer = null; 22 | // this.cacheMarks = new Array(wheels).fill(0); 23 | this.wheelRefs = initialCheckMarks.map(() => React.createRef()); 24 | } 25 | 26 | componentDidMount(): void { 27 | const {values, wheels} = this.props; 28 | if (values && values.length === wheels) { 29 | const initialCheckedIndexMarks = this.getCheckMarksByValues(); 30 | this.setState({checkedIndexMarks: initialCheckedIndexMarks}, () => { 31 | this.wheelRefs.forEach((ele, i) => { 32 | ele?.current?.manualSetChecked(initialCheckedIndexMarks[i], false); 33 | }); 34 | }); 35 | } 36 | } 37 | 38 | componentWillUnmount(): void { 39 | this.setMarkTimer && clearTimeout(this.setMarkTimer); 40 | } 41 | 42 | setCheckMark = (locationMark: number, checkedIndex: number) => { 43 | const indexMarks = [...this.state.checkedIndexMarks]; 44 | indexMarks[locationMark] = checkedIndex; 45 | this.setState({checkedIndexMarks: indexMarks}); 46 | }; 47 | 48 | // setCheckMark = (locationMark: number, checkedIndex: number) => { 49 | // this.cacheMarks[locationMark] = checkedIndex; 50 | // this.setMarkTimer && clearTimeout(this.setMarkTimer); 51 | // this.setMarkTimer = setTimeout(() => { 52 | // this.setState({checkedIndexMarks: [...this.cacheMarks]}); 53 | // }, 200); 54 | // }; 55 | 56 | getValuesByCheckMarks = () => { 57 | const {dataSource} = this.props; 58 | const result = []; 59 | for (let i = 0; i < dataSource.length; i++) { 60 | const checkedIndex = this.state.checkedIndexMarks[i]; 61 | const element = (dataSource as IParallelItemsProps)[i][checkedIndex]; 62 | result.push(element); 63 | } 64 | return result; 65 | }; 66 | 67 | getCheckMarksByValues = () => { 68 | const {values, dataSource} = this.props; 69 | const initialCheckedIndexMarks = []; 70 | for (let i = 0; i < values.length; i++) { 71 | const element = values[i]; 72 | const wheelItems = (dataSource as IParallelItemsProps)[i]; 73 | const findIndex = wheelItems.findIndex( 74 | ele => ele?.value === element?.value, 75 | ); 76 | initialCheckedIndexMarks.push(findIndex >= 0 ? findIndex : 0); 77 | } 78 | return initialCheckedIndexMarks; 79 | }; 80 | 81 | onConfirmClickProxy = () => { 82 | const {onConfirmClick, dataSource} = this.props; 83 | const result = this.getValuesByCheckMarks(); 84 | onConfirmClick && onConfirmClick(result); 85 | }; 86 | 87 | // ref 88 | _getValues = () => this.getValuesByCheckMarks(); 89 | 90 | render() { 91 | const {wheels, dataSource} = this.props; 92 | 93 | return ( 94 | 95 |
96 | 97 | {new Array(wheels).fill(1).map((wheel, i) => { 98 | return ( 99 | 107 | ); 108 | })} 109 | 110 | 111 | ); 112 | } 113 | } 114 | 115 | PureParallel.defaultProps = { 116 | visible: false, 117 | wheels: 2, 118 | checkRange: 3, 119 | dataSource: [], 120 | itemHeight: 50, 121 | values: [], 122 | }; 123 | 124 | const styles = StyleSheet.create({ 125 | lists: { 126 | flexDirection: 'row', 127 | alignItems: 'center', 128 | }, 129 | }); 130 | 131 | export default PureParallel; 132 | -------------------------------------------------------------------------------- /Example/src/core/Wheel.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { 3 | FlatList, 4 | StyleSheet, 5 | Text, 6 | View, 7 | TouchableOpacity, 8 | FlatListComponent, 9 | NativeSyntheticEvent, 10 | NativeScrollEvent, 11 | TextStyle, 12 | } from 'react-native'; 13 | 14 | type TWheelProps = { 15 | checkRange: number; 16 | itemHeight: number; 17 | wheelItems: IWheelItemProps[]; 18 | checkedTextStyle: TextStyle; 19 | normalTextStyle: TextStyle; 20 | rowLocationMark: number; // 21 | setCheckMark: (rowLocationMark: number, checkedIndex: number) => void; 22 | contentBackgroundColor: string; 23 | itemDividerColor: string; 24 | }; 25 | 26 | type TWheelState = { 27 | checkedIndex: number; 28 | }; 29 | 30 | type TEventHandler = NativeSyntheticEvent; 31 | 32 | class Wheel extends Component { 33 | static defaultProps: TWheelProps; 34 | listRef: React.RefObject>; 35 | scrollTimer: ReturnType | null; 36 | 37 | state = { 38 | checkedIndex: 0, 39 | }; 40 | 41 | constructor(props: any) { 42 | super(props); 43 | this.listRef = React.createRef(); 44 | this.scrollTimer = null; 45 | } 46 | 47 | componentWillUnmount(): void { 48 | this.scrollTimer && clearTimeout(this.scrollTimer); 49 | } 50 | 51 | manualSetChecked = (index: number, animated: boolean) => { 52 | const {wheelItems} = this.props; 53 | this.setState({checkedIndex: index}, () => { 54 | if (!wheelItems || wheelItems.length === 0) { 55 | return; 56 | } 57 | this.scrollTimer = setTimeout(() => { 58 | this.listRef?.current?.scrollToIndex({ 59 | index: index, 60 | animated, 61 | viewPosition: 0.5, 62 | }); 63 | }, 100); 64 | }); 65 | }; 66 | 67 | adjustScroll = (event: TEventHandler) => { 68 | const {y} = event.nativeEvent.contentOffset; 69 | const {setCheckMark, rowLocationMark, itemHeight} = this.props; 70 | const adjustCheckedIndex = Math.round(y / itemHeight); 71 | this.listRef?.current?.scrollToIndex({ 72 | index: adjustCheckedIndex, 73 | animated: true, 74 | viewPosition: 0.5, 75 | }); 76 | if (this.state.checkedIndex === adjustCheckedIndex) { 77 | return; 78 | } 79 | this.setState({checkedIndex: adjustCheckedIndex}); 80 | setCheckMark(rowLocationMark, adjustCheckedIndex); 81 | }; 82 | 83 | renderItem = (itemData: {item: IWheelItemProps; index: number}) => { 84 | const {checkedIndex} = this.state; 85 | const {itemHeight, checkedTextStyle, normalTextStyle} = this.props; 86 | 87 | const {item, index} = itemData; 88 | 89 | const customTextStyle = 90 | index === checkedIndex 91 | ? StyleSheet.flatten([styles.base_checkedTextStyle, checkedTextStyle]) 92 | : StyleSheet.flatten([styles.base_normalTextStyle, normalTextStyle]); 93 | 94 | return ( 95 | 96 | 97 | {item.label} 98 | 99 | 100 | ); 101 | }; 102 | 103 | render() { 104 | const { 105 | checkRange, 106 | itemHeight, 107 | wheelItems, 108 | contentBackgroundColor, 109 | itemDividerColor, 110 | } = this.props; 111 | 112 | const fillCount = (checkRange - 1) / 2; 113 | const fillPadding = fillCount * itemHeight; 114 | const containerStyle = { 115 | paddingTop: fillPadding, 116 | paddingBottom: fillPadding, 117 | }; 118 | 119 | return ( 120 | 121 | 122 | {new Array(checkRange).fill(1).map((ele, i) => ( 123 | 135 | ))} 136 | 137 | 138 | data.value.toString()} 146 | showsVerticalScrollIndicator={false} 147 | getItemLayout={(data, index) => ({ 148 | length: itemHeight, 149 | offset: itemHeight * (index + fillCount), 150 | index, 151 | })} 152 | /> 153 | 154 | 155 | ); 156 | } 157 | } 158 | 159 | Wheel.defaultProps = { 160 | itemHeight: 60, 161 | checkRange: 5, 162 | wheelItems: [], 163 | checkedTextStyle: {}, 164 | normalTextStyle: {}, 165 | rowLocationMark: 0, 166 | setCheckMark: () => {}, 167 | contentBackgroundColor: '#f8f8f8', 168 | itemDividerColor: 'rgba(0,0,0,0.05)', 169 | }; 170 | 171 | export default Wheel; 172 | 173 | const styles = StyleSheet.create({ 174 | base: { 175 | height: '100%', 176 | overflow: 'hidden', 177 | zIndex: 1, 178 | }, 179 | item: { 180 | justifyContent: 'center', 181 | alignItems: 'center', 182 | }, 183 | fakeItem: { 184 | flex: 1, 185 | backgroundColor: '#f8f8f8', 186 | borderTopWidth: 1, 187 | }, 188 | maskList: { 189 | position: 'absolute', 190 | width: '100%', 191 | // backgroundColor: '#00a', 192 | top: 0, 193 | bottom: 0, 194 | zIndex: 99, 195 | }, 196 | 197 | base_checkedTextStyle: { 198 | fontWeight: '700', 199 | fontSize: 16, 200 | color: '#006', 201 | }, 202 | base_normalTextStyle: { 203 | fontWeight: '400', 204 | fontSize: 14, 205 | }, 206 | }); 207 | -------------------------------------------------------------------------------- /Example/src/core/mask.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { 3 | View, 4 | StyleSheet, 5 | Animated, 6 | Dimensions, 7 | LayoutChangeEvent, 8 | Pressable, 9 | } from 'react-native'; 10 | 11 | type IMaskSlidePickerType = SlidePickerType & { 12 | ref?: React.RefObject; 13 | }; 14 | 15 | export function withMask( 16 | WrappedComponent: React.ComponentType, 17 | ) { 18 | return class Mask extends Component { 19 | animationDuration: number; 20 | 21 | aniTransValue = new Animated.Value(0); 22 | pickerHeight = 0; 23 | SCREEN_HEIGHT = Dimensions.get('window').height; 24 | state = {mount: false}; 25 | wrappedCompRef: React.RefObject; 26 | 27 | constructor(props: any) { 28 | super(props); 29 | this.animationDuration = this.props.animationDuration || 200; 30 | this.wrappedCompRef = React.createRef(); 31 | } 32 | 33 | componentDidUpdate(prevProps: Readonly): void { 34 | if (!prevProps.visible && this.props.visible) { 35 | this.setState({mount: true}); 36 | } 37 | if (prevProps.visible && !this.props.visible) { 38 | this.hide(); 39 | } 40 | } 41 | 42 | show = () => { 43 | Animated.timing(this.aniTransValue, { 44 | toValue: -1 * this.pickerHeight, 45 | duration: this.animationDuration, 46 | useNativeDriver: true, 47 | }).start(); 48 | }; 49 | 50 | hide = () => { 51 | Animated.timing(this.aniTransValue, { 52 | toValue: 0, 53 | duration: this.animationDuration, 54 | useNativeDriver: true, 55 | }).start(() => { 56 | this.setState({mount: false}); 57 | }); 58 | }; 59 | 60 | onContentLayout = ({nativeEvent}: LayoutChangeEvent) => { 61 | this.pickerHeight = nativeEvent.layout.height; 62 | this.show(); 63 | }; 64 | 65 | _getValues = () => { 66 | return this.wrappedCompRef?.current?._getValues(); 67 | }; 68 | 69 | render() { 70 | if (!this.state.mount) { 71 | return null; 72 | } 73 | 74 | const {onMaskClick} = this.props; 75 | 76 | return ( 77 | 78 | onMaskClick && onMaskClick()}> 81 | 90 | 94 | 95 | 96 | ); 97 | } 98 | }; 99 | } 100 | 101 | const styles = StyleSheet.create({ 102 | mask: { 103 | position: 'absolute', 104 | top: 0, 105 | left: 0, 106 | right: 0, 107 | bottom: 0, 108 | backgroundColor: 'rgba(0,0,0,0.5)', 109 | justifyContent: 'flex-end', 110 | }, 111 | content: { 112 | position: 'absolute', 113 | left: 0, 114 | right: 0, 115 | }, 116 | }); 117 | -------------------------------------------------------------------------------- /Example/src/index.tsx: -------------------------------------------------------------------------------- 1 | import {withMask} from './core/mask'; 2 | import PureCascade from './core/PureCascade'; 3 | import PureParallel from './core/PureParallel'; 4 | 5 | const SlidePicker = { 6 | PureParallel: PureParallel, 7 | Parallel: withMask(PureParallel), 8 | PureCascade: PureCascade, 9 | Cascade: withMask(PureCascade), 10 | }; 11 | 12 | export default SlidePicker; 13 | -------------------------------------------------------------------------------- /Example/src/type.d.ts: -------------------------------------------------------------------------------- 1 | type IWheelItemProps = { 2 | label: string | number; 3 | value: string | number; 4 | options?: IWheelItemProps[] | null; 5 | }; 6 | 7 | type IParallelItemsProps = IWheelItemProps[][]; 8 | type ICascadeItemsProps = IWheelItemProps[]; 9 | 10 | type IPickerValueProps = Omit; 11 | 12 | type SlidePickerType = { 13 | visible: boolean; 14 | wheels?: number; 15 | values: IWheelItemProp[]; 16 | dataSource: IParallelItemsProps | ICascadeItemsProps; 17 | 18 | onMaskClick?: () => void; 19 | 20 | animationDuration?: number; 21 | 22 | checkRange?: 3 | 5 | 7; 23 | itemHeight?: number; 24 | 25 | contentBackgroundColor?: string; 26 | itemDividerColor?: string; 27 | checkedTextStyle?: TextStyle; 28 | normalTextStyle?: TextStyle; 29 | 30 | titleText?: string; 31 | titleTextStyle?: TextStyle; 32 | cancelText?: string; 33 | cancelTextStyle?: TextStyle; 34 | onCancelClick?: () => void; 35 | confirmText?: string; 36 | confirmTextStyle?: TextStyle; 37 | onConfirmClick?: (result: IWheelItemProps[]) => void; 38 | 39 | HeaderComponent?: React.ReactNode; 40 | }; 41 | -------------------------------------------------------------------------------- /Example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/react-native/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 中文文档 2 | 3 | 4 | ## react-native-slidepicker 5 | 6 | A selector component on React Native that can be used for time, address, and various classification selection scenarios. 7 | 8 | 9 | 10 | demo code 11 | 12 | Feature: 13 | 14 | - Implemented through RN components (JS / TS), compatible with Android and iOS. 15 | 16 | - Support the use of cascaded data selection and parallel data selection. 17 | 18 | - Most styles can be customized: entry text, background color, entire selector header. 19 | 20 | - Custom display method, default to absolute positioning Mask, customizable container placement selector. 21 | 22 | 23 | ## How to use 24 | 25 | 26 | Install (npm) : 27 | 28 | ```bash 29 | npm install react-native-slidepicker -S 30 | ``` 31 | 32 | Import & use : 33 | 34 | ```javascript 35 | import SlidePicker from "react-native-slidepicker"; 36 | 37 | //联动数据 38 | 44 | 45 | //平级数据 46 | 49 | ``` 50 | 51 | ## Demo 52 | 53 | 54 | ```JSX 55 | import SlidePicker from 'react-native-slidepicker'; 56 | import PARALLEL_TIME from './test_data/parallel_time.json'; 57 | 58 | export default class PickerTest extends Component { 59 | 60 | constructor(props: any) { 61 | super(props); 62 | this.state = {demoType : '', timeData: [] }; 63 | } 64 | 65 | render() { 66 | return ( 67 | 68 | 69 | this.setState({demoType: ''})} 77 | onConfirmClick={res => this.setState({timeData: res, demoType: ''})} 78 | /> 79 | 80 | ); 81 | } 82 | } 83 | 84 | ``` 85 | 86 | ## props 87 | 88 | 89 | 90 | | prop | type ( \* means required) | description | default | 91 | | ---------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | 92 | | visible | boolean \* | component visible | false | 93 | | dataSource | array \* | data source,view data format | [] | 94 | | values | array \* | checked values | [] | 95 | | wheels | number | data columns | 2 | 96 | | onMaskClick | function | background click event | null | 97 | | animationDuration | number | open/close animation duration | 200 | 98 | | checkRange | number | row ranges数 | 3 | 99 | | itemHeight | number | height of item | 60 | 100 | | contentBackgroundColor | string | check area background color | #f8f8f8 | 101 | | itemDividerColor | string | divider line color | rgba(0,0,0,0.05) | 102 | | checkedTextStyle | TextStyle | checked item text style | { fontWeight: '700',fontSize: 16,color: '#006' } | 103 | | normalTextStyle | TextStyle | normal item text style | { fontWeight: '400', fontSize: 14 } | 104 | | titleText | string | picker heading | | 105 | | titleTextStyle | TextStyle | picker heading text style | | 106 | | cancelText | string | cancel text | cancel | 107 | | cancelTextStyle | TextStyle | cancel text style | { fontSize: 15, color: 'rgb(42, 123, 152)' } | 108 | | onCancelClick | function | cancel event | | 109 | | confirmText | string | confirm text | confirm | 110 | | confirmTextStyle | TextStyle | confirm text style | { fontSize: 15, color: 'rgb(42, 123, 152)' } | 111 | | onConfirmClick | function | confirm event, `(res) => { }` width result | | 112 | | HeaderComponent | JSX element | Custom selector header component (If using a custom selector header component, the default header will be replaced, onConfirmClick will not be called, and ref needs to be used to call \ _getValues to take values)) | | 113 | 114 |
115 | 116 | ## Method (ref) 117 | 118 | If you have used a custom header, then you need to set ref for the picker component. Then, the selection result can only be obtained by calling ref when clicking. 119 | 120 | ### `_getValues()` 121 | 122 | > Unless you use a custom header, you should use the **onConfirmClick** props instead of using this method. 123 | 124 | By setting ref, the selected data can be obtained in real-time. 125 | 126 | ```JSX 127 | export default class RefDemo extends Component { 128 | 129 | constructor(props: any) { 130 | // ... 131 | this.skuRef = React.createRef(); 132 | } 133 | 134 | render() { 135 | 136 | return ( 137 | 138 | 143 | 144 | 145 | What you want? 146 | 147 | { 149 | const res = this.skuRef?.current?._getValues(); 150 | console.info('res', res); 151 | this.setState({skuData: res, demoType: ''}); 152 | }}> 153 | Done 154 | 155 | 156 | } 157 | /> 158 |
159 | ); 160 | } 161 | } 162 | ``` 163 | 164 | ## Others 165 | 166 | 1. Issue with pop-up layers 167 | 168 | Generally, the Picker component will have a pop-up layer, and this component's `SlidePicker.Parallel` and `SlidePicker.Cascade` uses an absolutely positioned View as the Mask container to load selectors, so it is best to place components at the page level. If you want to handle pop-up layers yourself, you can also use ` SlidePicker.PureParallel` and `SlidePicker.PureCascade`, this is a pure selector component without a pop-up layer. 169 | 170 | 171 | 2. Historical Version 172 | 173 | The 1.x version uses react native Gesture handler to handle gesture scrolling, but on Android machines, especially when combined with react-native-modal, there are some instability issues that cannot be addressed by the native code of the library ( issue#139 ). Therefore, 2. x are completed using RN's built-in components, mainly FlatList 174 | 175 | 176 |
177 | 178 | ## Data format 179 | 180 | 181 | demo data format 182 | 183 | 184 | 185 | **cascaded data format** : 186 | 187 | ```json 188 | [ 189 | { 190 | "label": "", 191 | "value": "", 192 | "options": [ 193 | { 194 | "label": "", 195 | "value": "", 196 | "options": [ 197 | { 198 | "label": "", 199 | "value": "", 200 | "options": [{ "label": "" }] 201 | } 202 | ] 203 | } 204 | ] 205 | }, 206 | { 207 | "label": "", 208 | "value": "" 209 | } 210 | ] 211 | ``` 212 | 213 | **parallel data format** : 214 | 215 | ```json 216 | [ 217 | [ 218 | { 219 | "label": "", 220 | "value": "" 221 | }, 222 | { 223 | "label": "", 224 | "value": "" 225 | }, 226 | { 227 | "label": "", 228 | "value": "" 229 | } 230 | ], 231 | 232 | [ 233 | { 234 | "label": "", 235 | "value": "" 236 | }, 237 | { 238 | "label": "", 239 | "value": "" 240 | } 241 | ] 242 | ] 243 | ``` 244 | -------------------------------------------------------------------------------- /README_CN.md: -------------------------------------------------------------------------------- 1 | ## react-native-slidepicker 2 | 3 | 一个 React Native 上的选择器组件,可以用在时间,地址以及各种分类选择的场景上。 4 | 5 | 6 | 7 | 例子demo 代码 8 | 9 | 特点: 10 | 11 | - 全部使用 RN 官方组件,纯 TS/JS 实现,兼容 Android 和 iOS 端 12 | - 支持使用级联数据选择和平行数据选择 13 | - 大部分样式可自定义:条目文字、背景色、整个选择器头部 14 | - 自定义显示方式,默认在绝对定位的 Mask 中,可自定义容器放入选择器 15 | 16 | 17 | ## 使用 18 | 19 | 安装库: 20 | 21 | 安装 (npm) : 22 | 23 | ```bash 24 | npm install react-native-slidepicker -S 25 | ``` 26 | 27 | 引入使用: 28 | 29 | ```javascript 30 | import SlidePicker from "react-native-slidepicker"; 31 | 32 | //联动数据 33 | 39 | 40 | //平级数据 41 | 44 | ``` 45 | 46 | ## 例子 47 | 48 | 使用例子: 49 | 50 | ```JSX 51 | import SlidePicker from 'react-native-slidepicker'; 52 | import PARALLEL_TIME from './test_data/parallel_time.json'; 53 | 54 | export default class PickerTest extends Component { 55 | 56 | constructor(props: any) { 57 | super(props); 58 | this.state = {demoType : '', timeData: [] }; 59 | } 60 | 61 | render() { 62 | return ( 63 | 64 | 65 | this.setState({demoType: ''})} 73 | onConfirmClick={res => this.setState({timeData: res, demoType: ''})} 74 | /> 75 | 76 | ); 77 | } 78 | } 79 | 80 | ``` 81 | 82 | ## props 83 | 84 | 组件的可用属性: 85 | 86 | | prop | 数据类型 ( \* 表示必需) | 属性字段描述 | 默认值 | 87 | | ---------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | 88 | | visible | boolean \* | 是否可见 | false | 89 | | dataSource | array \* | 数据源,查看级联和平行数据格式 | [] | 90 | | values | array \* | 选择后的值。用于下次打开时数据回显 | [] | 91 | | wheels | number | 表示有几轮数据 | 2 | 92 | | onMaskClick | function | 背景点击事件 | null | 93 | | animationDuration | number | 启动和关闭的动画持续时间 | 200 | 94 | | checkRange | number | 可见选择项数 | 3 | 95 | | itemHeight | number | 选择项 item 高度 | 60 | 96 | | contentBackgroundColor | string | 选择区域背景色 | #f8f8f8 | 97 | | itemDividerColor | string | 选择 item 分割线颜色 | rgba(0,0,0,0.05) | 98 | | checkedTextStyle | TextStyle | 选中 item 文本样式 | { fontWeight: '700',fontSize: 16,color: '#006' } | 99 | | normalTextStyle | TextStyle | 选中 item 文本样式 | { fontWeight: '400', fontSize: 14 } | 100 | | titleText | string | 选择器头部标题 | | 101 | | titleTextStyle | TextStyle | 选择器头部标题文本样式 | | 102 | | cancelText | string | 取消文本 | cancel | 103 | | cancelTextStyle | TextStyle | 取消文本样式 | { fontSize: 15, color: 'rgb(42, 123, 152)' } | 104 | | onCancelClick | function | 取消事件 | | 105 | | confirmText | string | 确认文本 | confirm | 106 | | confirmTextStyle | TextStyle | 确认文本样式 | { fontSize: 15, color: 'rgb(42, 123, 152)' } | 107 | | **onConfirmClick** | function | 确认事件, (res) => { } 携带选择结果 | | 108 | | HeaderComponent | JSX element | 自定义选择器头部组件(如果使用自定义选择器头部组件,默认头部会被替换,onConfirmClick 不会被调用 , 需要使用 ref 来调用 \_getValues 以取值) | | 109 | 110 |
111 | 112 | ## 方法 113 | 114 | 如果你使用了自定义头部,那么就需要为 picker 组件设置 ref。然后将 ref 上的方法绑定到点击事件上才能获取到选择结果。 115 | 116 | ### `_getValues()` 117 | 118 | > 除非你使用自定义头部,否则都应该使用 [confirm 方法](#confirm) , 而不是使用这个方法 119 | 120 | 通过设置 ref,可以实时获取到已选择的数据。 121 | 122 | ```JSX 123 | export default class RefDemo extends Component { 124 | 125 | constructor(props: any) { 126 | // ... 127 | this.skuRef = React.createRef(); 128 | } 129 | 130 | render() { 131 | 132 | return ( 133 | 134 | 139 | 140 | 141 | What you want? 142 | 143 | { 145 | const res = this.skuRef?.current?._getValues(); 146 | console.info('res', res); 147 | this.setState({skuData: res, demoType: ''}); 148 | }}> 149 | Done 150 | 151 | 152 | } 153 | /> 154 | 155 | ); 156 | } 157 | } 158 | ``` 159 | 160 | ## Others 161 | 162 | 1. 弹出层的问题 163 | 164 | 一般 Picker 组件内会带有弹出层,本组件的 `SlidePicker.Parallel` 和 `SlidePicker.Cascade` 采用绝对定位的 View 作为 Mask 容器来装载选择器,所以最好将组件放在页面级别的层级。如果想要自己处理弹出层,也可以使用 `SlidePicker.PureParallel` 和 `SlidePicker.PureCascade`,这是不带弹出层的纯选择器组件。 165 | 166 | 2. 历史版本 167 | 168 | 1.x 版本采用的是 react-native-gesture-handler 来处理手势滚动,但是在 Android 机器上尤其是配合 react-native-modal 出现一些不稳定问题 ( issue#139 ),对该库原生层问题无能为力。故 2.x 全部采用 RN 自带组件完成,主要为 FlatList. 169 | 170 | 171 | 172 |
173 | 174 | ## 数据格式 175 | 176 | 例子 demo 数据格式 177 | 178 | 179 | 180 | **级联数据**格式: 181 | 182 | ```json 183 | [ 184 | { 185 | "label": "", 186 | "value": "", 187 | "options": [ 188 | { 189 | "label": "", 190 | "value": "", 191 | "options": [ 192 | { 193 | "label": "", 194 | "value": "", 195 | "options": [{ "label": "" }] 196 | } 197 | ] 198 | } 199 | ] 200 | }, 201 | { 202 | "label": "", 203 | "value": "" 204 | } 205 | ] 206 | ``` 207 | 208 | **平行数据**格式 209 | 210 | ```json 211 | [ 212 | [ 213 | { 214 | "label": "", 215 | "value": "" 216 | }, 217 | { 218 | "label": "", 219 | "value": "" 220 | }, 221 | { 222 | "label": "", 223 | "value": "" 224 | } 225 | ], 226 | 227 | [ 228 | { 229 | "label": "", 230 | "value": "" 231 | }, 232 | { 233 | "label": "", 234 | "value": "" 235 | } 236 | ] 237 | ] 238 | ``` 239 | -------------------------------------------------------------------------------- /example_pic.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/example_pic.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-slidepicker", 3 | "version": "2.0.2", 4 | "description": "a slide picker used in react native", 5 | "main": "./src/index.tsx", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/lexguy/react-native-slidepicker.git" 12 | }, 13 | "keywords": [ 14 | "RN picker", 15 | "react native picker", 16 | "slide picker in react native", 17 | "React Native", 18 | "react native" 19 | ], 20 | "author": "xuxiaowei/lexguy", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/lexguy/react-native-slidepicker/issues" 24 | }, 25 | "homepage": "https://github.com/lexguy/react-native-slidepicker#readme", 26 | "files": [ 27 | "src/", 28 | "src", 29 | "README.md" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /src/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-nippy/react-native-slidepicker/60c63e10244aa03961e9c92e550cea5388110fa1/src/README.md -------------------------------------------------------------------------------- /src/core/Header.tsx: -------------------------------------------------------------------------------- 1 | import React, {PureComponent} from 'react'; 2 | import { 3 | View, 4 | Text, 5 | StyleSheet, 6 | TextStyle, 7 | Pressable, 8 | TouchableOpacity, 9 | } from 'react-native'; 10 | 11 | interface IHeaderProps { 12 | titleText?: string; 13 | titleTextStyle?: TextStyle; 14 | cancelText?: string; 15 | cancelTextStyle?: TextStyle; 16 | onCancelClick?: () => void; 17 | confirmText?: string; 18 | confirmTextStyle?: TextStyle; 19 | HeaderComponent?: React.ReactNode; 20 | onConfirmClick?: () => void; 21 | } 22 | 23 | export default class Header extends PureComponent { 24 | static defaultProps: IHeaderProps; 25 | 26 | constructor(props: any) { 27 | super(props); 28 | } 29 | 30 | render() { 31 | const { 32 | HeaderComponent, 33 | titleText, 34 | titleTextStyle, 35 | cancelText, 36 | cancelTextStyle, 37 | confirmText, 38 | confirmTextStyle, 39 | onCancelClick, 40 | onConfirmClick, 41 | } = this.props; 42 | 43 | if (HeaderComponent) return HeaderComponent; 44 | 45 | const cancelStyle = StyleSheet.flatten([ 46 | styles.base_textStyle, 47 | cancelTextStyle, 48 | ]); 49 | 50 | const confirmStyle = StyleSheet.flatten([ 51 | styles.base_textStyle, 52 | confirmTextStyle, 53 | ]); 54 | 55 | return ( 56 | 57 | 58 | 62 | {cancelText} 63 | 64 | 65 | {titleText} 66 | 67 | 71 | {confirmText} 72 | 73 | 74 | 75 | ); 76 | } 77 | } 78 | 79 | Header.defaultProps = { 80 | cancelText: 'cancel', 81 | confirmText: 'OK', 82 | }; 83 | 84 | const styles = StyleSheet.create({ 85 | defaultHeader: { 86 | height: 50, 87 | borderTopLeftRadius: 8, 88 | borderTopRightRadius: 8, 89 | backgroundColor: '#fff', 90 | flexDirection: 'row', 91 | alignItems: 'center', 92 | }, 93 | leftBox: { 94 | flex: 1, 95 | alignItems: 'flex-start', 96 | }, 97 | rightBox: { 98 | flex: 1, 99 | alignItems: 'flex-end', 100 | }, 101 | btn: { 102 | padding: 12, 103 | }, 104 | base_textStyle: { 105 | fontSize: 15, 106 | color: 'rgb(42, 123, 152)', 107 | }, 108 | }); 109 | -------------------------------------------------------------------------------- /src/core/PureCascade.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { View, StyleSheet } from "react-native"; 3 | import Wheel from "./Wheel"; 4 | import Header from "./Header"; 5 | 6 | interface IParallelState { 7 | checkedIndexMarks: number[]; 8 | } 9 | 10 | class PureCascade extends Component { 11 | static defaultProps: SlidePickerType; 12 | setMarkTimer: ReturnType | null; 13 | cacheMarks: number[]; 14 | wheelRefs: any[]; 15 | 16 | constructor(props: any) { 17 | super(props); 18 | const { wheels } = this.props; 19 | const checkedMarks = new Array(wheels).fill(0); 20 | this.state = { checkedIndexMarks: checkedMarks }; 21 | this.setMarkTimer = null; 22 | this.cacheMarks = checkedMarks; 23 | this.wheelRefs = checkedMarks.map(() => React.createRef()); 24 | } 25 | 26 | componentDidMount(): void { 27 | const { values, wheels } = this.props; 28 | if (values && values.length === wheels) { 29 | const initialCheckedIndexMarks = this.getCheckMarksByValues(); 30 | this.setState({ checkedIndexMarks: initialCheckedIndexMarks }, () => { 31 | this.wheelRefs.forEach((ele, i) => { 32 | ele.current.manualSetChecked(initialCheckedIndexMarks[i], false); 33 | }); 34 | }); 35 | } 36 | } 37 | 38 | componentWillUnmount(): void { 39 | this.setMarkTimer && clearTimeout(this.setMarkTimer); 40 | } 41 | 42 | setCheckMark = (locationMark: number, checkedIndex: number) => { 43 | const { wheels } = this.props; 44 | this.cacheMarks[locationMark] = checkedIndex; 45 | this.setMarkTimer && clearTimeout(this.setMarkTimer); 46 | this.setMarkTimer = setTimeout(() => { 47 | const targetMarks = [...this.cacheMarks]; 48 | if (locationMark !== wheels - 1) { 49 | targetMarks.fill(0, locationMark + 1); 50 | } 51 | this.setState({ checkedIndexMarks: targetMarks }); 52 | if (locationMark !== wheels - 1) { 53 | const refs = this.wheelRefs.slice(locationMark + 1); 54 | refs.forEach((ele) => ele?.current?.manualSetChecked(0, true)); 55 | } 56 | }, 200); 57 | }; 58 | 59 | getValuesByCheckMarks = () => { 60 | const { wheels, dataSource } = this.props; 61 | const result = []; 62 | let temp = dataSource as ICascadeItemsProps; 63 | for (let i = 0; i < wheels; i++) { 64 | const checkedIndex = this.state.checkedIndexMarks[i]; 65 | const wheelData = { ...temp[checkedIndex] }; 66 | if (wheelData) { 67 | temp = wheelData.options || []; 68 | delete wheelData.options; 69 | result.push(wheelData); 70 | } 71 | } 72 | return result; 73 | }; 74 | 75 | getCheckMarksByValues = () => { 76 | const { values, dataSource } = this.props; 77 | const initialCheckedIndexMarks = []; 78 | let temp = dataSource as ICascadeItemsProps; 79 | for (let i = 0; i < values.length; i++) { 80 | const element = values[i]; 81 | if (temp && temp.length > 0) { 82 | // console.info('[temp]', JSON.stringify(temp)); 83 | const index = temp.findIndex((ele) => ele.value === element.value); 84 | initialCheckedIndexMarks.push(index); 85 | temp = temp[index].options || []; 86 | } 87 | } 88 | return initialCheckedIndexMarks; 89 | }; 90 | 91 | onConfirmClickProxy = () => { 92 | const { onConfirmClick } = this.props; 93 | const result = this.getValuesByCheckMarks(); 94 | onConfirmClick && onConfirmClick(result); 95 | }; 96 | 97 | // ref 98 | _getValues = () => this.getValuesByCheckMarks(); 99 | 100 | getWheelItemsData = () => { 101 | const { dataSource, wheels } = this.props; 102 | const { checkedIndexMarks } = this.state; 103 | let temp = dataSource; 104 | const AllWheelItems = [temp]; 105 | for (let index = 0; index < wheels; index++) { 106 | temp = (temp?.[checkedIndexMarks[index]] as IWheelItemProps)?.options as IWheelItemProps[]; 107 | AllWheelItems.push(temp); 108 | } 109 | return AllWheelItems as IWheelItemProps[][]; 110 | }; 111 | 112 | render() { 113 | const { wheels } = this.props; 114 | 115 | const AllWheelItems = this.getWheelItemsData(); 116 | 117 | return ( 118 | 119 |
120 | 121 | {new Array(wheels).fill(1).map((wheel, i) => { 122 | return ( 123 | 131 | ); 132 | })} 133 | 134 | 135 | ); 136 | } 137 | } 138 | 139 | PureCascade.defaultProps = { 140 | visible: false, 141 | wheels: 2, 142 | checkRange: 3, 143 | dataSource: [], 144 | itemHeight: 50, 145 | values: [], 146 | }; 147 | 148 | const styles = StyleSheet.create({ 149 | lists: { 150 | flexDirection: "row", 151 | alignItems: "center", 152 | }, 153 | }); 154 | 155 | export default PureCascade; 156 | -------------------------------------------------------------------------------- /src/core/PureParallel.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { View, StyleSheet } from "react-native"; 3 | import Wheel from "./Wheel"; 4 | import Header from "./Header"; 5 | 6 | interface IParallelState { 7 | checkedIndexMarks: number[]; 8 | } 9 | 10 | class PureParallel extends Component { 11 | static defaultProps: SlidePickerType; 12 | setMarkTimer: ReturnType | null; 13 | // cacheMarks: number[]; 14 | wheelRefs: any[]; 15 | 16 | constructor(props: any) { 17 | super(props); 18 | const { wheels } = this.props; 19 | const initialCheckMarks = new Array(wheels).fill(0); 20 | this.state = { checkedIndexMarks: initialCheckMarks }; 21 | this.setMarkTimer = null; 22 | // this.cacheMarks = new Array(wheels).fill(0); 23 | this.wheelRefs = initialCheckMarks.map(() => React.createRef()); 24 | } 25 | 26 | componentDidMount(): void { 27 | const { values, wheels } = this.props; 28 | if (values && values.length === wheels) { 29 | const initialCheckedIndexMarks = this.getCheckMarksByValues(); 30 | this.setState({ checkedIndexMarks: initialCheckedIndexMarks }, () => { 31 | this.wheelRefs.forEach((ele, i) => { 32 | ele?.current?.manualSetChecked(initialCheckedIndexMarks[i], false); 33 | }); 34 | }); 35 | } 36 | } 37 | 38 | componentWillUnmount(): void { 39 | this.setMarkTimer && clearTimeout(this.setMarkTimer); 40 | } 41 | 42 | setCheckMark = (locationMark: number, checkedIndex: number) => { 43 | const indexMarks = [...this.state.checkedIndexMarks]; 44 | indexMarks[locationMark] = checkedIndex; 45 | this.setState({ checkedIndexMarks: indexMarks }); 46 | }; 47 | 48 | // setCheckMark = (locationMark: number, checkedIndex: number) => { 49 | // this.cacheMarks[locationMark] = checkedIndex; 50 | // this.setMarkTimer && clearTimeout(this.setMarkTimer); 51 | // this.setMarkTimer = setTimeout(() => { 52 | // this.setState({checkedIndexMarks: [...this.cacheMarks]}); 53 | // }, 200); 54 | // }; 55 | 56 | getValuesByCheckMarks = () => { 57 | const { dataSource } = this.props; 58 | const result = []; 59 | for (let i = 0; i < dataSource.length; i++) { 60 | const checkedIndex = this.state.checkedIndexMarks[i]; 61 | const element = (dataSource as IParallelItemsProps)[i][checkedIndex]; 62 | result.push(element); 63 | } 64 | return result; 65 | }; 66 | 67 | getCheckMarksByValues = () => { 68 | const { values, dataSource } = this.props; 69 | const initialCheckedIndexMarks = []; 70 | for (let i = 0; i < values.length; i++) { 71 | const element = values[i]; 72 | const wheelItems = (dataSource as IParallelItemsProps)[i]; 73 | const findIndex = wheelItems.findIndex((ele) => ele?.value === element?.value); 74 | initialCheckedIndexMarks.push(findIndex >= 0 ? findIndex : 0); 75 | } 76 | return initialCheckedIndexMarks; 77 | }; 78 | 79 | onConfirmClickProxy = () => { 80 | const { onConfirmClick, dataSource } = this.props; 81 | const result = this.getValuesByCheckMarks(); 82 | onConfirmClick && onConfirmClick(result); 83 | }; 84 | 85 | // ref 86 | _getValues = () => this.getValuesByCheckMarks(); 87 | 88 | render() { 89 | const { wheels, dataSource } = this.props; 90 | 91 | return ( 92 | 93 |
94 | 95 | {new Array(wheels).fill(1).map((wheel, i) => { 96 | return ( 97 | 105 | ); 106 | })} 107 | 108 | 109 | ); 110 | } 111 | } 112 | 113 | PureParallel.defaultProps = { 114 | visible: false, 115 | wheels: 2, 116 | checkRange: 3, 117 | dataSource: [], 118 | itemHeight: 50, 119 | values: [], 120 | }; 121 | 122 | const styles = StyleSheet.create({ 123 | lists: { 124 | flexDirection: "row", 125 | alignItems: "center", 126 | }, 127 | }); 128 | 129 | export default PureParallel; 130 | -------------------------------------------------------------------------------- /src/core/Wheel.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { 3 | FlatList, 4 | StyleSheet, 5 | Text, 6 | View, 7 | TouchableOpacity, 8 | FlatListComponent, 9 | NativeSyntheticEvent, 10 | NativeScrollEvent, 11 | TextStyle, 12 | } from 'react-native'; 13 | 14 | type TWheelProps = { 15 | checkRange: number; 16 | itemHeight: number; 17 | wheelItems: IWheelItemProps[]; 18 | checkedTextStyle: TextStyle; 19 | normalTextStyle: TextStyle; 20 | rowLocationMark: number; // 21 | setCheckMark: (rowLocationMark: number, checkedIndex: number) => void; 22 | contentBackgroundColor: string; 23 | itemDividerColor: string; 24 | }; 25 | 26 | type TWheelState = { 27 | checkedIndex: number; 28 | }; 29 | 30 | type TEventHandler = NativeSyntheticEvent; 31 | 32 | class Wheel extends Component { 33 | static defaultProps: TWheelProps; 34 | listRef: React.RefObject>; 35 | scrollTimer: ReturnType | null; 36 | 37 | state = { 38 | checkedIndex: 0, 39 | }; 40 | 41 | constructor(props: any) { 42 | super(props); 43 | this.listRef = React.createRef(); 44 | this.scrollTimer = null; 45 | } 46 | 47 | componentWillUnmount(): void { 48 | this.scrollTimer && clearTimeout(this.scrollTimer); 49 | } 50 | 51 | manualSetChecked = (index: number, animated: boolean) => { 52 | const {wheelItems} = this.props; 53 | this.setState({checkedIndex: index}, () => { 54 | if (!wheelItems || wheelItems.length === 0) { 55 | return; 56 | } 57 | this.scrollTimer = setTimeout(() => { 58 | this.listRef?.current?.scrollToIndex({ 59 | index: index, 60 | animated, 61 | viewPosition: 0.5, 62 | }); 63 | }, 100); 64 | }); 65 | }; 66 | 67 | adjustScroll = (event: TEventHandler) => { 68 | const {y} = event.nativeEvent.contentOffset; 69 | const {setCheckMark, rowLocationMark, itemHeight} = this.props; 70 | const adjustCheckedIndex = Math.round(y / itemHeight); 71 | this.listRef?.current?.scrollToIndex({ 72 | index: adjustCheckedIndex, 73 | animated: true, 74 | viewPosition: 0.5, 75 | }); 76 | if (this.state.checkedIndex === adjustCheckedIndex) { 77 | return; 78 | } 79 | this.setState({checkedIndex: adjustCheckedIndex}); 80 | setCheckMark(rowLocationMark, adjustCheckedIndex); 81 | }; 82 | 83 | renderItem = (itemData: {item: IWheelItemProps; index: number}) => { 84 | const {checkedIndex} = this.state; 85 | const {itemHeight, checkedTextStyle, normalTextStyle} = this.props; 86 | 87 | const {item, index} = itemData; 88 | 89 | const customTextStyle = 90 | index === checkedIndex 91 | ? StyleSheet.flatten([styles.base_checkedTextStyle, checkedTextStyle]) 92 | : StyleSheet.flatten([styles.base_normalTextStyle, normalTextStyle]); 93 | 94 | return ( 95 | 96 | 97 | {item.label} 98 | 99 | 100 | ); 101 | }; 102 | 103 | render() { 104 | const { 105 | checkRange, 106 | itemHeight, 107 | wheelItems, 108 | contentBackgroundColor, 109 | itemDividerColor, 110 | } = this.props; 111 | 112 | const fillCount = (checkRange - 1) / 2; 113 | const fillPadding = fillCount * itemHeight; 114 | const containerStyle = { 115 | paddingTop: fillPadding, 116 | paddingBottom: fillPadding, 117 | }; 118 | 119 | return ( 120 | 121 | 122 | {new Array(checkRange).fill(1).map((ele, i) => ( 123 | 135 | ))} 136 | 137 | 138 | data.value.toString()} 146 | showsVerticalScrollIndicator={false} 147 | getItemLayout={(data, index) => ({ 148 | length: itemHeight, 149 | offset: itemHeight * (index + fillCount), 150 | index, 151 | })} 152 | /> 153 | 154 | 155 | ); 156 | } 157 | } 158 | 159 | Wheel.defaultProps = { 160 | itemHeight: 60, 161 | checkRange: 5, 162 | wheelItems: [], 163 | checkedTextStyle: {}, 164 | normalTextStyle: {}, 165 | rowLocationMark: 0, 166 | setCheckMark: () => {}, 167 | contentBackgroundColor: '#f8f8f8', 168 | itemDividerColor: 'rgba(0,0,0,0.05)', 169 | }; 170 | 171 | export default Wheel; 172 | 173 | const styles = StyleSheet.create({ 174 | base: { 175 | height: '100%', 176 | overflow: 'hidden', 177 | zIndex: 1, 178 | }, 179 | item: { 180 | justifyContent: 'center', 181 | alignItems: 'center', 182 | }, 183 | fakeItem: { 184 | flex: 1, 185 | backgroundColor: '#f8f8f8', 186 | borderTopWidth: 1, 187 | }, 188 | maskList: { 189 | position: 'absolute', 190 | width: '100%', 191 | // backgroundColor: '#00a', 192 | top: 0, 193 | bottom: 0, 194 | zIndex: 99, 195 | }, 196 | 197 | base_checkedTextStyle: { 198 | fontWeight: '700', 199 | fontSize: 16, 200 | color: '#006', 201 | }, 202 | base_normalTextStyle: { 203 | fontWeight: '400', 204 | fontSize: 14, 205 | }, 206 | }); 207 | -------------------------------------------------------------------------------- /src/core/mask.tsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { 3 | View, 4 | StyleSheet, 5 | Animated, 6 | Dimensions, 7 | LayoutChangeEvent, 8 | Pressable, 9 | } from 'react-native'; 10 | 11 | type IMaskSlidePickerType = SlidePickerType & { 12 | ref?: React.RefObject; 13 | }; 14 | 15 | export function withMask( 16 | WrappedComponent: React.ComponentType, 17 | ) { 18 | return class Mask extends Component { 19 | animationDuration: number; 20 | 21 | aniTransValue = new Animated.Value(0); 22 | pickerHeight = 0; 23 | SCREEN_HEIGHT = Dimensions.get('window').height; 24 | state = {mount: false}; 25 | wrappedCompRef: React.RefObject; 26 | 27 | constructor(props: any) { 28 | super(props); 29 | this.animationDuration = this.props.animationDuration || 200; 30 | this.wrappedCompRef = React.createRef(); 31 | } 32 | 33 | componentDidUpdate(prevProps: Readonly): void { 34 | if (!prevProps.visible && this.props.visible) { 35 | this.setState({mount: true}); 36 | } 37 | if (prevProps.visible && !this.props.visible) { 38 | this.hide(); 39 | } 40 | } 41 | 42 | show = () => { 43 | Animated.timing(this.aniTransValue, { 44 | toValue: -1 * this.pickerHeight, 45 | duration: this.animationDuration, 46 | useNativeDriver: true, 47 | }).start(); 48 | }; 49 | 50 | hide = () => { 51 | Animated.timing(this.aniTransValue, { 52 | toValue: 0, 53 | duration: this.animationDuration, 54 | useNativeDriver: true, 55 | }).start(() => { 56 | this.setState({mount: false}); 57 | }); 58 | }; 59 | 60 | onContentLayout = ({nativeEvent}: LayoutChangeEvent) => { 61 | this.pickerHeight = nativeEvent.layout.height; 62 | this.show(); 63 | }; 64 | 65 | _getValues = () => { 66 | return this.wrappedCompRef?.current?._getValues(); 67 | }; 68 | 69 | render() { 70 | if (!this.state.mount) { 71 | return null; 72 | } 73 | 74 | const {onMaskClick} = this.props; 75 | 76 | return ( 77 | 78 | onMaskClick && onMaskClick()}> 81 | 90 | 94 | 95 | 96 | ); 97 | } 98 | }; 99 | } 100 | 101 | const styles = StyleSheet.create({ 102 | mask: { 103 | position: 'absolute', 104 | top: 0, 105 | left: 0, 106 | right: 0, 107 | bottom: 0, 108 | backgroundColor: 'rgba(0,0,0,0.5)', 109 | justifyContent: 'flex-end', 110 | }, 111 | content: { 112 | position: 'absolute', 113 | left: 0, 114 | right: 0, 115 | }, 116 | }); 117 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import {withMask} from './core/mask'; 2 | import PureCascade from './core/PureCascade'; 3 | import PureParallel from './core/PureParallel'; 4 | 5 | const SlidePicker = { 6 | PureParallel: PureParallel, 7 | Parallel: withMask(PureParallel), 8 | PureCascade: PureCascade, 9 | Cascade: withMask(PureCascade), 10 | }; 11 | 12 | export default SlidePicker; 13 | -------------------------------------------------------------------------------- /src/type.d.ts: -------------------------------------------------------------------------------- 1 | type IWheelItemProps = { 2 | label: string | number; 3 | value: string | number; 4 | options?: IWheelItemProps[] | null; 5 | }; 6 | 7 | type IParallelItemsProps = IWheelItemProps[][]; 8 | type ICascadeItemsProps = IWheelItemProps[]; 9 | 10 | type IPickerValueProps = Omit; 11 | 12 | type SlidePickerType = { 13 | visible: boolean; 14 | wheels: number; 15 | values: IWheelItemProps[]; 16 | dataSource: IParallelItemsProps | ICascadeItemsProps; 17 | 18 | onMaskClick?: () => void; 19 | 20 | animationDuration?: number; 21 | 22 | checkRange?: 3 | 5 | 7; 23 | itemHeight?: number; 24 | 25 | contentBackgroundColor?: string; 26 | itemDividerColor?: string; 27 | checkedTextStyle?: TextStyle; 28 | normalTextStyle?: TextStyle; 29 | 30 | titleText?: string; 31 | titleTextStyle?: TextStyle; 32 | cancelText?: string; 33 | cancelTextStyle?: TextStyle; 34 | onCancelClick?: () => void; 35 | confirmText?: string; 36 | confirmTextStyle?: TextStyle; 37 | onConfirmClick?: (result: IWheelItemProps[]) => void; 38 | 39 | HeaderComponent?: React.ReactNode; 40 | }; 41 | --------------------------------------------------------------------------------