Skip to content

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

@squirrelhomie

Description

@squirrelhomie

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions