Merge branch 'dev'

Author: sohobloo

.gitignore

@@ -6,3 +6,5 @@
 .idea
 
 npm-debug.log
+
+example/ModalDropdown.js

README.md

@@ -21,13 +21,17 @@ You can find them in the example.
 
 ## Update History
 
+### v0.4.1
+- Fix bug: [\#27](https://github.com/sohobloo/react-native-modal-dropdown/issues/27) Fix a flex style bug.
+- Enhancement: [\#26](https://github.com/sohobloo/react-native-modal-dropdown/issues/26) Support object type of options.
+
 ### v0.4.0
 - New feature:
 [\#10](https://github.com/sohobloo/react-native-modal-dropdown/issues/10) Support touchable component in `renderRow`.
 - New feature: [\#11](https://github.com/sohobloo/react-native-modal-dropdown/issues/11) Open `renderSeparator` prop API.
 - New feature: Add `adjustFrame` prop for user to adjust the frame style of the dropdown in case the component calculate a mistake frame. \(refer to [#9](https://github.com/sohobloo/react-native-modal-dropdown/issues/5)\) \([code sample](https://github.com/sohobloo/react-native-modal-dropdown/commit/0861d0a1bbe11c221696e8c664ef03ed475a3849#diff-f8c408fd257ff44ce4b01e5f8422b1e1)\)
 - Enhancement: Compatible with `react-native` v0.36.0 which has a [break change](https://github.com/facebook/react-native/commit/0a9b6bedb312eba22c5bc11498b1cc41363e5f27) causes the default button with zero size.
-- Enhancement: [#16](https://github.com/sohobloo/react-native-modal-dropdown/issues/16) Prevent from warnings if array of styles is used instead of stylesheet or object. Thanks to @NikolaBorislavovHristov .
+- Enhancement: [\#16](https://github.com/sohobloo/react-native-modal-dropdown/issues/16) Prevent from warnings if array of styles is used instead of stylesheet or object. Thanks to @NikolaBorislavovHristov .
 
 ### v0.3.2
 - Fix bug: [\#9](https://github.com/sohobloo/react-native-modal-dropdown/issues/9) *undefined is not an object (evaluating '_this.updatePosition.bind')* in v0.3.1.
@@ -85,7 +89,7 @@ Prop                | Type     | Optional | Default   | Description
 `disabled`          | bool     | Yes      | false     | disable/enable the component.
 `defaultIndex`      | number   | Yes      | -1        | Init selected index. `-1`: None is selected. **This only change the highlight of the dropdown row, you have to give a `defaultValue` to change the init text.**
 `defaultValue`      | string   | Yes      | Please select... | Init text of the button. **Invalid in wrapper mode.**
-`options`           | arrayOf(string)| Yes|         | Options. **The dropdown will show a loading indicator if `options` is `null`/`undefined`.**
+`options`           | array    | Yes      |           | Options. **The dropdown will show a loading indicator if `options` is `null`/`undefined`.**
 `style`             | object   | Yes      |           | Style of the button.
 `textStyle`         | object   | Yes      |           | Style of the button text. **Invalid in wrapper mode.**
 `dropdownStyle`     | object   | Yes      |           | Style of the dropdown list.

components/ModalDropdown.js

@@ -38,7 +38,7 @@ export default class ModalDropdown extends Component {
     disabled: PropTypes.bool,
     defaultIndex: PropTypes.number,
     defaultValue: PropTypes.string,
-    options: PropTypes.arrayOf(PropTypes.string),
+    options: PropTypes.array,
 
     style: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
     textStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
@@ -71,7 +71,7 @@ export default class ModalDropdown extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    var buttonText = this._nextValue == null ? this.state.buttonText : this._nextValue;
+    var buttonText = this._nextValue == null ? this.state.buttonText : this._nextValue.toString();
     var selectedIndex = this._nextIndex == null ? this.state.selectedIndex : this._nextIndex;
     if (selectedIndex < 0) {
       selectedIndex = nextProps.defaultIndex;
@@ -129,7 +129,7 @@ export default class ModalDropdown extends Component {
     }
 
     if (idx >= 0) {
-      value = this.props.options[idx];
+      value = this.props.options[idx].toString();
     }
 
     this._nextValue = value;
@@ -278,31 +278,35 @@ export default class ModalDropdown extends Component {
       props.key = preservedProps.key;
       props.onPress = preservedProps.onPress;
       switch (row.type.displayName) {
-        case 'TouchableHighlight': {
+        case 'TouchableHighlight':
+        {
           return (
             <TouchableHighlight {...props}>
               {row.props.children}
             </TouchableHighlight>
           );
         }
           break;
-        case 'TouchableOpacity': {
+        case 'TouchableOpacity':
+        {
           return (
             <TouchableOpacity {...props}>
               {row.props.children}
             </TouchableOpacity>
           );
         }
           break;
-        case 'TouchableWithoutFeedback': {
+        case 'TouchableWithoutFeedback':
+        {
           return (
             <TouchableWithoutFeedback {...props}>
               {row.props.children}
             </TouchableWithoutFeedback>
           );
         }
           break;
-        case 'TouchableWithNativeFeedback': {
+        case 'TouchableWithNativeFeedback':
+        {
           return (
             <TouchableWithNativeFeedback {...props}>
               {row.props.children}
@@ -328,7 +332,7 @@ export default class ModalDropdown extends Component {
       this._nextValue = rowData;
       this._nextIndex = rowID;
       this.setState({
-        buttonText: rowData,
+        buttonText: rowData.toString(),
         selectedIndex: rowID,
       });
     }
@@ -350,18 +354,17 @@ export default class ModalDropdown extends Component {
 
 const styles = StyleSheet.create({
   button: {
-    flexGrow: 1,
     justifyContent: 'center',
   },
   buttonText: {
     fontSize: 12,
   },
   modal: {
-    flex: 1,
+    flexGrow: 1,
   },
   dropdown: {
     position: 'absolute',
-    height: (32 + StyleSheet.hairlineWidth) * 5,
+    height: (33 + StyleSheet.hairlineWidth) * 5,
     borderWidth: StyleSheet.hairlineWidth,
     borderColor: 'lightgray',
     borderRadius: 2,
@@ -372,14 +375,12 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   list: {
-    flex: 1,
+    //flexGrow: 1,
   },
   rowText: {
-    flex: 1,
     paddingHorizontal: 6,
+    paddingVertical: 10,
     fontSize: 11,
-    height: 32,
-    lineHeight: 32,
     color: 'gray',
     backgroundColor: 'white',
     textAlignVertical: 'center',

example/index.js

@@ -17,8 +17,20 @@ import {
 } from 'react-native';
 
 import ModalDropdown from 'react-native-modal-dropdown';
+//import ModalDropdown from './ModalDropdown';
 
 const DEMO_OPTIONS_1 = ['option 1', 'option 2', 'option 3', 'option 4', 'option 5', 'option 6', 'option 7', 'option 8', 'option 9'];
+const DEMO_OPTIONS_2 = [
+  {"name": "Rex", "age": 30},
+  {"name": "Mary", "age": 25},
+  {"name": "John", "age": 41},
+  {"name": "Jim", "age": 22},
+  {"name": "Susan", "age": 52},
+  {"name": "Brent", "age": 33},
+  {"name": "Alex", "age": 16},
+  {"name": "Ian", "age": 20},
+  {"name": "Phil", "age": 24},
+];
 
 class Demo extends Component {
   constructor(props) {
@@ -52,7 +64,7 @@ class Demo extends Component {
             <ModalDropdown style={styles.dropdown_2}
                            textStyle={styles.dropdown_2_text}
                            dropdownStyle={styles.dropdown_2_dropdown}
-                           options={DEMO_OPTIONS_1}
+                           options={DEMO_OPTIONS_2}
                            renderRow={this._dropdown_2_renderRow.bind(this)}
                            renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this._dropdown_2_renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
             />
@@ -127,7 +139,7 @@ class Demo extends Component {
                  source={icon}
           />
           <Text style={[styles.dropdown_2_row_text, highlighted && {color: 'mediumaquamarine'}]}>
-            {rowData}
+            {`${rowData.name} (${rowData.age})`}
           </Text>
         </View>
       </TouchableHighlight>
@@ -165,7 +177,8 @@ class Demo extends Component {
 
   _dropdown_4_onSelect(idx, value) {
     // BUG: alert in a modal will auto dismiss and causes crash after reload and touch. @sohobloo 2016-12-1
-    alert(`idx=${idx}, value='${value}'`);
+    //alert(`idx=${idx}, value='${value}'`);
+    console.debug(`idx=${idx}, value='${value}'`);
   }
 
   _dropdown_5_show() {
@@ -242,8 +255,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'cornflowerblue',
   },
   dropdown_2_text: {
-    height: 40,
-    lineHeight: 40,
+    marginVertical: 10,
     marginHorizontal: 6,
     fontSize: 18,
     color: 'white',
@@ -258,7 +270,6 @@ const styles = StyleSheet.create({
     borderRadius: 3,
   },
   dropdown_2_row: {
-    flex: 1,
     flexDirection: 'row',
     height: 40,
     alignItems: 'center',

example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-modal-dropdown-demo",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A demo for react-native-modal-dropdown component.",
   "homepage": "https://github.com/sohobloo/react-native-modal-dropdown",
   "license": "MIT",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-modal-dropdown",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A react-native dropdown component for both iOS and Android.",
   "keywords": [
     "react",