Add prop for custom styling selected element (#82)

* Enabling custom styling of selected item with 'selectedItemTextStyle' Closes #75 * Add 'selectedItemTextStyle' to README
peacechen · Aug 16, 2018 · 74ab38d · 74ab38d
1 parent 4fa202b
commit 74ab38d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -126,6 +126,7 @@ Prop                | Type     | Optional | Default      | Description
 `overlayStyle`      | object   | Yes      | { flex: 1, padding: '5%', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.7)' } | style definitions for the overlay background element. RN <= 0.41 should override this with pixel value for padding.
 `sectionStyle`      | object   | Yes      | {}           | style definitions for the section element
 `sectionTextStyle`  | object   | Yes      | {}           | style definitions for the select text element
+`selectedItemTextStyle` | object | Yes    | {}           | style definitions for the currently selected text element
 `optionStyle`       | object   | Yes      | {}           | style definitions for the option element
 `optionTextStyle`   | object   | Yes      | {}           | style definitions for the option text element
 `optionContainerStyle`| object | Yes      | {}           | style definitions for the option container element

diff --git a/index.js b/index.js
@@ -42,6 +42,7 @@ const propTypes = {
     touchableStyle:                 ViewPropTypes.style,
     touchableActiveOpacity:         PropTypes.number,
     sectionTextStyle:               Text.propTypes.style,
+    selectedItemTextStyle:          Text.propTypes.style,
     cancelContainerStyle:           ViewPropTypes.style,
     cancelStyle:                    ViewPropTypes.style,
     cancelTextStyle:                Text.propTypes.style,
@@ -81,6 +82,7 @@ const defaultProps = {
     touchableStyle:                 {},
     touchableActiveOpacity:         0.2,
     sectionTextStyle:               {},
+    selectedItemTextStyle:          {},
     cancelContainerStyle:           {},
     cancelStyle:                    {},
     cancelTextStyle:                {},
@@ -162,6 +164,9 @@ export default class ModalSelector extends React.Component {
     }
 
     renderOption = (option, isLastItem) => {
+        const optionLabel = this.props.labelExtractor(option);
+        const isSelectedItem = optionLabel === this.state.selected;
+
         return (
             <TouchableOpacity
               key={this.props.keyExtractor(option)}
@@ -173,7 +178,10 @@ export default class ModalSelector extends React.Component {
             >
                 <View style={[styles.optionStyle, this.props.optionStyle, isLastItem &&
                 {borderBottomWidth: 0}]}>
-                    <Text style={[styles.optionTextStyle,this.props.optionTextStyle]}>{this.props.labelExtractor(option)}</Text>
+                    <Text style={[styles.optionTextStyle,this.props.optionTextStyle,
+                                 isSelectedItem && this.props.selectedItemTextStyle]}>
+                        {optionLabel}
+                    </Text>
                 </View>
             </TouchableOpacity>);
     }