TypeError: icon is not a function. (In 'icon({progress: progress})', 'icon' is undefined)

[sovannborith]

const Tab = createBottomTabNavigator();

const tabs = { Home: { icon: ({ progress }) => <Icon name={"ios-home"} size={26} />, }, Notification: { icon: ({ progress }) => <Icon name={"ios-notification"} size={26} />, }, };

return (

<SafeAreaProvider>
  <NavigationContainer>
    <Tab.Navigator
      tabBar={(props) => (
        <AnimatedTabBar barColor={"green"} tabs={tabs} {...props} />
      )}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
      />
      <Tab.Screen
        name="Notifications"
        component={NotificationScreen}

      />
    </Tab.Navigator>

  </NavigationContainer>
</SafeAreaProvider>

); }; export default App;

Not sure what wrong with this. Please help!!!

[sovannborith]

My mistake, the name from the tab and screen must be the same :)