├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── android ├── build.gradle └── src │ └── main │ ├── AndroidManifest.xml │ ├── java │ └── com │ │ └── chymtt │ │ └── reactnativedropdown │ │ ├── Dropdown.java │ │ ├── DropdownEvent.java │ │ ├── DropdownManager.java │ │ └── DropdownPackage.java │ └── res │ └── values │ └── styles.xml ├── package.json └── src └── Dropdown.js /.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 | 30 | *.iml 31 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Android/IJ 2 | .idea/workspace.xml 3 | .idea/libraries 4 | local.properties 5 | *.iml 6 | build -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 chymtt 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 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-dropdown-android 2 | 3 | A simple wrapper for Android's Spinner 4 | 5 | ## Installation Android 6 | 1. `npm install --save react-native-dropdown-android` 7 | 2. In `android/settings.gradle` 8 | 9 | ```gradle 10 | ... 11 | include ':ReactNativeDropdownAndroid', ':app' 12 | project(':ReactNativeDropdownAndroid').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dropdown-android/android') 13 | ``` 14 | 15 | 3. In `android/app/build.gradle` 16 | 17 | ```gradle 18 | ... 19 | dependencies { 20 | ... 21 | compile project(':ReactNativeDropdownAndroid') 22 | } 23 | ``` 24 | 25 | 4. Register module (in MainActivity.java) 26 | 27 | 4.1. With RN < 0.19.0 28 | 29 | ```java 30 | import com.chymtt.reactnativedropdown.DropdownPackage; // <----- import 31 | 32 | public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler { 33 | ...... 34 | 35 | @Override 36 | protected void onCreate(Bundle savedInstanceState) { 37 | super.onCreate(savedInstanceState); 38 | mReactRootView = new ReactRootView(this); 39 | 40 | mReactInstanceManager = ReactInstanceManager.builder() 41 | .setApplication(getApplication()) 42 | .setBundleAssetName("index.android.bundle") 43 | .setJSMainModuleName("index.android") 44 | .addPackage(new MainReactPackage()) 45 | .addPackage(new DropdownPackage()) // <------ add here 46 | .setUseDeveloperSupport(BuildConfig.DEBUG) 47 | .setInitialLifecycleState(LifecycleState.RESUMED) 48 | .build(); 49 | 50 | mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null); 51 | 52 | setContentView(mReactRootView); 53 | } 54 | ...... 55 | } 56 | ``` 57 | 58 | 4.2. With RN >= 0.19.0 59 | 60 | ```java 61 | import com.chymtt.reactnativedropdown.DropdownPackage; // <----- import 62 | 63 | public class MainActivity extends ReactActivity { 64 | ... 65 | 66 | @Override 67 | protected List getPackages() { 68 | return Arrays.asList( 69 | new MainReactPackage(), 70 | new DropdownPackage() // <------ add here 71 | ); 72 | } 73 | } 74 | ``` 75 | 76 | ## Usage 77 | 78 | ```js 79 | 80 | var Dropdown = require('react-native-dropdown-android'); 81 | ... 82 | 83 | render() { 84 | return ( 85 | { console.log(data); }} /> 89 | ); 90 | } 91 | ``` 92 | 93 | ## Props 94 | 95 | ### style 96 | 97 | Right now you should always and only provide its height and width, otherwise the dropdown won't show up at all 98 | 99 | ### values 100 | 101 | An array of options. This should be provided with an __array of strings__. Any type other than string will be converted to its string representation 102 | 103 | ### selected 104 | 105 | An int indicating which option (zero-based) is currently selected 106 | 107 | ### onChange(data) 108 | 109 | Callback with data in the form `data = { selected: 1, value: 'one' }` 110 | 111 | ## Questions or suggestions? 112 | 113 | Feel free to [open an issue](https://github.com/chymtt/ReactNativeDropdownAndroid/issues) 114 | [Pull requests](https://github.com/chymtt/ReactNativeDropdownAndroid/pulls) are also welcome 115 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.library' 2 | 3 | android { 4 | compileSdkVersion 23 5 | buildToolsVersion "23.0.1" 6 | 7 | defaultConfig { 8 | minSdkVersion 16 9 | targetSdkVersion 22 10 | versionCode 1 11 | versionName "1.0" 12 | ndk { 13 | abiFilters "armeabi-v7a", "x86" 14 | } 15 | } 16 | } 17 | 18 | dependencies { 19 | compile 'com.android.support:appcompat-v7:23.0.0' 20 | compile 'com.facebook.react:react-native:0.19.+' 21 | } 22 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /android/src/main/java/com/chymtt/reactnativedropdown/Dropdown.java: -------------------------------------------------------------------------------- 1 | package com.chymtt.reactnativedropdown; 2 | 3 | import android.content.Context; 4 | import android.os.SystemClock; 5 | import android.support.v7.widget.AppCompatSpinner; 6 | import android.view.View; 7 | import android.widget.AdapterView; 8 | import android.widget.ArrayAdapter; 9 | 10 | import com.facebook.react.bridge.ReactContext; 11 | import com.facebook.react.bridge.ReadableArray; 12 | import com.facebook.react.uimanager.ThemedReactContext; 13 | import com.facebook.react.uimanager.UIManagerModule; 14 | 15 | import java.util.ArrayList; 16 | 17 | public class Dropdown extends AppCompatSpinner { 18 | 19 | private Context mContext; 20 | private boolean firstEventFired = false; 21 | private int mSelected = 0; 22 | private int selected = 0; 23 | 24 | public Dropdown(ThemedReactContext context) { 25 | super(context, 0); 26 | mContext = context; 27 | setOnItemSelectedListener(ON_ITEM_SELECTED_LISTENER); 28 | } 29 | 30 | public void setValues(ReadableArray values) { 31 | ArrayList spinnerArray = new ArrayList(); 32 | for (int i = 0; i < values.size(); i++) { 33 | String type = values.getType(i).name(); 34 | if ("String".equals(type)) { 35 | spinnerArray.add(values.getString(i)); 36 | } else { 37 | if ("Number".equals(type)) { 38 | Double v = values.getDouble(i); 39 | if ((v == Math.floor(v)) && !Double.isInfinite(v)) { 40 | spinnerArray.add("" + values.getInt(i)); 41 | } else { 42 | spinnerArray.add("" + v); 43 | } 44 | } else if ("Boolean".equals(type)) { 45 | spinnerArray.add("" + values.getBoolean(i)); 46 | } else if ("Array".equals(type)) { 47 | spinnerArray.add(values.getArray(i).toString()); 48 | } else if ("Map".equals(type)) { 49 | spinnerArray.add(values.getMap(i).toString()); 50 | } 51 | } 52 | } 53 | ArrayAdapter spinnerArrayAdapter = new ArrayAdapter(mContext, 54 | android.R.layout.simple_spinner_item, spinnerArray); 55 | spinnerArrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); 56 | setAdapter(spinnerArrayAdapter); 57 | setSelection(mSelected); 58 | } 59 | 60 | public void setSelected(int selected) { 61 | if (selected == mSelected && selected == this.selected) { 62 | return; 63 | } 64 | mSelected = selected; 65 | setSelection(mSelected); 66 | } 67 | 68 | private final AdapterView.OnItemSelectedListener ON_ITEM_SELECTED_LISTENER = 69 | new AdapterView.OnItemSelectedListener() { 70 | @Override 71 | public void onItemSelected(AdapterView parent, View view, int pos, long id) { 72 | selected = pos; 73 | // It always fire this event when the component starts, thus we need to surpress 74 | // the first event 75 | if (!firstEventFired) { 76 | firstEventFired = true; 77 | return; 78 | } 79 | ReactContext reactContext = (ReactContext) view.getContext(); 80 | reactContext 81 | .getNativeModule(UIManagerModule.class) 82 | .getEventDispatcher().dispatchEvent( 83 | new DropdownEvent( 84 | getId(), 85 | SystemClock.uptimeMillis(), 86 | pos, 87 | parent.getSelectedItem().toString())); 88 | } 89 | 90 | @Override 91 | public void onNothingSelected(AdapterView parent) {} 92 | }; 93 | 94 | private final Runnable mLayoutRunnable = new Runnable() { 95 | @Override 96 | public void run() { 97 | measure(MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY), 98 | MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY)); 99 | layout(getLeft(), getTop(), getRight(), getBottom()); 100 | } 101 | }; 102 | 103 | @Override 104 | public void requestLayout() { 105 | super.requestLayout(); 106 | post(mLayoutRunnable); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /android/src/main/java/com/chymtt/reactnativedropdown/DropdownEvent.java: -------------------------------------------------------------------------------- 1 | package com.chymtt.reactnativedropdown; 2 | 3 | import com.facebook.react.bridge.Arguments; 4 | import com.facebook.react.bridge.WritableMap; 5 | import com.facebook.react.uimanager.events.Event; 6 | import com.facebook.react.uimanager.events.RCTEventEmitter; 7 | 8 | public class DropdownEvent extends Event { 9 | public static final String EVENT_NAME = "topChange"; 10 | 11 | private final int mPosition; 12 | private final String mValue; 13 | 14 | public DropdownEvent(int viewId, long timestampMs, int position, String value) { 15 | super(viewId, timestampMs); 16 | mPosition = position; 17 | mValue = value; 18 | } 19 | 20 | public int getPosition() { 21 | return mPosition; 22 | } 23 | 24 | public String getValue() { 25 | return mValue; 26 | } 27 | 28 | @Override 29 | public String getEventName() { 30 | return EVENT_NAME; 31 | } 32 | 33 | @Override 34 | public short getCoalescingKey() { 35 | return 0; 36 | } 37 | 38 | @Override 39 | public void dispatch(RCTEventEmitter rctEventEmitter) { 40 | rctEventEmitter.receiveEvent(getViewTag(), getEventName(), serializeEventData()); 41 | } 42 | 43 | private WritableMap serializeEventData() { 44 | WritableMap eventData = Arguments.createMap(); 45 | eventData.putInt("selected", getPosition()); 46 | eventData.putString("value", getValue()); 47 | return eventData; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /android/src/main/java/com/chymtt/reactnativedropdown/DropdownManager.java: -------------------------------------------------------------------------------- 1 | package com.chymtt.reactnativedropdown; 2 | 3 | import com.facebook.react.uimanager.SimpleViewManager; 4 | import com.facebook.react.uimanager.ThemedReactContext; 5 | import com.facebook.react.uimanager.annotations.ReactProp; 6 | import com.facebook.react.bridge.ReadableArray; 7 | 8 | public class DropdownManager extends SimpleViewManager { 9 | public static final String REACT_CLASS = "DropdownAndroid"; 10 | 11 | @Override 12 | public String getName() { 13 | return REACT_CLASS; 14 | } 15 | 16 | @Override 17 | protected Dropdown createViewInstance(ThemedReactContext context) { 18 | return new Dropdown(context); 19 | } 20 | 21 | @ReactProp(name = "values") 22 | public void setValues(Dropdown view, ReadableArray values) { 23 | view.setValues(values); 24 | } 25 | 26 | @ReactProp(name = "selected") 27 | public void setSelected(Dropdown view, int selected) { 28 | view.setSelected(selected); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /android/src/main/java/com/chymtt/reactnativedropdown/DropdownPackage.java: -------------------------------------------------------------------------------- 1 | package com.chymtt.reactnativedropdown; 2 | 3 | import com.facebook.react.ReactPackage; 4 | import com.facebook.react.bridge.JavaScriptModule; 5 | import com.facebook.react.bridge.NativeModule; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.react.uimanager.ViewManager; 8 | 9 | import java.util.ArrayList; 10 | import java.util.Arrays; 11 | import java.util.List; 12 | 13 | public class DropdownPackage implements ReactPackage { 14 | @Override 15 | public List createNativeModules(ReactApplicationContext reactApplicationContext) { 16 | return new ArrayList(); 17 | } 18 | 19 | @Override 20 | public List createViewManagers(ReactApplicationContext reactApplicationContext) { 21 | return Arrays.asList( 22 | new DropdownManager() 23 | ); 24 | } 25 | 26 | @Override 27 | public List> createJSModules() { 28 | return Arrays.asList(); 29 | } 30 | } -------------------------------------------------------------------------------- /android/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-dropdown-android", 3 | "version": "0.0.12", 4 | "description": "Simple wrapper for Android's Spinner to use with react-native", 5 | "main": "src/Dropdown.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/chymtt/ReactNativeDropdownAndroid" 9 | }, 10 | "keywords": [ 11 | "react-component", 12 | "react-native", 13 | "android", 14 | "spinner", 15 | "dropdown" 16 | ], 17 | "author": "Do Anh Tu ", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/chymtt/ReactNativeDropdownAndroid/issues" 21 | }, 22 | "homepage": "https://github.com/chymtt/ReactNativeDropdownAndroid" 23 | } 24 | -------------------------------------------------------------------------------- /src/Dropdown.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React, { Component, PropTypes } from 'react'; 4 | import { requireNativeComponent, View } from 'react-native'; 5 | 6 | var NativeDropdown = requireNativeComponent('DropdownAndroid', Dropdown); 7 | 8 | class Dropdown extends React.Component { 9 | constructor() { 10 | super(); 11 | this._onChange = this._onChange.bind(this); 12 | } 13 | 14 | _onChange(event) { 15 | if (this.props.onChange) { 16 | this.props.onChange(event.nativeEvent); 17 | } 18 | } 19 | 20 | render() { 21 | return ( 22 | 25 | ); 26 | } 27 | } 28 | 29 | Dropdown.propTypes = { 30 | ...View.propTypes, 31 | values: PropTypes.array.isRequired, 32 | selected: PropTypes.number, 33 | onChange: PropTypes.func 34 | }; 35 | 36 | Dropdown.defaultProps = { 37 | values: [ '' ], 38 | selected: 0 39 | } 40 | 41 | module.exports = Dropdown; --------------------------------------------------------------------------------