refactor: clean up presets

example/src/screens/BubbleStyled.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 import { useSafeArea } from 'react-native-safe-area-context';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import AnimatedTabBar, {
@@ -83,33 +84,38 @@ const BubbleStyledScreen = () => {
     return 20 + bottom + 12 * 2 + 12 * 2 + 12;
   }, [bottom]);
 
+  const tabBarStyle = useMemo<StyleProp<ViewStyle>>(
+    () => ({
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: 16,
+      marginLeft: 32,
+      marginRight: 32,
+      marginBottom: bottom,
+      backgroundColor: '#000',
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 12,
+      },
+      shadowOpacity: 0.58,
+      shadowRadius: 16.0,
+
+      elevation: 24,
+    }),
+    [bottom]
+  );
+
   const tabBarOptions = useMemo(
     () => ({
       safeAreaInsets: {
         bottom: 0,
       },
-      style: {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        bottom: 0,
-        borderRadius: 16,
-        marginLeft: 32,
-        marginRight: 32,
-        marginBottom: bottom,
-        backgroundColor: '#000',
-        shadowColor: '#000',
-        shadowOffset: {
-          width: 0,
-          height: 12,
-        },
-        shadowOpacity: 0.58,
-        shadowRadius: 16.0,
-
-        elevation: 24,
-      },
+      style: tabBarStyle,
     }),
-    [bottom]
+    [tabBarStyle]
   );
 
   // render

example/src/screens/FlashyStyled.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 import { useSafeArea } from 'react-native-safe-area-context';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import AnimatedTabBar, {
@@ -79,34 +80,41 @@ const FlashyStyledScreen = () => {
     return 20 + bottom + 12 * 2 + 12 * 2 + 12;
   }, [bottom]);
 
+  const tabBarStyle = useMemo<StyleProp<ViewStyle>>(
+    () => ({
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: 16,
+      marginLeft: 32,
+      marginRight: 32,
+      marginBottom: bottom,
+      backgroundColor: '#000',
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 12,
+      },
+      shadowOpacity: 0.58,
+      shadowRadius: 16.0,
+
+      elevation: 24,
+    }),
+    [bottom]
+  );
+
   const tabBarOptions = useMemo(
     () => ({
       safeAreaInsets: {
         bottom: 0,
       },
-      style: {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        bottom: 0,
-        borderRadius: 16,
-        marginLeft: 32,
-        marginRight: 32,
-        marginBottom: bottom,
-        backgroundColor: '#000',
-        shadowColor: '#000',
-        shadowOffset: {
-          width: 0,
-          height: 12,
-        },
-        shadowOpacity: 0.58,
-        shadowRadius: 16.0,
-
-        elevation: 24,
-      },
+      style: tabBarStyle,
     }),
-    [bottom]
+    [tabBarStyle]
   );
