diff --git a/README.md b/README.md
index bd45bd9..601fffb 100644
--- a/README.md
+++ b/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**
-
-
-## TODO
-categories => Specify displayed categories
-
+ **[MIT](/LICENSE)**
diff --git a/example/src/App.tsx b/example/src/App.tsx
index f3b14b0..49a759c 100644
--- a/example/src/App.tsx
+++ b/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();
@@ -26,7 +26,6 @@ export default function App() {
onEmojiSelected={handlePick}
open={isModalOpen}
onClose={() => setIsModalOpen(false)}
- translation={pl}
/>
{/* //////////////////////////////////////////// */}
diff --git a/src/EmojiKeyboard.tsx b/src/EmojiKeyboard.tsx
index 38bc13b..f287928 100644
--- a/src/EmojiKeyboard.tsx
+++ b/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(null);
@@ -45,7 +49,10 @@ export const EmojiKeyboard = () => {
return (
{
+ const title = category.title as CategoryTypes;
+ return !disabledCategory.includes(title);
+ })}
keyExtractor={(item: EmojisByCategory) => item.title}
renderItem={renderItem}
removeClippedSubviews={true}
diff --git a/src/KeyboardContext.tsx b/src/KeyboardContext.tsx
index 74ff48b..5177200 100644
--- a/src/KeyboardContext.tsx
+++ b/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;
diff --git a/src/KeyboardProvider.tsx b/src/KeyboardProvider.tsx
index e1e0d28..7464049 100644
--- a/src/KeyboardProvider.tsx
+++ b/src/KeyboardProvider.tsx
@@ -32,6 +32,7 @@ export const defaultKeyboardContext: Required = {
console.warn(info);
},
translation: en,
+ disabledCategory: [],
};
export const defaultKeyboardValues: ContextValues = {
diff --git a/src/components/Categories.tsx b/src/components/Categories.tsx
index e6b2ec3..a7f8ed9 100644
--- a/src/components/Categories.tsx
+++ b/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) => {
+ {console.log(
+ CATEGORIES_NAVIGATION.filter(
+ ({ category }) => !disabledCategory.includes(category)
+ )
+ )}
!disabledCategory.includes(category)
+ )}
keyExtractor={(item) => item.category}
renderItem={rendarItem}
ItemSeparatorComponent={() => }
diff --git a/src/components/Knob.tsx b/src/components/Knob.tsx
index 236b15c..3e7ceaf 100644
--- a/src/components/Knob.tsx
+++ b/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',