From c4a8ed36fc23aa524869ff63f0fe10068fce61d0 Mon Sep 17 00:00:00 2001
From: Jakub Grzywacz <kontakt@jakubgrzywacz.pl>
Date: Wed, 11 Aug 2021 10:03:37 +0200
Subject: [PATCH] Feature / search bar customization (#20)

* feat: add props (searchBarStyles,
    searchBarTextStyles,
    searchBarPlaceholderColor)

* docs: update readme
---
 README.md                         | 3 +++
 src/components/SearchBar.tsx      | 8 ++++++--
 src/contexts/KeyboardContext.tsx  | 3 +++
 src/contexts/KeyboardProvider.tsx | 3 +++
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 38a453c..4f9cb4b 100644
--- a/README.md
+++ b/README.md
@@ -49,6 +49,9 @@ export default function App() {
 | categoryPosition | 'floating' \| 'top' \| 'bottom' | 'floating' | no | Specify category container position |
 | enableSearchBar | boolean | false | no | Enable search bar |
 | closeSearchColor | string | "#00000055" | no | Change button (cross) color for close/cancel search |
+| searchBarStyles | ViewStyle | {} | no | Override search bar container styles |
+| searchBarTextStyles | ViewStyle | {} | no | Override search bar text styles |
+| searchBarPlaceholderColor | string | "#00000055" | no | Override search bar placeholder color |
 | headerStyles | TextStyle | {} | no | Override category name styles |
 | knobStyles | ViewStyle | {} | no | Override knob styles |
 | containerStyles | ViewStyle | {} | no | Override container styles |
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index cc37bb1..0870fea 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -20,6 +20,9 @@ export const SearchBar = ({ flatListRef }: SearchBarProps) => {
     translation,
     setActiveCategoryIndex,
     closeSearchColor,
+    searchBarStyles,
+    searchBarTextStyles,
+    searchBarPlaceholderColor,
   } = React.useContext(KeyboardContext);
   const inputRef = React.useRef<TextInput>(null);
 
@@ -34,13 +37,14 @@ export const SearchBar = ({ flatListRef }: SearchBarProps) => {
   };
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, searchBarStyles]}>
       <TextInput
-        style={styles.input}
+        style={[styles.input, searchBarTextStyles]}
         value={searchPhrase}
         onChangeText={handleSearch}
         placeholder={translation.search}
         ref={inputRef}
+        placeholderTextColor={searchBarPlaceholderColor}
       />
       {!!searchPhrase && (
         <TouchableOpacity onPress={clearPhrase} style={styles.button}>
diff --git a/src/contexts/KeyboardContext.tsx b/src/contexts/KeyboardContext.tsx
index 9104f2a..f8923f6 100644
--- a/src/contexts/KeyboardContext.tsx
+++ b/src/contexts/KeyboardContext.tsx
@@ -41,6 +41,9 @@ export type KeyboardProps = {
   categoryPosition?: CategoryPosition;
   enableSearchBar?: boolean;
   closeSearchColor?: string;
+  searchBarStyles?: ViewStyle;
+  searchBarTextStyles?: TextStyle;
+  searchBarPlaceholderColor?: string;
 };
 export type ContextValues = {
   activeCategoryIndex: number;
diff --git a/src/contexts/KeyboardProvider.tsx b/src/contexts/KeyboardProvider.tsx
index 63d2300..f80ef3d 100644
--- a/src/contexts/KeyboardProvider.tsx
+++ b/src/contexts/KeyboardProvider.tsx
@@ -40,6 +40,9 @@ export const defaultKeyboardContext: Required<KeyboardProps> = {
   categoryPosition: 'floating',
   enableSearchBar: false,
   closeSearchColor: '#00000055',
+  searchBarStyles: {},
+  searchBarTextStyles: {},
+  searchBarPlaceholderColor: '#00000055',
 };
 
 export const defaultKeyboardValues: ContextValues = {