+
+  // render
   return (
     <Tab.Navigator
       tabBarOptions={tabBarOptions}

src/presets/bubble/BubbleTabBar.tsx

@@ -13,6 +13,7 @@ import {
   DEFAULT_ITEM_LAYOUT_DIRECTION,
   DEFAULT_ITEM_CONTAINER_WIDTH,
 } from './constants';
+import { withTransition } from '../../withTransition';
 import { noop } from '../../utilities';
 import { TabBarViewProps } from '../../types';
 import { BubbleTabConfig } from './types';
@@ -32,7 +33,23 @@ const BubbleTabBarComponent = ({
   animatedOnChange,
   onLongPress = noop,
 }: TabBarViewProps<BubbleTabConfig>) => {
-  //#region Styles
+  //#region variables
+  const animatedFocusValues = useMemo(
+    () =>
+      tabs.map((_, index) =>
+        withTransition({
+          index,
+          selectedIndex,
+          duration,
+          easing,
+        })
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [tabs, duration, easing]
+  );
+  //#endregion
+
+  //#region styles
   const containerStyle = useMemo<StyleProp<ViewStyle>>(
     () => [
       styles.container,
@@ -44,6 +61,8 @@ const BubbleTabBarComponent = ({
     [containerStyleOverride, isRTL]
   );
   //#endregion
+
+  // render
   return (
     <View style={containerStyle}>
       {tabs.map(({ key, title, ...configs }, index) => {
@@ -58,10 +77,8 @@ const BubbleTabBarComponent = ({
           >
             <BubbleTabBarItem
               index={index}
-              selectedIndex={selectedIndex}
+              animatedFocus={animatedFocusValues[index]}
               label={title}
-              duration={duration}
-              easing={easing}
               itemInnerSpace={itemInnerSpace}
               itemOuterSpace={itemOuterSpace}
               itemContainerWidth={itemContainerWidth}

src/presets/bubble/item/BubbleTabBarItem.tsx

@@ -1,10 +1,9 @@
 import React, { useMemo, memo } from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, LayoutChangeEvent } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { interpolateColor, useValue } from 'react-native-redash';
 // @ts-ignore 😞
 import isEqual from 'lodash.isequal';
-import { withTransition } from '../../../withTransition';
 import {
   DEFAULT_ITEM_INNER_SPACE,
   DEFAULT_ITEM_OUTER_SPACE,
@@ -17,23 +16,17 @@ const { add, interpolate } = Animated;
 
 export type BubbleTabBarItemProps = TabBarItemProps & BubbleTabConfig;
 
-const BubbleTabBarItemComponent = (props: BubbleTabBarItemProps) => {
-  // props
-  const {
-    index,
-    selectedIndex,
-    label,
-    icon,
-    background,
-    labelStyle: labelStyleOverride,
-    duration,
-    easing,
-    itemInnerSpace,
-    itemOuterSpace,
-    iconSize,
-    isRTL,
-  } = props;
-
+const BubbleTabBarItemComponent = ({
+  animatedFocus,
+  label,
+  icon,
+  background,
+  labelStyle: labelStyleOverride,
+  itemInnerSpace,
+  itemOuterSpace,
+  iconSize,
+  isRTL,
+}: BubbleTabBarItemProps) => {
   //#region extract props
   const {
     itemInnerVerticalSpace,
@@ -73,16 +66,8 @@ const BubbleTabBarItemComponent = (props: BubbleTabBarItemProps) => {
   }, [itemInnerSpace, itemOuterSpace]);
   //#endregion
 
-  // animations
-  const animatedFocus = withTransition({
-    index,
-    selectedIndex,
-    duration,
-    easing,
-  });
-
-  //#region styles
-  const labelWidth = useValue(0);
+  //#region variables
+  const labelWidth = useValue<number>(0);
   /**
    * @DEV
    * min width is calculated by adding outer & inner spaces
@@ -98,7 +83,9 @@ const BubbleTabBarItemComponent = (props: BubbleTabBarItemProps) => {
    * max width is calculated by adding inner space with label width
    */
   const maxWidth = add(labelWidth, itemInnerHorizontalSpace, minWidth);
+  //#endregion
 
+  //#region styles
   const animatedIconColor = interpolateColor(animatedFocus, {
     inputRange: [0, 1],
     outputRange: [icon.inactiveColor, icon.activeColor],
@@ -153,10 +140,10 @@ const BubbleTabBarItemComponent = (props: BubbleTabBarItemProps) => {
   // callbacks
   const handleTextLayout = ({
     nativeEvent: {
-      // @ts-ignore
       layout: { width },
     },
-  }) => requestAnimationFrame(() => labelWidth.setValue(width));
+  }: LayoutChangeEvent) =>
+    requestAnimationFrame(() => labelWidth.setValue(width));
 
   // render
   const renderIcon = () => {
@@ -190,9 +177,6 @@ const BubbleTabBarItemComponent = (props: BubbleTabBarItemProps) => {
   );
 };
 
-const BubbleTabBarItem = memo(
-  BubbleTabBarItemComponent,
-  (prevProps, nextProps) => isEqual(prevProps, nextProps)
-);
+const BubbleTabBarItem = memo(BubbleTabBarItemComponent, isEqual);
 
 export default BubbleTabBarItem;

src/presets/flashy/FlashyTabBar.tsx

@@ -13,6 +13,7 @@ import {
   DEFAULT_ITEM_LAYOUT_DIRECTION,
   DEFAULT_ITEM_CONTAINER_WIDTH,
 } from './constants';
+import { withTransition } from '../../withTransition';
 import { noop } from '../../utilities';
 import { TabBarViewProps } from '../../types';
 import { FlashyTabConfig } from './types';
@@ -32,7 +33,23 @@ const FlashyTabBarComponent = ({
   onLongPress = noop,
   animatedOnChange,
 }: TabBarViewProps<FlashyTabConfig>) => {
-  //#region Styles
+  //#region variables
+  const animatedFocusValues = useMemo(
+    () =>
+      tabs.map((_, index) =>
+        withTransition({
+          index,
+          selectedIndex,
+          duration,
+          easing,
+        })
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [tabs, duration, easing]
+  );
+  //#endregion
+
+  //#region styles
   const containerStyle = useMemo<StyleProp<ViewStyle>>(
     () => [
       styles.container,
@@ -65,10 +82,8 @@ const FlashyTabBarComponent = ({
           >
             <FlashyTabBarItem
               index={index}
-              selectedIndex={selectedIndex}
+              animatedFocus={animatedFocusValues[index]}
               label={title}
-              duration={duration}
-              easing={easing}
               itemInnerSpace={itemInnerSpace}
               itemOuterSpace={itemOuterSpace}
               itemContainerWidth={itemContainerWidth}