Android tested and worked with new SafeAreaView dependency. Now even …

…on the Android, its design is perfect :)

README.md

@@ -36,6 +36,7 @@ npm i react-native-header-search-bar
 "react-native": ">= 0.55.x",
 "react-native-androw": ">= 0.0.33",
 "react-native-vector-icons": ">= 6.6.0",
+"react-native-safe-area-context": ">= 0.6.1",
 "react-native-dynamic-vector-icons": ">= 0.2.1",
 "@freakycoder/react-native-helpers": ">= 0.0.21"
 ```

example/package.json

@@ -17,6 +17,7 @@
     "react-native-dynamic-vector-icons": "^0.2.1",
     "react-native-header-search-bar": "0.1.3",
     "react-native-material-ripple": "^0.9.1",
+    "react-native-safe-area-context": "^0.6.1",
     "react-native-vector-icons": "^6.6.0"
   },
   "devDependencies": {

lib/src/HeaderClassicSearchBar/HeaderClassicSearchBar.js

@@ -3,19 +3,22 @@ import PropTypes from "prop-types";
 import { View } from "react-native";
 import styles, {
   shadowStyle,
-  container
+  container,
+  searchboxContainer
 } from "../HeaderClassicSearchBar/HeaderClassicSearchBar.style";
 import Androw from "react-native-androw";
 import SearchBox from "../components/SearchBox/SearchBox";
 import Icon from "react-native-dynamic-vector-icons";
 import Ripple from "react-native-material-ripple";
+import { useSafeArea } from "react-native-safe-area-context";
 
 const HeaderClassicSearchBar = props => {
   const { shadowColor, backgroundColor, onPress } = props;
+  const insets = useSafeArea();
   return (
     <Androw style={shadowStyle(shadowColor)}>
-      <View style={container(backgroundColor)}>
-        <View style={styles.searchboxContainer}>
+      <View style={container(backgroundColor, insets)}>
+        <View style={searchboxContainer(insets)}>
           <SearchBox searchBoxWidth="80%" {...props} />
           <Ripple
             rippleColor="gray"

lib/src/HeaderClassicSearchBar/HeaderClassicSearchBar.style.js

@@ -16,23 +16,28 @@ export const shadowStyle = shadowColor => {
   };
 };
 
-export const container = backgroundColor => {
+export const container = (backgroundColor, insets) => {
   return {
-    height: isAndroid ? 70 : 115,
     width: "100%",
     backgroundColor,
     borderBottomEndRadius: 24,
-    borderBottomStartRadius: 24
+    borderBottomStartRadius: 24,
+    height: isAndroid ? insets.top + 70 : 115
   };
 };
 
+export const searchboxContainer = insets => ({
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-around",
+  marginTop: hasNotch()
+    ? getStatusBarHeight() + 16
+    : isAndroid
+    ? insets.top + 16
+    : 0
+});
+
 export default {
-  searchboxContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-around",
-    marginTop: hasNotch() ? getStatusBarHeight() + 16 : isAndroid? 16 : 0
-  },
   rippleContainer: {
     bottom: 2,
     width: 35,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-header-search-bar",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Fully customizable header search bar for React Native",
   "keywords": [
     "header",
@@ -30,6 +30,7 @@
     "react-native": ">= 0.55.x",
     "react-native-androw": ">= 0.0.33",
     "react-native-vector-icons": ">= 6.6.0",
+    "react-native-safe-area-context": ">= 0.6.1",
     "react-native-dynamic-vector-icons": ">= 0.2.1",
     "@freakycoder/react-native-helpers": ">= 0.0.21"
   }