Merge pull request sohobloo#49 from evansiroky/master

Add ability to style dropdown text

Author: sohobloo

components/ModalDropdown.js

@@ -40,6 +40,8 @@ export default class ModalDropdown extends Component {
     style: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
     textStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
     dropdownStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
+    dropdownTextStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
+    dropdownTextHighlightStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
 
     adjustFrame: PropTypes.func,
     renderRow: PropTypes.func,
@@ -277,7 +279,13 @@ export default class ModalDropdown extends Component {
     let key = `row_${rowID}`;
     let highlighted = rowID == this.state.selectedIndex;
     let row = !this.props.renderRow ?
-      (<Text style={[styles.rowText, highlighted && styles.highlightedRowText]}>
+      (<Text style={[
+           styles.rowText,
+           this.props.dropdownTextStyle,
+           highlighted && styles.highlightedRowText,
+           highlighted && this.props.dropdownTextHighlightStyle
+         ]}
+         >
         {rowData}
       </Text>) :
       this.props.renderRow(rowData, rowID, highlighted);

example/index.js

@@ -83,6 +83,8 @@ class Demo extends Component {
                            style={styles.dropdown_3}
                            options={DEMO_OPTIONS_1}
                            adjustFrame={style => this._dropdown_3_adjustFrame(style)}
+                           dropdownTextStyle={styles.dropdown_3_dropdownTextStyle}
+                           dropdownTextHighlightStyle={styles.dropdown_3_dropdownTextHighlightStyle}
             />
           </ScrollView>
         </View>
@@ -295,6 +297,14 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 1,
   },
+  dropdown_3_dropdownTextStyle: {
+    backgroundColor: '#000',
+    color: '#fff'
+  },
+  dropdown_3_dropdownTextHighlightStyle: {
+    backgroundColor: '#fff',
+    color: '#000'
+  },
   dropdown_4: {
     margin: 8,
     borderColor: 'lightgray',