refactor: use better context

src/EmojiKeyboard.tsx

@@ -4,36 +4,37 @@ import {
   StyleSheet,
   View,
   FlatList,
-  ViewStyle,
   useWindowDimensions,
   Animated,
   NativeSyntheticEvent,
   NativeScrollEvent,
+  ViewToken,
 } from 'react-native';
-import { CATEGORIES, CategoryTypes, EmojiType } from './types';
+import { CATEGORIES, CategoryTypes } from './types';
 import { EmojiCategory } from './components/EmojiCategory';
 import { KeyboardContext } from './KeyboardContext';
 import { Categories } from './components/Categories';
 
-type EmojiKeyboardProps = {
+export const EmojiKeyboard = () => {
-  onEmojiSelected: (emoji: EmojiType) => void;
-  containerStyles?: ViewStyle;
-  numberOfColumns?: number;
-  emojiSize?: number;
-};
-
-export const EmojiKeyboard = ({
-  onEmojiSelected,
-  containerStyles,
-  numberOfColumns = 7,
-  emojiSize = 28,
-}: EmojiKeyboardProps) => {
   const { width } = useWindowDimensions();
+  const ctx = React.useContext(KeyboardContext);
+
   const flatListRef = React.useRef<FlatList>(null);
 
   const scrollX = React.useRef(new Animated.Value(0)).current;
   const scrollNav = React.useRef(new Animated.Value(0)).current;
 
+  const onViewableItemsChanged = React.useRef(
+    ({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
+      if (viewableItems.length > 0 && viewableItems[0].index !== null) {
+        ctx?.setActiveCategoryIndex(viewableItems[0].index);
+      }
+    }
+  );
+  const viewabilityConfig = React.useRef({
+    viewAreaCoveragePercentThreshold: 60,
+  });
+
   const getItemLayout = (
     _: CategoryTypes[] | null | undefined,
     index: number
@@ -63,15 +64,9 @@ export const EmojiKeyboard = ({
       useNativeDriver: false,
     }
   );
+
   return (
-    <KeyboardContext.Provider
+    <View style={[styles.container, ctx?.containerStyles]}>
-      value={{
-        onEmojiSelected,
-        numberOfColumns,
-        emojiSize,
-      }}
-    >
-      <View style={[styles.container, containerStyles]}>
       <FlatList
         data={CATEGORIES}
         keyExtractor={(item) => item}
@@ -86,10 +81,11 @@ export const EmojiKeyboard = ({
         decelerationRate="fast"
         getItemLayout={getItemLayout}
         onScroll={onScroll}
+        onViewableItemsChanged={onViewableItemsChanged.current}
+        viewabilityConfig={viewabilityConfig.current}
       />
       <Categories flatListRef={flatListRef} scrollNav={scrollNav} />
     </View>
-    </KeyboardContext.Provider>
   );
 };
 

src/EmojiPicker.tsx

@@ -8,9 +8,11 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import type { EmojiKeyboardProps } from './types';
 import { EmojiKeyboard } from './EmojiKeyboard';
 import { Knob } from './components/Knob';
+import { KeyboardProvider } from './KeyboardProvider';
+import type { KeyboardProps } from './KeyboardContext';
+import type { EmojiType } from './types';
 
 type EmojiPickerProps = {
   isOpen: boolean;
@@ -21,12 +23,22 @@ export const EmojiPicker = ({
   onEmojiSelected,
   isOpen,
   onClose,
-}: EmojiPickerProps & EmojiKeyboardProps) => {
+  ...props
+}: EmojiPickerProps & KeyboardProps) => {
   const { height: screenHeight } = useWindowDimensions();
   const offsetY = React.useRef(new Animated.Value(0)).current;
   const height = React.useRef(new Animated.Value(screenHeight * 0.4)).current;
 
   return (
+    <KeyboardProvider
+      onEmojiSelected={(emoji: EmojiType) => {
+        height.setValue(screenHeight * 0.4);
+        offsetY.setValue(0);
+        onEmojiSelected(emoji);
+        onClose();
+      }}
+      {...props}
+    >
       <Modal visible={isOpen} animationType="slide" transparent={true}>
         <TouchableOpacity
           style={styles.modalContainer}
@@ -39,17 +51,12 @@ export const EmojiPicker = ({
                 <>
                   <Knob height={height} offsetY={offsetY} onClose={onClose} />
                   <Animated.View
-                  style={{ height: Animated.subtract(height, offsetY) }}
+                    style={[
+                      { height: Animated.subtract(height, offsetY) },
+                      styles.container,
+                    ]}
                   >
-                  <EmojiKeyboard
+                    <EmojiKeyboard />
-                    onEmojiSelected={(emoji) => {
-                      height.setValue(screenHeight * 0.4);
-                      offsetY.setValue(0);
-                      onEmojiSelected(emoji);
-                      onClose();
-                    }}
-                    containerStyles={styles.container}
-                  />
                   </Animated.View>
                 </>
               </TouchableOpacity>
@@ -57,6 +64,7 @@ export const EmojiPicker = ({
           </View>
         </TouchableOpacity>
       </Modal>
+    </KeyboardProvider>
   );
 };
 

src/KeyboardContext.tsx

@@ -1,10 +1,18 @@
 import * as React from 'react';
+import type { ViewStyle } from 'react-native';
 import type { EmojiType } from './types';
 
-export const defaultKeyboardContext = {
+export type KeyboardProps = {
-  onEmojiSelected: (_emoji: EmojiType) => {},
+  onEmojiSelected: (emoji: EmojiType) => void;
-  numberOfColumns: 7,
+  numberOfColumns?: number;
-  emojiSize: 24,
+  emojiSize?: number;
+  containerStyles?: ViewStyle;
+};
+export type ContextValues = {
+  activeCategoryIndex: number;
+  setActiveCategoryIndex: (index: number) => void;
 };
 
-export const KeyboardContext = React.createContext(defaultKeyboardContext);
+export const KeyboardContext = React.createContext<
+  (KeyboardProps & ContextValues) | null
+>(null);

src/KeyboardProvider.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {
+  KeyboardProps,
+  ContextValues,
+  KeyboardContext,
+} from './KeyboardContext';
+import type { EmojiType } from './types';
+
+type ProviderProps = KeyboardProps & {
+  children: React.ReactNode;
+};
+
+export const defaultKeyboardContext: KeyboardProps = {
+  onEmojiSelected: (_emoji: EmojiType) => {},
+  numberOfColumns: 7,
+  emojiSize: 24,
+};
+
+export const defaultKeyboardValues: Partial<ContextValues> = {
+  //   activeCategoryIndex: 0,
+};
+
+export const KeyboardProvider: React.FC<ProviderProps> = React.memo((props) => {
+  const [activeCategoryIndex, setActiveCategoryIndex] = React.useState(0);
+
+  const value: KeyboardProps & ContextValues = {
+    ...defaultKeyboardContext,
+    ...defaultKeyboardValues,
+    ...props,
+    activeCategoryIndex,
+    setActiveCategoryIndex,
+  };
+  return (
+    <KeyboardContext.Provider value={value}>
+      {props.children}
+    </KeyboardContext.Provider>
+  );
+});
+
+KeyboardProvider.displayName = 'KeyboardProvider';

src/components/Categories.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { View, Animated, StyleSheet, FlatList } from 'react-native';
+import { KeyboardContext } from '../KeyboardContext';
 import { CATEGORIES, CATEGORIES_NAVIGATION, CategoryTypes } from '../types';
 import { CategoryItem } from './CategoryItem';
 
@@ -9,6 +10,7 @@ type CategoriesProps = {
 };
 
 export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
+  const ctx = React.useContext(KeyboardContext);
   const handleScrollToCategory = (category: CategoryTypes) => {
     flatListRef?.current?.scrollToIndex({
       index: CATEGORIES.indexOf(category),
@@ -20,9 +22,10 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
         <FlatList
           data={CATEGORIES_NAVIGATION}
           keyExtractor={(item) => item.category}
-          renderItem={({ item }) => (
+          renderItem={({ item, index }) => (
             <CategoryItem
               item={item}
+              index={index}
               handleScrollToCategory={handleScrollToCategory}
             />
           )}
@@ -37,6 +40,7 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
               />
             );
           }}
+          extraData={ctx?.activeCategoryIndex}
         />
       </View>
     </View>

src/components/CategoryItem.tsx

@@ -1,22 +1,38 @@
 import * as React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { KeyboardContext } from '../KeyboardContext';
 import type { CategoryTypes } from '../types';
+import { Icon } from './Icon';
 
 type CategoryItemProps = {
   item: any;
+  index: number;
   handleScrollToCategory: (category: CategoryTypes) => void;
 };
 
 export const CategoryItem = ({
   item,
+  index,
   handleScrollToCategory,
-}: CategoryItemProps) => (
+}: CategoryItemProps) => {
-  <TouchableOpacity onPress={() => handleScrollToCategory(item.category)}>
+  const ctx = React.useContext(KeyboardContext);
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        handleScrollToCategory(item.category);
+        ctx?.setActiveCategoryIndex(index);
+      }}
+    >
       <View style={styles.container}>
-      <Text style={styles.icon}>{item.icon}</Text>
+        <Icon
+          iconName={item.icon}
+          isActive={ctx?.activeCategoryIndex === index}
+        />
       </View>
     </TouchableOpacity>
-);
+  );
+};
 
 const styles = StyleSheet.create({
   container: {

src/components/EmojiCategory.tsx

@@ -16,7 +16,7 @@ export const EmojiCategory = ({ item }: { item: CategoryTypes }) => {
   const { width } = useWindowDimensions();
   const ctx = React.useContext(KeyboardContext);
   const numberOfColumns = React.useRef<number>(
-    Math.floor(width / (ctx.emojiSize + 16))
+    Math.floor(width / (ctx?.emojiSize ? ctx?.emojiSize : 0 + 16))
   );
   const [data, setData] = React.useState<EmojiType[]>([]);
   // console.log(width);
@@ -31,8 +31,10 @@ export const EmojiCategory = ({ item }: { item: CategoryTypes }) => {
   }, [item]);
 
   const getItemLayout = (_: EmojiType[] | null | undefined, index: number) => ({
-    length: ctx.emojiSize,
+    length: ctx?.emojiSize ? ctx?.emojiSize : 0,
-    offset: ctx.emojiSize * Math.ceil(index / ctx.numberOfColumns),
+    offset:
+      (ctx?.emojiSize ? ctx?.emojiSize : 0) *
+      Math.ceil(index / (ctx?.numberOfColumns ? ctx?.numberOfColumns : 1)),
     index,
   });
 

src/components/SingleEmoji.tsx

@@ -7,11 +7,11 @@ export const SingleEmoji = ({ item }: { item: EmojiType }) => {
   const ctx = React.useContext(KeyboardContext);
   return (
     <TouchableOpacity
-      onPress={() => ctx.onEmojiSelected(item)}
+      onPress={() => ctx?.onEmojiSelected(item)}
       style={styles.container}
     >
       <View>
-        <Text style={{ fontSize: ctx.emojiSize }}>{item.emoji}</Text>
+        <Text style={{ fontSize: ctx?.emojiSize }}>{item.emoji}</Text>
       </View>
     </TouchableOpacity>
   );

src/index.tsx

@@ -1,6 +1,7 @@
 import { EmojiKeyboard } from './EmojiKeyboard';
 import { EmojiPicker } from './EmojiPicker';
+import { KeyboardProvider } from './KeyboardProvider';
 
-export { EmojiKeyboard };
+export { EmojiKeyboard, KeyboardProvider };
 
 export default EmojiPicker;

src/types.ts

@@ -1,5 +1,3 @@
-import type { ViewStyle } from 'react-native';
-
 export type EmojiType = {
   emoji: string;
   emoji_version: string;
@@ -38,20 +36,25 @@ type CategoryNavigationItem = {
 };
 
 export const CATEGORIES_NAVIGATION: CategoryNavigationItem[] = [
-  { icon: '😀', category: 'Smileys & Emotion' },
+  { icon: 'Smile', category: 'Smileys & Emotion' },
-  { icon: '👋', category: 'People & Body' },
+  { icon: 'Users', category: 'People & Body' },
-  { icon: '🐵', category: 'Animals & Nature' },
+  { icon: 'Trees', category: 'Animals & Nature' },
-  { icon: '🍇', category: 'Food & Drink' },
+  { icon: 'Pizza', category: 'Food & Drink' },
-  { icon: '🌍', category: 'Travel & Places' },
+  { icon: 'Plane', category: 'Travel & Places' },
-  { icon: '🎃', category: 'Activities' },
+  { icon: 'Football', category: 'Activities' },
-  { icon: '👓', category: 'Objects' },
+  { icon: 'Lightbulb', category: 'Objects' },
-  { icon: '🏧', category: 'Symbols' },
+  { icon: 'Ban', category: 'Symbols' },
-  { icon: '🏁', category: 'Flags' },
+  { icon: 'Flag', category: 'Flags' },
 ];
 
-export type EmojiKeyboardProps = {
+// export const CATEGORIES_NAVIGATION: CategoryNavigationItem[] = [
-  onEmojiSelected: (emoji: EmojiType) => void;
+//   { icon: '😀', category: 'Smileys & Emotion' },
-  containerStyles?: ViewStyle;
+//   { icon: '👋', category: 'People & Body' },
-  numberOfColumns?: number;
+//   { icon: '🐵', category: 'Animals & Nature' },
-  emojiSize?: number;
+//   { icon: '🍇', category: 'Food & Drink' },
-};
+//   { icon: '🌍', category: 'Travel & Places' },
+//   { icon: '🎃', category: 'Activities' },
+//   { icon: '👓', category: 'Objects' },
+//   { icon: '🏧', category: 'Symbols' },
+//   { icon: '🏁', category: 'Flags' },
+// ];