gorhom / react-native-animated-tabbar

A 60FPS animated tab bar with a variety of cool animation presets 😎
MIT License
1.7k stars 132 forks source link

Require Module "node_modules/@gorhom/animated-tabbar/src/AnimatedTabBar.tsx" Invariant Violation #129

Open squirrelhomie opened 2 years ago

squirrelhomie commented 2 years ago

Require Module "node_modules/@gorhom/animated-tabbar/src/AnimatedTabBar.tsx" Invariant Violation

Hello there! When creating my tabs adding them to the the Bottom Tab Navigator, (code below) I am receiving this error:

Simulator Screen Shot - iPhone 12 Pro Max - 2021-12-21 at 08 26 23

Environment info

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

Steps To Reproduce

  1. Install @gorhom/react-native-animated-tabbar
  2. Create tabs per README
  3. Add to Tab Navigator

Expected:

  1. Tabs to load in App

Reproducible sample code

Here is my code:


import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import AnimatedTabBar from "@gorhom/animated-tabbar";
import ActivityNavigator from "./ActivityNavigator";
import HomeNavigator from "./HomeNavigator";
import colors from "../config/colors";
import Feather from "react-native-vector-icons/Feather";

const tabs = {
  Home: {
    labelStyle: {
      color: colors.primary,
    },
    icon: {
      component: (props) => (
        <Feather name="home" size={20} color={colors.primary} {...props} />
      ),
      activeColor: "white",
      inactiveColor: colors.primary,
    },
    background: {
      activeColor: colors.primary,
      inactiveColor: "white",
    },
  },
  Activity: {
    labelStyle: {
      color: colors.primary,
    },
    icon: {
      component: (props) => (
        <Feather name="home" size={20} color={colors.primary} {...props} />
      ),
      activeColor: "white",
      inactiveColor: colors.primary,
    },
    background: {
      activeColor: colors.primary,
      inactiveColor: "white",
    },
  },
};

const Tab = createBottomTabNavigator();

const AppNavigator = () => (
  <Tab.Navigator
    initialRouteName="Home"
    tabBar={(props) => <AnimatedTabBar tabs={tabs} {...props} />}
  >
    <Tab.Screen name="Home" component={HomeNavigator} />
    <Tab.Screen name="Activity" component={ActivityNavigator} />
  </Tab.Navigator>
);

export default AppNavigator;

Please let me know if there is any additional information needed to investigate, thank you!