Support object options.

#26

Be sure to render your own trigger or I don't know what text to display
on it.

Author: sohobloo

.gitignore

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

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;
@@ -332,7 +332,7 @@ export default class ModalDropdown extends Component {
       this._nextValue = rowData;
       this._nextIndex = rowID;
       this.setState({
-        buttonText: rowData,
+        buttonText: rowData.toString(),
         selectedIndex: rowID,
       });
     }

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() {