fix: fixed flashy on react-native 0.61 android (#33)

gorhom · May 9, 2020 · b794635 · b794635
1 parent 69a15b8
commit b794635
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 33 deletions.
diff --git a/src/AnimatedTabBar.tsx b/src/AnimatedTabBar.tsx
@@ -87,6 +87,7 @@ export function AnimatedTabBar<T extends PresetEnum>(
     }
   }, [props, isReactNavigation5]);
   const selectedIndex = useValue(0);
+
   //#region callbacks
   const getRouteTitle = useCallback(
     (route: Route<string>) => {

diff --git 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
@@ -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,14 +17,24 @@ 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';
 import { TabBarItemProps } from '../../types';
 import { FlashyTabConfig } from '../types';
 import { styles } from './styles';
 
+const AnimatedSvg = Animated.createAnimatedComponent(
+  Svg
+) as React.ComponentClass<Animated.AnimateProps<ViewStyle, SvgProps>, any>;
+const AnimatedCircle = Animated.createAnimatedComponent(
+  Circle
+) as React.ComponentClass<
+  Animated.AnimateProps<ViewStyle, CircleProps & { style?: any }>,
+  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) => {
             </Text>
           </Animated.View>
         </MaskedView>
-
-        {indicatorVisibility && <Animated.View style={indicatorStyle} />}
+        {indicatorVisibility && (
+          <AnimatedSvg
+            style={[
+              styles.root,
+              {
+                left: sub(divide(containerWidth, 2), indicatorSize / 2),
+                top: sub(containerHeight, itemInnerVerticalSpace / 2),
+              },
+            ]}
+            width={indicatorSize}
+            height={indicatorSize}
+          >
+            <AnimatedCircle
+              r={animatedIndicatorSize}
+              translateY={indicatorSize / 2}
+              translateX={indicatorSize / 2}
+              fill={indicatorColor}
+            />
+          </AnimatedSvg>
+        )}
       </Animated.View>
     </TapGestureHandler>
   );