chore: update props and add comments

example/src/App.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import AnimatedTabBar from '@gorhom/animated-tabbar';
+import AnimatedTabBar, { TabsConfigs } from '@gorhom/animated-tabbar';
 import DummyScreen from './screens/DummyScreen';
 import HomeSVG from './svg/HomeSVG';
 import LikeSVG from './svg/LikeSVG';
 import SearchSVG from './svg/SearchSVG';
 import ProfileSVG from './svg/ProfileSVG';
 
-const tabOptions = {
+const tabs: TabsConfigs = {
   Home: {
     labelStyle: {
       color: '#5B37B7',
@@ -73,33 +73,35 @@ export default function App() {
   return (
     <NavigationContainer>
       <Tab.Navigator
-        tabBar={props => <AnimatedTabBar configs={tabOptions} {...props} />}
+        tabBar={props => (
+          <AnimatedTabBar duration={250} tabs={tabs} {...props} />
+        )}
       >
         <Tab.Screen
           name="Home"
           initialParams={{
-            backgroundColor: tabOptions.Home.labelStyle.color,
+            backgroundColor: tabs.Home.labelStyle.color,
           }}
           component={DummyScreen}
         />
         <Tab.Screen
           name="Likes"
           initialParams={{
-            backgroundColor: tabOptions.Likes.labelStyle.color,
+            backgroundColor: tabs.Likes.labelStyle.color,
           }}
           component={DummyScreen}
         />
         <Tab.Screen
           name="Search"
           initialParams={{
-            backgroundColor: tabOptions.Search.labelStyle.color,
+            backgroundColor: tabs.Search.labelStyle.color,
           }}
           component={DummyScreen}
         />
         <Tab.Screen
           name="Profile"
           initialParams={{
-            backgroundColor: tabOptions.Profile.labelStyle.color,
+            backgroundColor: tabs.Profile.labelStyle.color,
           }}
           component={DummyScreen}
         />

src/AnimatedTabBar.tsx

@@ -6,6 +6,7 @@ import { useSafeArea } from 'react-native-safe-area-context';
 import { CommonActions } from '@react-navigation/native';
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { AnimatedTabBarItem } from './item';
+import { TabsConfigs, AnimationConfigProps } from './types';
 import { styles } from './styles';
 
 Animated.addWhitelistedNativeProps({
@@ -14,13 +15,16 @@ Animated.addWhitelistedNativeProps({
   backgroundColor: true,
 });
 
-interface AnimatedTabBarProps extends BottomTabBarProps {
-  configs: any;
+interface AnimatedTabBarProps extends BottomTabBarProps, AnimationConfigProps {
+  /**
+   * Tabs configurations.
+   */
+  tabs: TabsConfigs;
 }
 
 export const AnimatedTabBar = (props: AnimatedTabBarProps) => {
   // props
-  const { state, navigation, descriptors, configs } = props;
+  const { state, navigation, descriptors, tabs, duration, easing } = props;
   const { routes } = state;
 
   // variables
@@ -80,15 +84,17 @@ export const AnimatedTabBar = (props: AnimatedTabBarProps) => {
     <View style={containerStyle}>
       {routes.map((route, index) => {
         const { options } = descriptors[route.key];
-        const tabConfigs = configs[route.name];
+        const tabConfigs = tabs[route.name];
         const label = options.title !== undefined ? options.title : route.name;
         return (
           <AnimatedTabBarItem
             key={route.key}
             index={index}
             selectedIndex={selectedIndex}
-            configs={tabConfigs}
             label={label}
+            duration={duration}
+            easing={easing}
+            {...tabConfigs}
           />
         );
       })}

src/index.ts

@@ -1,4 +1,2 @@
-import { AnimatedTabBar } from './AnimatedTabBar';
-export { TabConfig } from './types';
-
-export default AnimatedTabBar;
+export { AnimatedTabBar as default } from './AnimatedTabBar';
+export { TabsConfigs } from './types';

src/item/AnimatedTabBarItem.tsx

@@ -2,7 +2,6 @@ import React, { useMemo, memo } from 'react';
 import { View } from 'react-native';
 import Animated, { Easing } from 'react-native-reanimated';
 import {
-  // @ts-ignore
   TouchableWithoutFeedback,
   State,
   createNativeWrapper,
@@ -13,7 +12,7 @@ import {
   withTransition,
   panGestureHandler,
 } from 'react-native-redash';
-import { TabConfig } from '../types';
+import { TabConfig, AnimationConfigProps } from '../types';
 import { styles } from './styles';
 
 const AnimatedRawButton = createNativeWrapper(
@@ -26,27 +25,26 @@ const AnimatedRawButton = createNativeWrapper(
 
 const { add, interpolate, useCode, set, cond, eq } = Animated;
 
-interface AnimatedTabBarItemProps {
+interface AnimatedTabBarItemProps extends AnimationConfigProps, TabConfig {
   index: number;
-
   selectedIndex: Animated.Value<number>;
-  /**
-   * The animated tab configuration.
-   */
-  configs: TabConfig;
-  /**
-   * The label text of the tab.
-   */
   label: string;
-  /**
-   * Whether to allow scaling the font for the label for accessibility purposes.
-   */
   allowFontScaling?: boolean;
 }
 
 const AnimatedTabBarItemComponent = (props: AnimatedTabBarItemProps) => {
   // props
-  const { index, selectedIndex, configs, label, allowFontScaling } = props;
+  const {
+    index,
+    selectedIndex,
+    allowFontScaling,
+    label,
+    icon,
+    background,
+    labelStyle: labelStyleOverride,
+    duration = 500,
+    easing = Easing.out(Easing.exp),
+  } = props;
 
   // variables
   const [labelWidth] = useValues([0], []);
@@ -55,8 +53,8 @@ const AnimatedTabBarItemComponent = (props: AnimatedTabBarItemProps) => {
 
   // animations
   const animatedFocus = withTransition(cond(eq(selectedIndex, index), 1, 0), {
-    duration: 500,
-    easing: Easing.out(Easing.exp),
+    duration,
+    easing,
   });
   const { state, gestureHandler } = panGestureHandler();
 
@@ -71,7 +69,7 @@ const AnimatedTabBarItemComponent = (props: AnimatedTabBarItemProps) => {
 
   const animatedIconColor = interpolateColor(animatedFocus, {
     inputRange: [0, 1],
-    outputRange: [configs.icon.inactiveColor, configs.icon.activeColor],
+    outputRange: [icon.inactiveColor, icon.activeColor],
   });
 
   //#region styles
@@ -89,10 +87,7 @@ const AnimatedTabBarItemComponent = (props: AnimatedTabBarItemProps) => {
     {
       backgroundColor: interpolateColor(animatedFocus, {
         inputRange: [0, 1],
-        outputRange: [
-          configs.background.inactiveColor,
-          configs.background.activeColor,
-        ],
+        outputRange: [background.inactiveColor, background.activeColor],
       }),
     },
   ];
@@ -109,7 +104,7 @@ const AnimatedTabBarItemComponent = (props: AnimatedTabBarItemProps) => {
       }),
     },
   ];
-  const labelStyle = [styles.label, configs.labelStyle];
+  const labelStyle = [styles.label, labelStyleOverride];
   //#endregion
 
   // callbacks
@@ -122,9 +117,9 @@ const AnimatedTabBarItemComponent = (props: AnimatedTabBarItemProps) => {
 
   // render
   const renderIcon = () => {
-    return typeof configs.icon.component === 'function'
-      ? configs.icon.component({ color: animatedIconColor })
-      : configs.icon.component;
+    return typeof icon.component === 'function'
+      ? icon.component({ color: animatedIconColor })
+      : icon.component;
   };
   return (
     <AnimatedRawButton {...gestureHandler}>

src/types.ts

@@ -15,3 +15,20 @@ export interface TabConfig {
     inactiveColor: string;
   };
 }
+
+export interface TabsConfigs {
+  [key: string]: TabConfig;
+}
+
+export interface AnimationConfigProps {
+  /**
+   * Animation duration.
+   * @default 500
+   */
+  duration?: number;
+  /**
+   * Animation easing function.
+   * @default Easing.out(Easing.exp)
+   */
+  easing?: Animated.EasingFunction;
+}