Add overlayBackground and able to change search Icon. (#1570)

* Add overlayBackground and able to change search Icon.

* overlayBackgroundColor => pickerModalProps

* Spread all of the props

Co-authored-by: Ethan Sharabi <[email protected]>

Co-authored-by: Ethan Sharabi <[email protected]>

Author: lucswart

src/components/picker/PickerModal.js

@@ -21,12 +21,14 @@ class PickerModal extends BaseComponent {
     searchStyle: PropTypes.shape({
       color: PropTypes.string,
       placeholderTextColor: PropTypes.string,
-      selectionColor: PropTypes.string
+      selectionColor: PropTypes.string,
+      icon: PropTypes.object
     }),
     searchPlaceholder: PropTypes.string,
     onSearchChange: PropTypes.func,
     renderCustomSearch: PropTypes.elementType,
-    listProps: PropTypes.object
+    listProps: PropTypes.object,
+    pickerModalProps: PropTypes.object
   };
 
   static defaultProps = {
@@ -55,7 +57,7 @@ class PickerModal extends BaseComponent {
 
       return (
         <View style={this.styles.searchInputContainer}>
-          <Image style={this.styles.searchIcon} source={Assets.icons.search}/>
+          <Image style={this.styles.searchIcon} source={searchStyle.icon || Assets.icons.search}/>
           <TextInput
             testID={testID}
             ref={r => (this.search = r)}
@@ -78,7 +80,7 @@ class PickerModal extends BaseComponent {
   };
 
   render() {
-    const {visible, enableModalBlur, topBarProps, listProps, children, onShow} = this.props;
+    const {visible, enableModalBlur, topBarProps, listProps, children, onShow, pickerModalProps} = this.props;
     return (
       <Modal
         animationType={'slide'}
@@ -87,6 +89,7 @@ class PickerModal extends BaseComponent {
         visible={visible}
         onRequestClose={topBarProps.onCancel}
         onShow={onShow}
+        {...pickerModalProps}
       >
         <Modal.TopBar {...topBarProps}/>
         {this.renderSearchInput()}

src/components/picker/index.js

@@ -144,7 +144,11 @@ class Picker extends Component {
     /**
      * Pass props to the list component that wraps the picker options (allows to control FlatList behavior)
      */
-    listProps: PropTypes.object
+    listProps: PropTypes.object,
+    /**
+     * Pass props to the picker modal
+     */
+    pickerModalProps: PropTypes.object
   };
 
   static defaultProps = {
@@ -365,7 +369,8 @@ class Picker extends Component {
       renderCustomModal,
       listProps,
       children,
-      testID
+      testID,
+      pickerModalProps
     } = this.props;
     const {showExpandableModal, selectedItemPosition, value} = this.state;
 
@@ -407,6 +412,7 @@ class Picker extends Component {
           renderCustomSearch={renderCustomSearch}
           listProps={listProps}
           onShow={onShow}
+          pickerModalProps={pickerModalProps}
         >
           {this.children}
         </PickerModal>