I'm having problems when I try to render a TabBar
"Warning: Each child in a list should have a unique "key" prop.
Check the render method of MyTabBar
. See https://reactjs.org/link/warning-keys for more information."
My code:
import React from "react";
import { Cores } from "../../Theme/";
import { View, TouchableOpacity, StyleSheet } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
const Tab = createBottomTabNavigator();
import Pratique from "../../Screens/Pratique";
import Home from "../../Screens/Home";
import Perfil from "../../Screens/Perfil";
import HomeIcon from "../../Assets/Barra/Inicio.svg";
import PratiqueIcon from "../../Assets/Barra/Exercicios.svg";
import PerfilIcon from "../../Assets/Barra/Perfil.svg";
function MyTabBar({ state, descriptors, navigation }) {
return (
<View style={styles.container}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
var Icon;
switch (route.name) {
case "Home":
Icon = HomeIcon;
break;
case "Perfil":
Icon = PerfilIcon;
break;
case "Pratique":
Icon = PratiqueIcon;
break;
default:
Icon = HomeIcon;
break;
}
const onPress = () => {
const event = navigation.emit({
type: "tabPress",
target: route.key,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const onLongPress = () => {
navigation.emit({
type: "tabLongPress",
target: route.key,
});
};
return (
<TouchableOpacity
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={styles.touchable}
>
<Icon
style={{ color: isFocused ? Cores.azulNavegar : Cores.cinza }}
/>
<View
style={{
position: "absolute",
bottom: 0,
height: 4,
width: "100%",
backgroundColor: isFocused ? Cores.azulNavegar : null,
}}
></View>
</TouchableOpacity>
);
})}
</View>
);
}
export default function TabBar() {
return (
<Tab.Navigator
initialRouteName="Home"
screenOptions={{
headerShown: false,
statusBarHidden: true,
}}
tabBar={(props) => <MyTabBar {...props} />}
>
<Tab.Screen name="Pratique" component={Pratique} />
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Perfil" component={Perfil} />
</Tab.Navigator>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
width: "100%",
backgroundColor: Cores.branco,
},
touchable: {
flex: 1,
paddingVertical: 20,
justifyContent: "center",
alignItems: "center",
},
});
CodePudding user response:
everytime you use "map" or any other loop to return Component, you have to add "key" prop to wrap component ( top )
...
{state.routes.map((route, index) => {
...
return (
<TouchableOpacity
key={index.toString()}
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={styles.touchable}
>
...
just add this to your return part when you have map :)
key={index.toString()}