Add more props and a X to clear on android

Author: brentvatne

.gitignore

@@ -0,0 +1 @@
+node_modules

package.json

@@ -1,6 +1,9 @@
 {
   "name": "react-navigation-addon-search-layout",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "main": "index.js",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "react-native-platform-touchable": "^1.1.1"
+  }
 }

src/Header.js

@@ -70,8 +70,8 @@ if (Platform.OS === 'ios') {
 
 const styles = StyleSheet.create({
   container: {
+    backgroundColor: '#fff',
     paddingTop: STATUSBAR_HEIGHT,
-    backgroundColor: Platform.OS === 'ios' ? '#F7F7F7' : '#FFF',
     height: STATUSBAR_HEIGHT + APPBAR_HEIGHT,
     ...platformContainerStyles,
   },

src/SearchBar.android.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import { NativeModules, StyleSheet, TextInput, View } from 'react-native';
 import { withNavigation } from 'react-navigation';
+import Touchable from 'react-native-platform-touchable';
+
+import { Icon } from 'expo';
 
 @withNavigation
 export default class SearchBar extends React.PureComponent {
@@ -16,8 +19,8 @@ export default class SearchBar extends React.PureComponent {
 
   render() {
     let searchInputStyle = {};
-    if (this.props.tintColor) {
-      searchInputStyle.color = this.props.tintColor;
+    if (this.props.textColor) {
+      searchInputStyle.color = this.props.textColor;
     }
 
     return (
@@ -31,15 +34,35 @@ export default class SearchBar extends React.PureComponent {
           value={this.state.text}
           autoCapitalize="none"
           autoCorrect={false}
+          selectionColor={this.props.selectionColor}
           underlineColorAndroid={this.props.underlineColorAndroid || '#ccc'}
           onSubmitEditing={this._handleSubmit}
           onChangeText={this._handleChangeText}
           style={[styles.searchInput, searchInputStyle]}
         />
+        <View
+          style={{ width: 50, alignItems: 'center', justifyContent: 'center' }}>
+          {this.state.text
+            ? <Touchable
+                onPress={this._handleClear}
+                hitSlop={{top: 15, left: 10, right: 15, bottom: 15}}
+                style={{ padding: 5 }}
+                background={Touchable.Ripple(this.props.tintColor, true)}>
+                <Icon.Ionicons
+                  name="md-close"
+                  size={25}
+                  color={this.props.tintColor}
+                />
+              </Touchable>
+            : null}
+        </View>
       </View>
     );
   }
 
+  _handleClear = () => {
+    this.setState({ text: '' });
+  };
   _handleChangeText = text => {
     this.setState({ text });
     this.props.onChangeQuery && this.props.onChangeQuery(text);

src/SearchBar.ios.js

@@ -42,6 +42,7 @@ class PlaceholderButtonSearchBar extends React.PureComponent {
               editable={false}
               placeholder="Search"
               placeholderTextColor={this.props.placeholderTextColor || '#ccc'}
+              selectionColor={this.props.selectionColor}
               style={styles.searchInput}
             />
 
@@ -103,6 +104,10 @@ export default class SearchBar extends React.PureComponent {
 
   render() {
     let { inputWidth, showCancelButton } = this.state;
+    let searchInputStyle = {};
+    if (this.props.textColor) {
+      searchInputStyle.color = this.props.textColor;
+    }
 
     return (
       <View style={styles.container}>
@@ -120,7 +125,7 @@ export default class SearchBar extends React.PureComponent {
             placeholder="Search"
             placeholderTextColor={this.props.placeholderTextColor || '#ccc'}
             onSubmitEditing={this._handleSubmit}
-            style={styles.searchInput}
+            style={[styles.searchInput, searchInputStyle]}
           />
 
           <SearchIcon />

src/SearchLayout.js

@@ -13,6 +13,8 @@ export default class SearchLayout extends React.Component {
 
   static defaultProps = {
     debounce: 500,
+    headerBackgroundColor: Platform.OS === 'ios' ? '#f7f7f7' : '#fff',
+    headerTintColor: '#000',
   };
 
   state = {
@@ -40,7 +42,12 @@ export default class SearchLayout extends React.Component {
             onChangeQuery={this._handleChangeQuery}
             onSubmit={this._handleSubmit}
             placeholderTextColor={this.props.searchInputPlaceholderTextColor}
-            underlineColorAndroid={this.props.searchInputUnderlineColorAndroid}
+            textColor={this.props.searchInputTextColor}
+            selectionColor={this.props.searchInputSelectionColor}
+            underlineColorAndroid={
+              this.props.searchInputUnderlineColorAndroid ||
+              this.props.headerBackgroundColor
+            }
             tintColor={
               this.props.searchInputTintColor || this.props.headerTintColor
             }

yarn.lock

@@ -0,0 +1,7 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+react-native-platform-touchable@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz#fde4acc65eea585d28b164d0c3716a42129a68e4"