feat: close search

src/assets/Close.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Svg, { FillProps, Path } from 'react-native-svg';
+
+export default ({ fill }: FillProps) => (
+  <Svg width="23" height="23" viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"
+      fill={fill}
+    />
+  </Svg>
+);

src/components/EmojiCategory.tsx

@@ -113,7 +113,7 @@ const styles = StyleSheet.create({
   },
   sectionTitle: {
     opacity: 0.6,
-    marginTop: 16,
+    marginTop: 12,
     marginBottom: 6,
     marginLeft: 12,
   },

src/components/EmojiStaticKeyboard.tsx

@@ -83,7 +83,7 @@ export const EmojiStaticKeyboard = () => {
         containerStyles,
       ]}
     >
-      {enableSearchBar && <SearchBar />}
+      {enableSearchBar && <SearchBar flatListRef={flatListRef} />}
       <Animated.FlatList
         data={getData()}
         extraData={searchPhrase}

src/components/Icon.tsx

@@ -9,6 +9,7 @@ import Trees from '../assets/Trees';
 import Ban from '../assets/Ban';
 import Users from '../assets/Users';
 import Search from '../assets/Search';
+import Close from '../assets/Close';
 
 export const Icon = ({
   iconName,
@@ -43,6 +44,8 @@ export const Icon = ({
       return <Users fill={color()} />;
     case 'Search':
       return <Search fill={color()} />;
+    case 'Close':
+      return <Close fill={color()} />;
     default:
       return null;
   }

src/components/SearchBar.tsx

@@ -1,26 +1,57 @@
 import * as React from 'react';
-import { View, StyleSheet, TextInput } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  FlatList,
+} from 'react-native';
 import { KeyboardContext } from '../contexts/KeyboardContext';
+import { Icon } from './Icon';
 
-export const SearchBar = () => {
-  const [search, setSearch] = React.useState('');
-  const { setSearchPhrase, translation } = React.useContext(KeyboardContext);
-  React.useEffect(() => {
-    console.log(search);
-  }, [search]);
+type SearchBarProps = {
+  flatListRef: React.RefObject<FlatList>;
+};
+
+export const SearchBar = ({ flatListRef }: SearchBarProps) => {
+  const {
+    searchPhrase,
+    setSearchPhrase,
+    translation,
+    setActiveCategoryIndex,
+    closeSearchColor,
+  } = React.useContext(KeyboardContext);
+  const inputRef = React.useRef<TextInput>(null);
 
   const handleSearch = (text: string) => {
-    setSearch(text);
     setSearchPhrase(text);
   };
+  const clearPhrase = () => {
+    setSearchPhrase('');
+    inputRef.current?.blur();
+    setActiveCategoryIndex(0);
+    flatListRef?.current?.scrollToIndex({ index: 0, animated: true });
+  };
+
   return (
     <View style={styles.container}>
       <TextInput
         style={styles.input}
-        value={search}
+        value={searchPhrase}
         onChangeText={handleSearch}
         placeholder={translation.search}
+        ref={inputRef}
       />
+      {!!searchPhrase && (
+        <TouchableOpacity onPress={clearPhrase} style={styles.button}>
+          <Icon
+            iconName={'Close'}
+            isActive={true}
+            normalColor={closeSearchColor}
+            activeColor={closeSearchColor}
+          />
+        </TouchableOpacity>
+      )}
     </View>
   );
 };
@@ -28,13 +59,19 @@ export const SearchBar = () => {
 const styles = StyleSheet.create({
   container: {
     marginTop: 16,
-  },
-  input: {
-    paddingVertical: 8,
-    paddingHorizontal: 12,
     marginHorizontal: 16,
     borderRadius: 100,
     borderWidth: 1,
     borderColor: '#00000011',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  input: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    flex: 1,
+  },
+  button: {
+    marginRight: 8,
   },
 });

src/contexts/KeyboardContext.tsx

@@ -39,6 +39,7 @@ export type KeyboardProps = {
   disabledCategory?: CategoryTypes[];
   categoryPosition?: CategoryPosition;
   enableSearchBar?: boolean;
+  closeSearchColor?: string;
 };
 export type ContextValues = {
   activeCategoryIndex: number;

src/contexts/KeyboardProvider.tsx

@@ -38,6 +38,7 @@ export const defaultKeyboardContext: Required<KeyboardProps> = {
   disabledCategory: [],
   categoryPosition: 'floating',
   enableSearchBar: false,
+  closeSearchColor: '#00000055',
 };
 
 export const defaultKeyboardValues: ContextValues = {