Modified Emoji Keyboard as per Status Design Requirements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-emoji-keyboard",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "description": "Super performant, lightweight, fully customizable emoji picker. Designated to be user and developer friendly! 💖",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/components/Categories.tsx

@@ -122,12 +122,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   navigation: {
-    padding: 3,
     alignItems: 'center',
-    borderColor: '#00000011',
+    borderColor: '#EEF2F5',
   },
   navigationFloating: {
-    borderRadius: 8,
+    borderRadius: 20,
   },
   navigationBottom: {
     paddingVertical: 6,
@@ -145,18 +144,20 @@ const styles = StyleSheet.create({
   separator: {
     width: 1,
     height: 28,
-    backgroundColor: '#00000011',
+    backgroundColor: '#00000000',
     marginHorizontal: 4,
   },
   activeIndicator: {
     position: 'absolute',
-    width: 28,
+    width: 30,
-    height: 28,
+    height: 30,
-    borderRadius: 6,
+    borderRadius: 15,
   },
   activeIndicatorContainer: {
     position: 'absolute',
-    width: 28,
+    width: 30,
-    height: 28,
+    height: 30,
+    top: 5,
+    left: 12,
   },
 })

src/components/CategoryItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { View, StyleSheet, TouchableOpacity } from 'react-native'
+import { View, ViewStyle, StyleSheet, TouchableOpacity } from 'react-native'
 import { KeyboardContext } from '../contexts/KeyboardContext'
 import type { CategoryNavigationItem, CategoryTypes } from '../types'
 import { Icon } from './Icon'
@@ -11,17 +11,35 @@ type CategoryItemProps = {
 }
 
 export const CategoryItem = ({ item, index, handleScrollToCategory }: CategoryItemProps) => {
-  const { activeCategoryIndex, categoryColor, activeCategoryColor, setActiveCategoryIndex } =
+  const {
-    React.useContext(KeyboardContext)
+    activeCategoryIndex,
+    searchPhrase,
+    categoryColor,
+    activeCategoryColor,
+    setActiveCategoryIndex,
+  } = React.useContext(KeyboardContext)
 
   const handleSelect = () => {
     handleScrollToCategory(item.category)
     setActiveCategoryIndex(index)
   }
 
+  const getStylesBasedOnIndex = () => {
+    const style: ViewStyle[] = [styles.container]
+
+    if (index === 0) {
+      style.push({ marginLeft: 7 })
+    } else if (index === 7 && searchPhrase === '') {
+      style.push({ marginRight: 7 })
+    } else if (index === 8 && searchPhrase !== '') {
+      style.push({ marginRight: 7 })
+    }
+    return style
+  }
+
   return (
     <TouchableOpacity onPress={handleSelect}>
-      <View style={styles.container}>
+      <View style={getStylesBasedOnIndex()}>
         <Icon
           iconName={item.icon}
           isActive={activeCategoryIndex === index}
@@ -35,12 +53,13 @@ export const CategoryItem = ({ item, index, handleScrollToCategory }: CategoryIt
 
 const styles = StyleSheet.create({
   container: {
-    width: 28,
+    width: 40,
-    height: 28,
+    height: 40,
     justifyContent: 'center',
     alignItems: 'center',
-    padding: 3,
+    marginRight: -7,
-    borderRadius: 6,
+    marginLeft: -7,
+    borderRadius: 14,
   },
   icon: { textAlign: 'center' },
 })

src/components/EmojiCategory.tsx

@@ -66,6 +66,7 @@ export const EmojiCategory = ({ item: { title, data } }: { item: EmojisByCategor
     <View style={[styles.container, { width: width }]}>
       {!hideHeader && <Text style={[styles.sectionTitle, headerStyles]}>{translation[title]}</Text>}
       <FlatList
+        nestedScrollEnabled={true}
         data={[...data, ...empty]}
         keyExtractor={(emoji) => emoji.name}
         numColumns={numberOfColumns}

src/components/EmojiStaticKeyboard.tsx

@@ -9,7 +9,7 @@ import emojisByGroup from '../assets/emojis.json'
 import { SearchBar } from './SearchBar'
 import { useKeyboardStore } from '../store/useKeyboardStore'
 
-const CATEGORY_ELEMENT_WIDTH = 37
+const CATEGORY_ELEMENT_WIDTH = 34.9
 
 export const EmojiStaticKeyboard = () => {
   const { width } = useWindowDimensions()
@@ -77,12 +77,12 @@ export const EmojiStaticKeyboard = () => {
     <View
       style={[
         styles.container,
-        styles.containerShadow,
         categoryPosition === 'top' && styles.containerReverse,
         containerStyles,
       ]}>
       {enableSearchBar && <SearchBar flatListRef={flatListRef} />}
       <Animated.FlatList
+        nestedScrollEnabled={true}
         extraData={[keyboardState.recentlyUsed.length, searchPhrase]}
         data={renderList}
         keyExtractor={(item: EmojisByCategory) => item.title}