ERROR Warning: BottomTabNavigator: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

[Koykoy200078]

ERROR Warning: BottomTabNavigator: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

// package,json
"react": "18.3.1",
"react-native": "0.74.0",
"react-native-animated-nav-tab-bar": "^3.1.10",

import { AnimatedTabBarNavigator } from 'react-native-animated-nav-tab-bar'

const Tab = AnimatedTabBarNavigator()
const TabBar = () => {
const { order_count: orderCount } = useSelector((state) => state.order)

return (
	<Tab.Navigator
		detachInactiveScreens={true}
		initialRouteName={Routes.HOME}
		backBehavior='initialRoute'
		appearance={{
			tabBarBackground: '#ffffff',
			activeColors: '#ffffff',
			activeTabBackgrounds: Colors.primaryColorDark,
			dotSize: 'large',
		}}
		screenOptions={({ route }) => ({
			headerShown: false,
			tabBarIcon: ({ focused, color = '#000', size }) => {
				let iconName
				let iconSize
				if (route.name === Routes.HOME) {
					iconName = focused ? 'view-dashboard' : 'view-dashboard-outline'
					return <Icons.MaterialCommunityIcons name={iconName} size={23} color={color} />
				} else if (route.name === Routes.POS) {
					iconSize = focused ? 23 : 23
					const iconNew = focused ? <Icons.MaterialIcons name={'shopping-cart'} size={iconSize} color={color} /> : <Icons.MaterialCommunityIcons name={'cart-outline'} size={iconSize} color={color} />
					return iconNew
				} else if (route.name === Routes.ORDERS) {
					iconName = focused ? 'basket' : 'basket-outline'
					iconSize = focused ? 23 : 23
					return <TabBadgeIcon name={iconName} size={iconSize} badgeCount={orderCount} color={color} focused={focused} />
				} else if (route.name === Routes.CASHFLOW) {
					iconName = focused ? 'cash-fast' : 'cash'
					return <Icons.MaterialCommunityIcons name={iconName} size={23} color={color} />
				} else if (route.name === Routes.SETTINGS) {
					iconName = focused ? 'settings' : 'settings-outline'
					return <Icons.Ionicons name={iconName} size={23} color={color} />
				}
			},
			tabBarHideOnKeyboard: true,
			keyboardHidesTabBar: true,
		})}>
		<Tab.Screen name={Routes.HOME} component={Home} />
		<Tab.Screen name={Routes.POS} component={POS} />
		<Tab.Screen name={Routes.ORDERS} component={Orders} />
		<Tab.Screen name={Routes.CASHFLOW} component={CashFlow} />
		<Tab.Screen name={Routes.SETTINGS} component={Settings} />
	</Tab.Navigator>
)

}

[MohamedMuflahi]

alos having the same issue after i updated this package

[GHEAD1802]

I am also having same issue when I updated from Expo 50 to 51

[GHEAD1802]

ERROR Warning: BottomTabNavigator: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

[GHEAD1802]

I updated react-native-animated-nav-tab-bar which is related to that, I am still having same issue

[kstolk]

Same issue, this repo needs some love.

[kstolk]

Issue is at the bottom of this file. Not sure if PR's are accepted? If so should be easy to fix:

https://github.com/torgeadelin/react-native-animated-nav-tab-bar/blob/master/src/AnimatedTabBarNavigator.tsx

[GHEAD1802]

I am not using typescript in my app, I am simply importing react-native-animated-nav-tab-bar package in my app

[torgeadelin]

I know it needs some love, but I've been quite restricted by time and other commitments haha.

PRs and contributions are absolutely welcome!

[kstolk]

I know it needs some love, but I've been quite restricted by time and other commitments haha.

PRs and contributions are absolutely welcome!

No worries, I created the PR:
#137

[torgeadelin]

This has now been fixed, please upgrade to latest version.

[kstolk]

Thanks for merging the pr!