├── .gitignore ├── LICENCE ├── README.md ├── android ├── build.gradle ├── react-native-numberpicker-dialog.iml └── src │ └── main │ ├── AndroidManifest.xml │ └── java │ └── fr │ └── bamlab │ └── reactnativenumberpickerdialog │ ├── RNNumberPickerDialogModule.java │ └── RNNumberPickerDialogPackage.java ├── docs └── preview.png ├── index.android.js ├── index.ios.js └── package.json /.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 | project.xcworkspace 24 | 25 | # node.js 26 | # 27 | node_modules/ 28 | npm-debug.log 29 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 BAM 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-numberpicker-dialog 2 | 3 | Show an Android modal dialog with a list of choices displayed using a `android.widget.NumberPicker`. 4 | 5 | ![Android modal dialog with a list of choices displayed using a `android.widget.NumberPicker`](docs/preview.png) 6 | 7 | This is only for Android. There is the built-in [React Native Picker component](https://facebook.github.io/react-native/docs/picker.html) for iOS. It works for Android too, but display a dialog (or dropdown) with a long list of choices that can be confusing. 8 | 9 | ## Setup 10 | 11 | Install the package with React Native: 12 | ``` 13 | react-native install react-native-numberpicker-dialog 14 | ``` 15 | 16 | ## Usage example 17 | 18 | ```javascript 19 | import NumberPickerDialog from 'react-native-numberpicker-dialog'; 20 | 21 | NumberPickerDialog.show({ 22 | values: ['First item', 'Second item', 'Third item'], 23 | positiveButtonLabel: 'Ok', 24 | negativeButtonLabel: 'Cancel', 25 | message: 'What would you like to have?', 26 | title: 'Nice dialog', 27 | }).then((id) => { 28 | // id is the index of the chosen item, or -1 if the user cancelled. 29 | }); 30 | ``` 31 | 32 | ## Other open-source modules by the folks at [BAM](http://github.com/bamlab) 33 | 34 | * [react-native-image-resizer](https://github.com/bamlab/react-native-image-resizer) 35 | * [rn-camera-roll](https://github.com/bamlab/rn-camera-roll) 36 | * [react-native-animated-picker](https://github.com/bamlab/react-native-animated-picker) 37 | * [cordova-plugin-native-routing](https://github.com/bamlab/cordova-plugin-native-routing) 38 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.library' 2 | 3 | android { 4 | compileSdkVersion 23 5 | buildToolsVersion "23.0.2" 6 | 7 | defaultConfig { 8 | minSdkVersion 16 9 | targetSdkVersion 23 10 | versionCode 1 11 | versionName "1.0" 12 | } 13 | buildTypes { 14 | release { 15 | minifyEnabled false 16 | } 17 | } 18 | } 19 | 20 | dependencies { 21 | compile 'com.facebook.react:react-native:+' 22 | } 23 | -------------------------------------------------------------------------------- /android/react-native-numberpicker-dialog.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /android/src/main/java/fr/bamlab/reactnativenumberpickerdialog/RNNumberPickerDialogModule.java: -------------------------------------------------------------------------------- 1 | package fr.bamlab.reactnativenumberpickerdialog; 2 | 3 | import android.app.AlertDialog; 4 | import android.content.Context; 5 | import android.content.DialogInterface; 6 | import android.view.LayoutInflater; 7 | import android.view.View; 8 | import android.widget.NumberPicker; 9 | 10 | import com.facebook.react.bridge.ReactApplicationContext; 11 | import com.facebook.react.bridge.ReactContextBaseJavaModule; 12 | import com.facebook.react.bridge.ReactMethod; 13 | import com.facebook.react.bridge.Callback; 14 | import com.facebook.react.bridge.ReadableArray; 15 | import com.facebook.react.bridge.ReadableMap; 16 | 17 | import java.util.ArrayList; 18 | import java.util.List; 19 | 20 | class RNNumberPickerDialogModule extends ReactContextBaseJavaModule { 21 | private Context context; 22 | 23 | public RNNumberPickerDialogModule(ReactApplicationContext reactContext) { 24 | super(reactContext); 25 | this.context = reactContext; 26 | } 27 | 28 | /** 29 | * @return the name of this module. This will be the name used to {@code require()} this module 30 | * from javascript. 31 | */ 32 | @Override 33 | public String getName() { 34 | return "RNNumberPickerDialog"; 35 | } 36 | 37 | @ReactMethod 38 | public void show(final ReadableMap options, final Callback onSuccess, final Callback onFailure) { 39 | ReadableArray values = options.getArray("values"); 40 | if (values.size() == 0) { 41 | onFailure.invoke("values array must not be empty"); 42 | return; 43 | } 44 | 45 | final NumberPicker picker = new NumberPicker(getCurrentActivity()); 46 | picker.setMinValue(0); 47 | picker.setMaxValue(values.size() -1); 48 | 49 | String[] displayedValues = new String[values.size()]; 50 | for(int i = 0;i createNativeModules(ReactApplicationContext reactContext) { 20 | List modules = new ArrayList<>(); 21 | modules.add(new RNNumberPickerDialogModule(reactContext)); 22 | 23 | return modules; 24 | } 25 | 26 | /** 27 | * @return list of JS modules to register with the newly created catalyst instance. 28 | *

29 | * IMPORTANT: Note that only modules that needs to be accessible from the native code should be 30 | * listed here. Also listing a native module here doesn't imply that the JS implementation of it 31 | * will be automatically included in the JS bundle. 32 | */ 33 | @Override 34 | public List> createJSModules() { 35 | return Collections.emptyList(); 36 | } 37 | 38 | /** 39 | * @param reactContext 40 | * @return a list of view managers that should be registered with {@link UIManagerModule} 41 | */ 42 | @Override 43 | public List createViewManagers(ReactApplicationContext reactContext) { 44 | return Collections.emptyList(); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /docs/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bamlab/react-native-numberpicker-dialog/6a3b1b7e803cbb4fd64db20d48816c1a029aba73/docs/preview.png -------------------------------------------------------------------------------- /index.android.js: -------------------------------------------------------------------------------- 1 | import ReactNative from 'react-native'; 2 | 3 | const RNNumberPickerDialog = ReactNative.NativeModules.RNNumberPickerDialog; 4 | 5 | export default { 6 | show: (options) => { 7 | return new Promise((resolve, reject) => { 8 | RNNumberPickerDialog.show(options, resolve, reject); 9 | }); 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /index.ios.js: -------------------------------------------------------------------------------- 1 | export default { 2 | show: () => { 3 | return new Promise((resolve, reject) => { 4 | reject('This module is not supported on iOS'); 5 | } 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-numberpicker-dialog", 3 | "version": "0.0.1", 4 | "description": "Show a dialog on Android, allowing to choose an option using NumberPicker", 5 | "main": "index.android.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/bamlab/react-native-numberpicker-dialog.git" 12 | }, 13 | "author": "Florian Rival (http://bamlab.fr)", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/bamlab/react-native-numberpicker-dialog/issues" 17 | }, 18 | "homepage": "https://github.com/bamlab/react-native-numberpicker-dialog#readme" 19 | } 20 | --------------------------------------------------------------------------------