hoaphantn7604 / react-native-curved-bottom-bar

A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.
MIT License
468 stars 98 forks source link

Warning: Each child in a list should have a unique "key" prop. Check the render method of `ForwardRef`. See https://reactjs.org/link/warning-keys for more information. Screen #32

Closed chhipashubham970 closed 2 years ago

chhipashubham970 commented 2 years ago

I am getting this warning in the react native while using this library. My code for the navigator <CurvedBottomBar.Navigator ref={ref} screenOptions={{ headerShown: false, tabBarShowLabel: false, }}

        // type="down"
        // style={styles.bottomBar}
        strokeWidth={1}
        height={60}
        circleWidth={55}
        bgColor="white"

        initialRouteName="DashboardScreen"
        // borderTopLeftRight
        renderCircle={({ selectedTab, navigate }) => (
            <Animated.View style={{ ...styles.btnCircleUp }}>
                <TouchableOpacity
                    style={{
                        flex: 1,
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}
                    onPress={() => navigate(selectedTab)}>
                    <Image
                        source={images.Maps}
                        resizeMode="contain"
                        style={{
                            width: 30,
                            height: 30,
                            alignSelf: "center",
                            tintColor: "white"
                        }}
                    />
                </TouchableOpacity>
            </Animated.View>
        )}
        tabBar={({ routeName, selectedTab, navigate }) => {
            return (
                <TouchableOpacity
                    onPress={() => navigate(routeName)}
                    style={{
                        flex: 1,
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}
                >
                    {_renderIcon(routeName, selectedTab)}
                </TouchableOpacity>
            );
        }}
    >
        <CurvedBottomBar.Screen
            name="DashboardScreen"
            position="LEFT"
            component={Dashboard}
        />
        <CurvedBottomBar.Screen
            name="Users"
            position="LEFT"
            component={ComingSoon}
        />
        <CurvedBottomBar.Screen
            name="Maps"
            position="CENTER"
            component={ComingSoon}
        />
        <CurvedBottomBar.Screen
            name="Gifts"
            component={ComingSoon}
            position="RIGHT"
        />
        <CurvedBottomBar.Screen
            name="Messages"
            component={ComingSoon}
            position="RIGHT"
        />
    </CurvedBottomBar.Navigator>

I am not understanding where i have to put the key in this code. Please provide me some solution for it.

WisselLuca commented 2 years ago

having a similar issue

hoaphantn7604 commented 2 years ago

Hi, I’m working on it.

hoaphantn7604 commented 2 years ago

hi All, This issue is resolved. Please install later version 2.0.1