React-Native: Bottom Tab Navigator: 'tabBarOptions' is deprecated. Migrate the options to 'screenOptions' instead

Question

I am developing a mobile app with React Native, and in it I use Tab.Navigator - Tab.Screen component. In the Navigator I use the initialRouteName , tabBarOptions , and screenOptions properties. Everything works fine in the other properties, until the javaScript finds screenOptions . Then it gives me the alert:

// Place the following in 'screenOptions' in your code to keep current behavior:

{
   "tabBarStyle": [
    {
      "display": "flex"
    },
    null
   ]
}

See https://reactnavigation.org/docs/bottom-tab-navigator#options for more details.

I already did it in my code:

   const App = () => {
     return (
       <>
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName='ExerciseScreensStack'
          tabBarOptions={{
            tabBarActiveTintColor: '#efb810',
            tabBarInactiveTintColor: 'black'
          }}
          screenOptions = {({ route }) =>({
            tabBarStyle: [
              {
                display: "flex"
              },
              null
            ],
        tabBarIcon: ({ color }) => 
        screenOptions(route, color),
          
      })}
      >

And this is the function that renders the color of my icons when I am on one of the screens:

const screenOptions = (route, color ) =>{
  let IconName;

  switch (route.name){
    case 'Home':
    IconName = "home-circle-outline"
    break;

    case "ExerciseScreensStack":
    IconName = "basketball"
    break;

    case 'RoutinesStack':
    IconName = "walk"
    break;

  }

  return(
    <Icon type='material-community' name={IconName} size={22} 
color={color}/>

); }

And I'm still having the same problem. What should I do to fix it? Should I ignore it since it doesn't circumstantially affect the app's performance? Why is this happening?

Answer 1

Place the options in tabBarOptions into screenOptions instead, like so:

 screenOptions = {({ route }) =>({
        tabBarActiveTintColor: '#efb810',
        tabBarInactiveTintColor: 'black',
        tabBarStyle: [
          {
            display: "flex"
          },
          null
        ],
    tabBarIcon: ({ color }) => 
    screenOptions(route, color),
      
  })}

Its giving this warning because the tabBarOptions has been deprecated in React Navigation v6.x

Answer 2

It looks that deprecation has been claimed for 4 years now but warnings do not cease. Anyone sure when the effect will be permanent, and any cases tabaroptions wont apply to screenops