Element type is invalid

[chinds185a]

Bug

I am running an existing RN project on a new mac, when running the app on the IOS simulator I am seeing the below error

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `FlashyTabBarItemComponent`.

This error is located at:
    in RCTView (at FlashyTabBarItem.tsx:281)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (at FlashyTabBarItem.tsx:280)
    in RNCMaskedView (at MaskedView.js:74)
    in MaskedView (at FlashyTabBarItem.tsx:276)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (at FlashyTabBarItem.tsx:275)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (at FlashyTabBarItem.tsx:274)
    in FlashyTabBarItemComponent
    in FlashyTabBarItemComponent (at FlashyTabBar.tsx:63)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (at RawButton.tsx:91)
    in LongPressGestureHandler (at RawButton.tsx:87)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (at RawButton.tsx:79)
    in TapGestureHandler (at RawButton.tsx:75)
    in RawButton (at FlashyTabBar.tsx:55)
    in RCTView (at FlashyTabBar.tsx:52)
    in FlashyTabBarComponent
    in FlashyTabBarComponent (at AnimatedTabBarView.tsx:96)
    in AnimatedTabBarView (at AnimatedTabBar.tsx:178)
    in AnimatedTabBar (at App/index.js:119)
    in RCTView (at BottomTabView.tsx:96)
    in SafeAreaConsumer (at SafeAreaProviderCompat.tsx:32)
    in SafeAreaProviderCompat (at BottomTabView.tsx:95)
    in BottomTabView (at createBottomTabNavigator.tsx:41)
    in BottomTabNavigator (at App/index.js:117)
    in TabScreen (at SceneView.tsx:121)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:112)
    in EnsureSingleNavigator (at SceneView.tsx:111)
    in SceneView (at useDescriptors.tsx:147)
    in RCTView (at CardContainer.tsx:199)
    in RCTView (at CardContainer.tsx:198)
    in RCTView (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:543)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Card.tsx:525)
    in PanGestureHandler (at GestureHandler.native.tsx:13)
    in PanGestureHandler (at Card.tsx:519)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Card.tsx:510)
    in RCTView (at Card.tsx:504)
    in Card (at CardContainer.tsx:168)
    in CardContainer (at CardStack.tsx:555)
    in RCTView (at Screens.tsx:70)
    in MaybeScreen (at CardStack.tsx:548)
    in RCTView (at Screens.tsx:48)
    in MaybeScreenContainer (at CardStack.tsx:439)
    in CardStack (at StackView.tsx:435)
    in KeyboardManager (at StackView.tsx:433)
    in SafeAreaConsumer (at StackView.tsx:431)
    in RNCSafeAreaView (at SafeAreaContext.tsx:50)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaConsumer (at SafeAreaProviderCompat.tsx:32)
    in SafeAreaProviderCompat (at StackView.tsx:430)
    in RCTView (at StackView.tsx:429)
    in StackView (at createStackNavigator.tsx:82)
    in StackNavigator (at App/index.js:129)
    in RootStackScreen (at App/index.js:150)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:283)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:64)
    in ThemeProvider (at NavigationContainer.tsx:63)
    in ForwardRef(NavigationContainer) (at App/index.js:149)
    in App (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

renderRoot
    [native code]:0
runRootCallback
    [native code]:0
renderApplication
    renderApplication.js:52:52
runnables.appKey.run
    AppRegistry.js:116:10
runApplication
    AppRegistry.js:197:26
callFunctionReturnFlushedQueue
    [native code]:0

Usage

const tabs = {
  Menu: {
    labelStyle: {
      color: "#5B37B7",
    },
    icon: {
      component: <FontAwesomeIcon icon={faUtensils} />,
      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)",
    },
  },
  Account: {
    labelStyle: {
      color: "#1194AA",
    },
    icon: {
      component: <FontAwesomeIcon icon={faUser} />,
      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)",
    },
  },
};

const Tab = createBottomTabNavigator();
const TabScreen = () => (
  <Tab.Navigator
    tabBar={(props) => (
      <AnimatedTabBar tabs={tabs} preset="flashy" {...props} />
    )}
  >
    <Tab.Screen name="Menu" component={CatalogStackScreen} />
    <Tab.Screen name="Account" component={AccountStackScreen} />
  </Tab.Navigator>
);

Environment info

Library	Version
@gorhom/animated-tabbar	1.5.1
react-native	0.61.5
react-native-reanimated	1.8.0
react-native-gesture-handler	1.6.1
react-native-svg	12.1.0

Steps To Reproduce

[chinds185a]

Oops just spotted the other issues, This is solved now. Closing a dupe of #51