chore: add category customization props

README.md

@@ -61,6 +61,9 @@ TODO
 | defaultHeight | number | 0.4 | no | Specify collapsed container height (1 is full screen height) |
 | expandedHeight | number | 0.8 | no | Specify expanded container height (1 is full screen height) *only if expandable is true* |
 | backdropColor | string | "#00000055" | no | Change backdrop color and alpha |
+| categoryColor | string | "#000000" | no | Change category item color |
+| activeCategoryColor | string | "#005b96" | no | Change active category item color |
+| categoryContainerColor | string | "#e3dbcd" | no | Change category container color |
 ## License
  **MIT**
 
@@ -68,4 +71,6 @@ TODO
 ## TODO
 categories => Specify displayed categories 
 
-language => Use translation
+language => Use translation
+
+pixele albo procenty w wysokości 

src/KeyboardContext.tsx

@@ -19,6 +19,9 @@ export type KeyboardProps = {
   defaultHeight?: number;
   expandedHeight?: number;
   backdropColor?: string;
+  categoryColor?: string;
+  activeCategoryColor?: string;
+  categoryContainerColor?: string;
 };
 export type ContextValues = {
   activeCategoryIndex: number;

src/KeyboardProvider.tsx

@@ -24,6 +24,9 @@ export const defaultKeyboardContext: Required<KeyboardProps> = {
   defaultHeight: 0.4,
   expandedHeight: 0.8,
   backdropColor: '#00000055',
+  categoryColor: '#000000',
+  activeCategoryColor: '#005b96',
+  categoryContainerColor: '#e3dbcd',
 };
 
 export const defaultKeyboardValues: ContextValues = {

src/components/Categories.tsx

@@ -47,7 +47,12 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
 
   return (
     <View style={styles.bottomBar}>
-      <View style={styles.navigation}>
+      <View
+        style={[
+          styles.navigation,
+          { backgroundColor: ctx.categoryContainerColor },
+        ]}
+      >
         <FlatList
           data={CATEGORIES_NAVIGATION}
           keyExtractor={(item) => item.category}
@@ -74,7 +79,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   navigation: {
-    backgroundColor: '#e3dbcd',
     padding: 3,
     borderRadius: 8,
   },

src/components/CategoryItem.tsx

@@ -28,6 +28,8 @@ export const CategoryItem = ({
         <Icon
           iconName={item.icon}
           isActive={ctx?.activeCategoryIndex === index}
+          normalColor={ctx.categoryColor}
+          activeColor={ctx.activeCategoryColor}
         />
       </View>
     </TouchableOpacity>

src/components/EmojiCategory.tsx

@@ -61,7 +61,7 @@ export const EmojiCategory = ({ item }: { item: EmojisByCategory }) => {
         removeClippedSubviews={true}
         getItemLayout={getItemLayout}
         ListFooterComponent={() => <View style={styles.footer} />}
-        windowSize={1}
+        windowSize={10}
       />
     </View>
   );

src/components/Icon.tsx

@@ -9,34 +9,37 @@ import Trees from '../assets/Trees';
 import Ban from '../assets/Ban';
 import Users from '../assets/Users';
 
-const color = (isActive: boolean) => (isActive ? '#005b96' : '#000');
-
 export const Icon = ({
   iconName,
   isActive,
+  normalColor,
+  activeColor,
 }: {
   iconName: string;
   isActive: boolean;
+  normalColor: string;
+  activeColor: string;
 }) => {
+  const color = () => (isActive ? activeColor : normalColor);
   switch (iconName) {
     case 'Smile':
-      return <Smile fill={color(isActive)} />;
+      return <Smile fill={color()} />;
     case 'Trees':
-      return <Trees fill={color(isActive)} />;
+      return <Trees fill={color()} />;
     case 'Pizza':
-      return <Pizza fill={color(isActive)} />;
+      return <Pizza fill={color()} />;
     case 'Plane':
-      return <Plane fill={color(isActive)} />;
+      return <Plane fill={color()} />;
     case 'Football':
-      return <Football fill={color(isActive)} />;
+      return <Football fill={color()} />;
     case 'Lightbulb':
-      return <Lightbulb fill={color(isActive)} />;
+      return <Lightbulb fill={color()} />;
     case 'Flag':
-      return <Flag fill={color(isActive)} />;
+      return <Flag fill={color()} />;
     case 'Ban':
-      return <Ban fill={color(isActive)} />;
+      return <Ban fill={color()} />;
     case 'Users':
-      return <Users fill={color(isActive)} />;
+      return <Users fill={color()} />;
     default:
       return null;
   }