chore: add category disable props

README.md

@@ -63,6 +63,7 @@ TODO
 | categoryContainerColor | string | "#e3dbcd" | no | Change category container color |
 | onCategoryChangeFailed | function | warn(info) | no | Callback on category change failed (info: {index, highestMeasuredFrameIndex, averageItemLength}) |
 | translation | CategoryTranslation | en | no | Translation object *see translation section* |
+| disabledCategory | CategoryTypes[] | [] | no | Hide categories by passing their slugs |
 ## Internationalization
 ### Pre-defined
 Due to the limited translation possibilities, we only provide a few pre-defined translations into the following languages:
@@ -94,9 +95,4 @@ translation={{
 ```
 *If you have written a translation into your language, we strongly encourage you to create a Pull Request and add your language to the package, following the example of other langs.*
 ## License
- **MIT**
-
-<br /><br /><br />
-## TODO
-categories => Specify displayed categories 
-
+ **[MIT](/LICENSE)**

example/src/App.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { StyleSheet, Text, SafeAreaView, TouchableOpacity } from 'react-native';
-import EmojiPicker, { pl } from 'react-native-emoji-keyboard';
+import EmojiPicker from 'react-native-emoji-keyboard';
 
 export default function App() {
   const [result, setResult] = React.useState<string>();
@@ -26,7 +26,6 @@ export default function App() {
         onEmojiSelected={handlePick}
         open={isModalOpen}
         onClose={() => setIsModalOpen(false)}
-        translation={pl}
       />
 
       {/* //////////////////////////////////////////// */}

src/EmojiKeyboard.tsx

@@ -15,8 +15,12 @@ import emojisByGroup from './assets/emojis.json';
 
 export const EmojiKeyboard = () => {
   const { width } = useWindowDimensions();
-  const { activeCategoryIndex, containerStyles, onCategoryChangeFailed } =
-    React.useContext(KeyboardContext);
+  const {
+    activeCategoryIndex,
+    containerStyles,
+    onCategoryChangeFailed,
+    disabledCategory,
+  } = React.useContext(KeyboardContext);
 
   const flatListRef = React.useRef<FlatList>(null);
 
@@ -45,7 +49,10 @@ export const EmojiKeyboard = () => {
   return (
     <View style={[styles.container, styles.containerShadow, containerStyles]}>
       <Animated.FlatList
-        data={emojisByGroup}
+        data={emojisByGroup.filter((category) => {
+          const title = category.title as CategoryTypes;
+          return !disabledCategory.includes(title);
+        })}
         keyExtractor={(item: EmojisByCategory) => item.title}
         renderItem={renderItem}
         removeClippedSubviews={true}

src/KeyboardContext.tsx

@@ -4,7 +4,7 @@ import {
   defaultKeyboardContext,
   defaultKeyboardValues,
 } from './KeyboardProvider';
-import type { CategoryTranslation, EmojiType } from './types';
+import type { CategoryTranslation, EmojiType, CategoryTypes } from './types';
 
 export type KeyboardProps = {
   open: boolean;
@@ -28,6 +28,7 @@ export type KeyboardProps = {
     averageItemLength: number;
   }) => void;
   translation?: CategoryTranslation;
+  disabledCategory?: CategoryTypes[];
 };
 export type ContextValues = {
   activeCategoryIndex: number;

src/KeyboardProvider.tsx

@@ -32,6 +32,7 @@ export const defaultKeyboardContext: Required<KeyboardProps> = {
     console.warn(info);
   },
   translation: en,
+  disabledCategory: [],
 };
 
 export const defaultKeyboardValues: ContextValues = {

src/components/Categories.tsx

@@ -19,15 +19,18 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
     activeCategoryIndex,
     categoryContainerColor,
     onCategoryChangeFailed,
+    disabledCategory,
   } = React.useContext(KeyboardContext);
 
   const handleScrollToCategory = React.useCallback(
     (category: CategoryTypes) => {
       flatListRef?.current?.scrollToIndex({
-        index: CATEGORIES.indexOf(category),
+        index: CATEGORIES.filter(
+          (name) => !disabledCategory.includes(name)
+        ).indexOf(category),
       });
     },
-    [flatListRef]
+    [disabledCategory, flatListRef]
   );
 
   const rendarItem = React.useCallback(
@@ -60,8 +63,15 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
       <View
         style={[styles.navigation, { backgroundColor: categoryContainerColor }]}
       >
+        {console.log(
+          CATEGORIES_NAVIGATION.filter(
+            ({ category }) => !disabledCategory.includes(category)
+          )
+        )}
         <FlatList
-          data={CATEGORIES_NAVIGATION}
+          data={CATEGORIES_NAVIGATION.filter(
+            ({ category }) => !disabledCategory.includes(category)
+          )}
           keyExtractor={(item) => item.category}
           renderItem={rendarItem}
           ItemSeparatorComponent={() => <View style={styles.separator} />}

src/components/Knob.tsx

@@ -62,10 +62,10 @@ export const Knob = ({ offsetY, height, onClose }: KnobProps) => {
 
 const styles = StyleSheet.create({
   knob: {
-    height: 8,
+    height: 6,
     width: 50,
     backgroundColor: '#fff',
-    marginBottom: 10,
+    marginBottom: 6,
     alignSelf: 'center',
     borderRadius: 4,
     shadowColor: 'black',