├── 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 |
86 |
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 |
--------------------------------------------------------------------------------