Animated TabBar custom svg icon for each state

CustomIcon.tsx

import * as React from 'react';
import Animated, {not, greaterOrEq} from 'react-native-reanimated';
import Svg, {Path, PathProps} from 'react-native-svg';
import {BubbleTabIconProps} from '@gorhom/animated-tabbar';

const AnimatedPath = (Animated.createAnimatedComponent(
  Path,
) as any) as React.ComponentClass<
  Animated.AnimateProps<{}, PathProps & {style?: any}>
>;

const CustomIconSVG = ({color, size, animatedFocus}: BubbleTabIconProps) => {
  const animatedActiveIconOpacity = greaterOrEq(animatedFocus, 0.5);
  const animatedInActiveIconOpacity = not(animatedActiveIconOpacity);
  return (
    <Svg width={size} height={size} viewBox="0 0 24 24">
      <AnimatedPath
        d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
        stroke={color}
        strokeWidth={2}
        fill="none"
        fillRule="evenodd"
        strokeLinecap="round"
        strokeLinejoin="round"
        opacity={animatedActiveIconOpacity}
      />
      <AnimatedPath
        d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.501 5.501 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
        stroke={color}
        strokeWidth={2}
        fill="none"
        fillRule="evenodd"
        strokeLinecap="round"
        strokeLinejoin="round"
        opacity={animatedInActiveIconOpacity}
      />
    </Svg>
  );
};

export default CustomIconSVG;