Feature / search bar customization (#20)

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

* docs: update readme

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 |

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}>

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;

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 = {