Added emoji search

src/components/Emojis/List.tsx

@@ -1,3 +1,4 @@
+import Icon from '@components/Icon'
 import CustomText from '@components/Text'
 import { useAppDispatch } from '@root/store'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
@@ -5,9 +6,17 @@ import { countInstanceEmoji } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useContext, useEffect, useRef } from 'react'
+import { chunk } from 'lodash'
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { AccessibilityInfo, findNodeHandle, Pressable, SectionList, View } from 'react-native'
+import {
+  AccessibilityInfo,
+  findNodeHandle,
+  Pressable,
+  SectionList,
+  TextInput,
+  View
+} from 'react-native'
 import FastImage from 'react-native-fast-image'
 import validUrl from 'valid-url'
 import EmojisContext from './helpers/EmojisContext'
@@ -18,8 +27,8 @@ const EmojisList = React.memo(
     const { reduceMotionEnabled } = useAccessibility()
     const { t } = useTranslation()
 
-    const { emojisState, emojisDispatch } = useContext(EmojisContext)
-    const { colors } = useTheme()
+    const { emojisState } = useContext(EmojisContext)
+    const { colors, mode } = useTheme()
 
     const addEmoji = (shortcode: string) => {
       if (!emojisState.targetProps) {
@@ -70,6 +79,7 @@ const EmojisList = React.memo(
                       addEmoji(`:${emoji.shortcode}:`)
                       dispatch(countInstanceEmoji(emoji))
                     }}
+                    style={{ padding: StyleConstants.Spacing.S }}
                   >
                     <FastImage
                       accessibilityLabel={t('common:customEmoji.accessibilityLabel', {
@@ -79,12 +89,7 @@ const EmojisList = React.memo(
                         'screenCompose:content.root.footer.emojis.accessibilityHint'
                       )}
                       source={{ uri }}
-                      style={{
-                        width: 32,
-                        height: 32,
-                        padding: StyleConstants.Spacing.S,
-                        margin: StyleConstants.Spacing.S
-                      }}
+                      style={{ width: 32, height: 32 }}
                     />
                   </Pressable>
                 )
@@ -107,23 +112,97 @@ const EmojisList = React.memo(
       }
     }, [emojisState.targetProps])
 
+    const [search, setSearch] = useState('')
+    const searchLength = useRef(0)
+    useEffect(() => {
+      if (
+        (search.length === 0 && searchLength.current === 1) ||
+        (search.length === 1 && searchLength.current === 0)
+      ) {
+        layoutAnimation()
+      }
+      searchLength.current = search.length
+    }, [search.length, searchLength.current])
+
     return emojisState.targetProps ? (
-      <SectionList
-        accessible
-        ref={listRef}
-        horizontal
-        keyboardShouldPersistTaps='always'
-        sections={emojisState.emojis}
-        keyExtractor={item => item[0].shortcode}
-        renderSectionHeader={({ section: { title } }) => (
-          <CustomText fontStyle='S' style={{ position: 'absolute', color: colors.secondary }}>
-            {title}
-          </CustomText>
-        )}
-        renderItem={listItem}
-        windowSize={4}
-        contentContainerStyle={{ paddingHorizontal: StyleConstants.Spacing.Global.PagePadding }}
-      />
+      <View
+        style={{
+          paddingBottom: StyleConstants.Spacing.Global.PagePadding,
+          backgroundColor: colors.backgroundDefault
+        }}
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: StyleConstants.Spacing.Global.PagePadding,
+            paddingBottom: StyleConstants.Spacing.S
+          }}
+        >
+          <View
+            style={{
+              borderBottomWidth: 1,
+              borderBottomColor: colors.border,
+              alignSelf: 'stretch',
+              justifyContent: 'center',
+              paddingRight: StyleConstants.Spacing.S
+            }}
+          >
+            <Icon name='Search' size={StyleConstants.Font.Size.L} color={colors.secondary} />
+          </View>
+          <TextInput
+            style={{
+              flex: 1,
+              borderBottomWidth: 1,
+              borderBottomColor: colors.border,
+              ...StyleConstants.FontStyle.M,
+              color: colors.primaryDefault,
+              paddingVertical: StyleConstants.Spacing.S
+            }}
+            onChangeText={setSearch}
+            autoCapitalize='none'
+            clearButtonMode='always'
+            keyboardAppearance={mode}
+            autoCorrect={false}
+            spellCheck={false}
+          />
+        </View>
+        <SectionList
+          accessible
+          ref={listRef}
+          horizontal
+          keyboardShouldPersistTaps='always'
+          sections={
+            search.length
+              ? [
+                  {
+                    title: 'Search result',
+                    data: chunk(
+                      emojisState.emojis
+                        .filter(e => e.type !== 'frequent')
+                        .flatMap(e =>
+                          e.data.flatMap(e => e).filter(emoji => emoji.shortcode.includes(search))
+                        ),
+                      2
+                    )
+                  }
+                ]
+              : emojisState.emojis
+          }
+          keyExtractor={item => item[0]?.shortcode}
+          renderSectionHeader={({ section: { title } }) => (
+            <CustomText fontStyle='S' style={{ position: 'absolute', color: colors.secondary }}>
+              {title}
+            </CustomText>
+          )}
+          renderItem={listItem}
+          windowSize={4}
+          contentContainerStyle={{
+            paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
+            minHeight: 32 * 2 + StyleConstants.Spacing.M * 3
+          }}
+        />
+      </View>
     ) : null
   },
   () => true