undefined is not a function

[Asher978]

Bug

Unable to run the example as JSX instead of TS

Library	Version
@gorhom/animated-tabbar	2.1.2
react-native	0.66.4
react-native-reanimated	2.3.1
react-native-gesture-handler	2.1.0
react-native-svg	12.1.1

Describe what you expected to happen:

1. Render default preset bubble tab bar per the example

Reproducible sample code

Code has been taken from diff files ...

import Svg, { Path } from 'react-native-svg';

const AnimatedPath = Animated.createAnimatedComponent(Path);

Animated.addWhitelistedNativeProps({
  stroke: true,
});

const HomeSVG = ({ color, size }) => {
  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"
      />
    </Svg>
  );
};

const tabs = {
  Directory: {
    labelStyle: {
      color: '#5B37B7',
    },
    icon: {
      component: Svg,
      activeColor: 'rgba(91,55,183,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: 'rgba(223,215,243,1)',
      inactiveColor: 'rgba(223,215,243,0)',
    },
  },
  Search: {
    labelStyle: {
      color: '#5B37B7',
    },
    icon: {
      component: Svg,
      activeColor: 'rgba(91,55,183,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: 'rgba(223,215,243,1)',
      inactiveColor: 'rgba(223,215,243,0)',
    },
  },
};

<Tab.Navigator
      initialRouteName="Directory"
      tabBar={props => <AnimatedTabBar tabs={tabs} {...props} />}
      screenOptions={{
        headerShown: false,
      }}>
      <Tab.Screen
        name="Directory"
        options={{
          title: 'Directory',
          tabBarLabel: 'Directory',
        }}
        component={Directory}
        initialParams={{
          backgroundColor: tabs.Directory.labelStyle.color,
        }}
      />
      <Tab.Screen
        name="Search"
        initialParams={{
          backgroundColor: tabs.Directory.labelStyle.color,
        }}
        options={{
          title: 'Search',
          tabBarLabel: 'Search',
        }}
        component={SearchModal}
      />
    </Tab.Navigator>

Error trace ...

TypeError: undefined is not a function
TypeError: undefined is not a function
    at interpolateColorsRGB (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:168427:30)
    at interpolateColor (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:168469:32)
    at BubbleTabBarItemComponent (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:167672:104)
    at renderWithHooks (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:10801:33)
    at mountIndeterminateComponent (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:13589:34)
    at beginWork (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:14530:49)
    at beginWork$1 (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:18357:29)
    at performUnitOfWork (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:17768:29)
    at workLoopSync (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:17707:28)
    at renderRootSync (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:17683:25)
    at performSyncWorkOnRoot (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:17444:40)
    at flushSyncCallbacks (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:7769:36)
    at flushSyncCallbacksOnlyInLegacyMode (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:7750:29)
    at scheduleUpdateOnFiber (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:17131:49)
    at enqueueSetState (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:8949:43)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:20907:37)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:157914:27)
    at dispatch (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:110774:17)
    at rehydrate (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:111980:23)
    at _rehydrate (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:111341:29)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:111366:23)
    at tryCallOne (/tmp/hermes/staging/hermes/cmake/intlDebug/armeabi-v7a/lib/InternalBytecode/InternalBytecode.js:53:16)
    at anonymous (/tmp/hermes/staging/hermes/cmake/intlDebug/armeabi-v7a/lib/InternalBytecode/InternalBytecode.js:139:27)
    at apply (native)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:29596:26)
    at _callTimer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:29492:17)
    at _callReactNativeMicrotasksPass (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:29531:17)
    at callReactNativeMicrotasks (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:29741:44)
    at __callReactNativeMicrotasks (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:3024:46)
    at anonymous (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:2802:45)
    at __guard (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:3007:15)
    at flushedQueue (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:2801:21)
    at invokeCallbackAndReturnFlushedQueue (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.ipintercomclear&modulesOnly=false&runModule=true:2794:33)

[hugoh59]

Getting same error