Check the render method of BubbleTabItemComponent

[Angelk90]

Bug

Environment info

Library	Version
@gorhom/animated-tabbar	^2.1.0
react-native	0.63.3
react-native-reanimated	^1.13.0
react-native-gesture-handler	^1.8.0
react-native-svg	^12.1.0

Reproducible sample code

@gorhom : I am using the following boilerplate, the NavigationContainer is already defined at the app level as you can see.

This code I am using inside a containers, this is an example of container:

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Text } from 'react-native';

const Home = () => {
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
};

const Profile = () => {
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
};

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AnimatedTabBar, {
  TabsConfig,
  BubbleTabConfig,
} from '@gorhom/animated-tabbar';
const Tab = createBottomTabNavigator();

const tabs = {
  Home: {
    labelStyle: {
      color: '#5B37B7',
    },
    icon: {
      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)',
    },
  },
  Profile: {
    labelStyle: {
      color: '#1194AA',
    },
    icon: {
      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 styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#999',
  },
  tabBarContainer: {
    borderRadius: 25,
  },
});

const IndexHomeContainer = (props) => {
  return (
    <Tab.Navigator
      tabBar={(props) => (
        <AnimatedTabBar iconSize={20} tabs={tabs} {...props} />
      )}>
      <Tab.Screen
        name="Home"
        initialParams={{
          backgroundColor: tabs.Home.labelStyle.color,
          nextScreen: 'Likes',
        }}
        component={Home}
      />
      <Tab.Screen
        name="Profile"
        initialParams={{
          backgroundColor: tabs.Profile.labelStyle.color,
          nextScreen: 'Home',
        }}
        component={Profile}
      />
    </Tab.Navigator>
  );
};

export default IndexHomeContainer;

[gorhom]

hi @Angelk90 , you need to provide icon.component ⚠️