torgeadelin / react-native-animated-nav-tab-bar

A simple and customisable React Native component that implements an animated bottom tab bar for React Navigation.
MIT License
896 stars 101 forks source link

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

Closed Koykoy200078 closed 2 months ago

Koykoy200078 commented 5 months ago

Screenshot 2024-05-02 101021

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 commented 4 months ago

alos having the same issue after i updated this package

GHEAD1802 commented 3 months ago

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

GHEAD1802 commented 3 months ago

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

GHEAD1802 commented 3 months ago

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

kstolk commented 3 months ago

Same issue, this repo needs some love.

kstolk commented 3 months ago

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 commented 3 months ago

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

torgeadelin commented 3 months ago

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 commented 2 months ago

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: https://github.com/torgeadelin/react-native-animated-nav-tab-bar/pull/137

torgeadelin commented 2 months ago

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

kstolk commented 2 months ago

Thanks for merging the pr!