diff --git a/src/AnimatedTabBar.tsx b/src/AnimatedTabBar.tsx index 27bc89e..3fced7b 100644 --- a/src/AnimatedTabBar.tsx +++ b/src/AnimatedTabBar.tsx @@ -87,6 +87,7 @@ export function AnimatedTabBar( } }, [props, isReactNavigation5]); const selectedIndex = useValue(0); + //#region callbacks const getRouteTitle = useCallback( (route: Route) => { diff --git a/src/flashy/constants.ts b/src/flashy/constants.ts index b83d7c1..4f6bb86 100644 --- a/src/flashy/constants.ts +++ b/src/flashy/constants.ts @@ -6,7 +6,7 @@ const DEFAULT_ITEM_ANIMATION_EASING: Animated.EasingFunction = Easing.out( const DEFAULT_ITEM_ANIMATION_DURATION = 750; const DEFAULT_ITEM_INNER_SPACE = 24; const DEFAULT_ITEM_ICON_SIZE = 20; -const DEFAULT_INDICATOR_VISIBLITY = true; +const DEFAULT_INDICATOR_VISIBILITY = true; const DEFAULT_INDICATOR_SIZE = 6; const DEFAULT_INDICATOR_COLOR = 'black'; const DEFAULT_ITEM_LAYOUT_DIRECTION = false; @@ -16,7 +16,7 @@ export { DEFAULT_ITEM_ANIMATION_DURATION, DEFAULT_ITEM_INNER_SPACE, DEFAULT_ITEM_ICON_SIZE, - DEFAULT_INDICATOR_VISIBLITY, + DEFAULT_INDICATOR_VISIBILITY, DEFAULT_INDICATOR_SIZE, DEFAULT_INDICATOR_COLOR, DEFAULT_ITEM_LAYOUT_DIRECTION, diff --git a/src/flashy/item/FlashyTabBarItem.tsx b/src/flashy/item/FlashyTabBarItem.tsx index bc319ab..ea94545 100644 --- a/src/flashy/item/FlashyTabBarItem.tsx +++ b/src/flashy/item/FlashyTabBarItem.tsx @@ -1,8 +1,9 @@ import React, { useMemo, memo } from 'react'; -import { View, Text } from 'react-native'; +import { View, Text, ViewStyle } from 'react-native'; import Animated from 'react-native-reanimated'; // @ts-ignore 😞 import MaskedView from '@react-native-community/masked-view'; +import { Svg, Circle, SvgProps, CircleProps } from 'react-native-svg'; import { State, TapGestureHandler } from 'react-native-gesture-handler'; import { useValues, @@ -16,7 +17,7 @@ import isEqual from 'lodash.isequal'; import { withTransition } from '../../withTransition'; import { DEFAULT_ITEM_INNER_SPACE, - DEFAULT_INDICATOR_VISIBLITY, + DEFAULT_INDICATOR_VISIBILITY, DEFAULT_INDICATOR_SIZE, DEFAULT_INDICATOR_COLOR, } from '../constants'; @@ -24,6 +25,16 @@ import { TabBarItemProps } from '../../types'; import { FlashyTabConfig } from '../types'; import { styles } from './styles'; +const AnimatedSvg = Animated.createAnimatedComponent( + Svg +) as React.ComponentClass, any>; +const AnimatedCircle = Animated.createAnimatedComponent( + Circle +) as React.ComponentClass< + Animated.AnimateProps, + any +>; + const { interpolate, useCode, @@ -90,7 +101,7 @@ const FlashyTabBarItemComponent = (props: FlashyTabBarItemProps) => { }; const { indicatorVisibility, indicatorColor, indicatorSize } = useMemo(() => { return { - indicatorVisibility: _indicatorVisible ?? DEFAULT_INDICATOR_VISIBLITY, + indicatorVisibility: _indicatorVisible ?? DEFAULT_INDICATOR_VISIBILITY, indicatorColor: _indicatorColor ?? labelStyleOverride.color ?? DEFAULT_INDICATOR_COLOR, indicatorSize: _indicatorSize ?? DEFAULT_INDICATOR_SIZE, @@ -206,32 +217,11 @@ const FlashyTabBarItemComponent = (props: FlashyTabBarItemProps) => { }, ]; // indicator - const indicatorStyle = [ - styles.indicator, - { - width: indicatorSize, - height: indicatorSize, - borderRadius: indicatorSize, - backgroundColor: indicatorColor, - left: divide(containerWidth, 2), - top: sub(containerHeight, itemInnerVerticalSpace / 2), - transform: transformOrigin( - { - x: 0, - y: 0, - }, - { - translateX: -(indicatorSize / 2), - translateY: -(indicatorSize / 2), - scale: interpolate(animatedFocus, { - inputRange: [0.5, 1], - outputRange: [0, 1], - extrapolate: Extrapolate.CLAMP, - }), - } - ) as Animated.AnimatedTransform, - }, - ]; + const animatedIndicatorSize = interpolate(animatedFocus, { + inputRange: [0.5, 1], + outputRange: [0, indicatorSize / 2], + extrapolate: Extrapolate.CLAMP, + }); //#endregion // effects @@ -300,8 +290,26 @@ const FlashyTabBarItemComponent = (props: FlashyTabBarItemProps) => { - - {indicatorVisibility && } + {indicatorVisibility && ( + + + + )} );