SearchBox: TextInput android design bug fix

WrathChaos · Dec 20, 2019 · 2784281 · 2784281
1 parent e3fd13f
commit 2784281
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -93,7 +93,9 @@ import {
 | iconSize                 |  number   |            25             | set the icon size                                     |
 | iconColor                |   color   |           #000            | set the icon color                                    |
 | onChangeText             | function  |         function          | set your own logic for changing text                  |
+| value                    |  string   |         undefined         | set the value for search box's text input             |
 | searchBoxText            |  string   | What are you looking for? | set the search box's text                             |
+| searchBoxTextStyle       |   style   |          default          | set your own style for text input's style             |
 | searchBoxOnPress         | function  |         function          | set your own logic when tapping the search box itself |
 | searchBoxWidth           |  number   |            95%            | change the search box's width                         |
 | searchBoxBorderRadius    |  number   |             8             | change the search box's border radius                 |

diff --git a/example/App.js b/example/App.js
@@ -1,16 +1,20 @@
 import React from "react";
 import { View, StatusBar } from "react-native";
-import {
-  HeaderSearchBar,
-  HeaderClassicSearchBar
-} from "react-native-header-search-bar";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+// import {
+//   HeaderSearchBar,
+//   HeaderClassicSearchBar
+// } from "react-native-header-search-bar";
+import HeaderClassicSearchBar from "./lib/src/HeaderClassicSearchBar/HeaderClassicSearchBar";
 
 const App = () => {
   return (
-    <View>
-      <StatusBar barStyle="dark-content" />
-      <HeaderClassicSearchBar onChangeText={text => console.log(text)} />
-    </View>
+    <SafeAreaProvider>
+      <View>
+        <StatusBar barStyle="dark-content" />
+        <HeaderClassicSearchBar onChangeText={text => console.log(text)} />
+      </View>
+    </SafeAreaProvider>
   );
 };
 

diff --git a/example/package.json b/example/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "android": "react-native run-android",
+    "android": "adb reverse tcp:8081 tcp:8081 && npx jetify && react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native start --reset-cache",
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
@@ -15,7 +15,7 @@
     "react-native": "0.61.2",
     "react-native-androw": "0.0.33",
     "react-native-dynamic-vector-icons": "^0.2.1",
-    "react-native-header-search-bar": "0.1.3",
+    "react-native-header-search-bar": "0.1.7",
     "react-native-material-ripple": "^0.9.1",
     "react-native-safe-area-context": "^0.6.1",
     "react-native-vector-icons": "^6.6.0"

diff --git a/lib/src/components/SearchBox/SearchBox.js b/lib/src/components/SearchBox/SearchBox.js
@@ -6,6 +6,7 @@ import styles, { searchBoxContainer } from "./SearchBox.style";
 
 const SearchBox = props => {
   const {
+    value,
     onFocus,
     iconName,
     iconType,
@@ -17,6 +18,7 @@ const SearchBox = props => {
     searchBoxWidth,
     searchBoxOnPress,
     disableTextInput,
+    searchBoxTextStyle,
     searchBoxBorderRadius,
     searchBoxBackgroundColor
   } = props;
@@ -26,10 +28,11 @@ const SearchBox = props => {
       return <Text style={styles.searchBoxTextStyle}>{searchBoxText}</Text>;
     return (
       <TextInput
+        value={value}
         onFocus={onFocus}
         onChangeText={onChangeText}
         placeholder={searchBoxText}
-        style={styles.searchBoxTextStyle}
+        style={searchBoxTextStyle || styles.searchBoxTextStyle}
       />
     );
   };

diff --git a/lib/src/components/SearchBox/SearchBox.style.js b/lib/src/components/SearchBox/SearchBox.style.js
@@ -8,7 +8,9 @@ export function searchBoxContainer(
   return {
     left: 8,
     padding: 6,
+    alignItems: "center",
     width: searchBoxWidth,
+    justifyContent: "center",
     height: isAndroid ? 30 : null,
     borderRadius: searchBoxBorderRadius,
     backgroundColor: searchBoxBackgroundColor
@@ -23,7 +25,9 @@ export default {
   searchBoxTextStyle: {
     left: 3,
     width: "85%",
-    fontSize: 12,
-    color: "black"
+    fontSize: 13,
+    color: "#000",
+    height: isAndroid ? 50 : null,
+    backgroundColor: "transparent"
   }
 };