I'm having problems with Tab Navigator Key

Question

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",
  },
});

Answer 1

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()}