undefined is not a function on Color.js

[fachryansyah]

Bug

i'm follow instruction with React Navigation v5, and getting this error.
i'm trying to combine stack navigator with tabbar navigator

Environment info

Library	Version
@gorhom/animated-tabbar	^2.1.2
react-native	0.64.2
react-native-reanimated	^2.2.4
react-native-gesture-handler	^1.10.3
react-native-svg	^12.1.1

Steps To Reproduce

1. Not showing any tab, just getting error

Describe what you expected to happen:

1. Showing the tabbar

Reproducible sample code

here my full code navigation.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AnimatedTabBar from '@gorhom/animated-tabbar';
import { themes } from './utils/config';
import Ionicons from 'react-native-vector-icons/dist/Ionicons';
import Home from './screens/home';
import Login from './screens/login';
import Account from './screens/account';
import TransactionHistory from './screens/transaction-history';
import Shopping from './screens/shopping';
import Notification from './screens/notification';
import Pulsa from './screens/pulsa';
import Electricity from './screens/electricity';
import Checkout from './screens/checkout';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const horizontalAnimation = {
    cardStyleInterpolator: ({ current, layouts }) => {
        return {
            cardStyle: {
                transform: [
                    {
                        translateX: current.progress.interpolate({
                            inputRange: [0, 1],
                            outputRange: [layouts.screen.width, 0],
                        }),
                    },
                ],
            },
        };
    },
};

const tabs = {
    Home: {
        labelStyle: {
            color: '#5B37B7',
        },
        icon: {
            component: props => <Ionicons {...props} name="md-home" size={18} color="black" />,
            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)',
        },
    },
    Riwayat: {
        labelStyle: {
            color: '#1194AA',
        },
        icon: {
            component: props =>  <Ionicons {...props} name="md-file-tray-full" size={18} color="black" />,
            activeColor: 'rgba(17,148,170,1)',
            inactiveColor: 'rgba(0,0,0,1)',
        },
        background: {
            activeColor: 'rgba(207,235,239,1)',
            inactiveColor: 'rgba(207,235,239,0)',
        },
    },
    Akun: {
        labelStyle: {
            color: '#1194AA',
        },
        icon: {
            component: props => <Ionicons {...props} name="md-person" size={18} color="black" />,
            activeColor: 'rgba(17,148,170,1)',
            inactiveColor: 'rgba(0,0,0,1)',
        },
        background: {
            activeColor: 'rgba(207,235,239,1)',
            inactiveColor: 'rgba(207,235,239,0)',
        },
    },
};

function TabNavigator() {
    return (
        <Tab.Navigator
            tabBar={props => (
                <AnimatedTabBar tabs={tabs} {...props} />
            )}
        >
            <Tab.Screen name="Home" component={Home} />
            <Tab.Screen name="Riwayat" component={TransactionHistory} />
            <Tab.Screen name="Akun" component={Account} />
        </Tab.Navigator>
    )
}

const navigator = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerShown: false
                }}
            >
                <Stack.Screen name="Login" component={Login} options={horizontalAnimation} />
                <Stack.Screen name="Index" component={TabNavigator} options={horizontalAnimation} />
                <Stack.Screen name="Shopping" component={Shopping} options={horizontalAnimation} />
                <Stack.Screen name="Notification" component={Notification} options={horizontalAnimation} />
                <Stack.Screen name="Pulsa" component={Pulsa} options={horizontalAnimation} />
                <Stack.Screen name="Checkout" component={Checkout} options={horizontalAnimation} />
                <Stack.Screen name="Electricity" component={Electricity} options={horizontalAnimation} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default navigator;