Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
squirrelhomie opened this issue Dec 21, 2021 · 0 comments
Labels
bug Something isn't working

Comments

@squirrelhomie
Copy link

squirrelhomie commented Dec 21, 2021

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!

@squirrelhomie squirrelhomie added the bug Something isn't working label Dec 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant