chore: add new prop activeCategoryContainerColor

README.md

@@ -56,6 +56,7 @@ export default function App() {
 | 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 |
+| activeCategoryContainerColor | string | "#ffffff" | no | Change selected 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 |

src/KeyboardContext.tsx

@@ -22,6 +22,7 @@ export type KeyboardProps = {
   categoryColor?: string;
   activeCategoryColor?: string;
   categoryContainerColor?: string;
+  activeCategoryContainerColor?: string;
   onCategoryChangeFailed?: (info: {
     index: number;
     highestMeasuredFrameIndex: number;

src/KeyboardProvider.tsx

@@ -28,6 +28,7 @@ export const defaultKeyboardContext: Required<KeyboardProps> = {
   categoryColor: '#000000',
   activeCategoryColor: '#005b96',
   categoryContainerColor: '#e3dbcd',
+  activeCategoryContainerColor: '#ffffff',
   onCategoryChangeFailed: (info) => {
     console.warn(info);
   },

src/components/Categories.tsx

@@ -20,6 +20,7 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
     categoryContainerColor,
     onCategoryChangeFailed,
     disabledCategory,
+    activeCategoryContainerColor,
   } = React.useContext(KeyboardContext);
 
   const handleScrollToCategory = React.useCallback(
@@ -49,13 +50,16 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
       <Animated.View
         style={[
           styles.activeIndicator,
+          {
+            backgroundColor: activeCategoryContainerColor,
+          },
           {
             transform: [{ translateX: scrollNav }],
           },
         ]}
       />
     ),
-    [scrollNav]
+    [activeCategoryContainerColor, scrollNav]
   );
 
   return (
@@ -104,7 +108,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: 28,
     height: 28,
-    backgroundColor: 'white',
     borderRadius: 6,
   },
   activeIndicatorContainer: {