How do I change this React Navigation v5 code to v6?

Question

I'm studying react native and discovered that tabBarOptions was already deprecated. I know that including it in screenOptions is the new way but how do I do this with this code? I am trying to combine them by enclosing them to a bracket but it does not work.

import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import ScreenA from './NavScreen/ScreenA';
import ScreenB from './NavScreen/ScreenB';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

const Tab = createBottomTabNavigator();

const RNTabNavMaterialTab = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({route}) => ({
          tabBarIcon: ({focused, size, color}) => {
            let iconName;
            if (route.name === 'Screen_A') {
              iconName = 'autoprefixer';
              size = focused ? 25 : 20;
              // color = focused ? '#f0f' : '#555';
            } else if (route.name === 'Screen_B') {
              iconName = 'btc';
              size = focused ? 25 : 20;
              // color = focused ? '#f0f' : '#555';
            }
            return <FontAwesome5 name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: '#f0f',
          inactiveTintColor: '#555',
          activeBackgroundColor: '#fff',
          inactiveBackgroundColor: '#999',
          showLabel: true,
          labelStyle: {fontSize: 14},
          showIcon: true,
        }}
        activeColor="#f0edf6"
        inactiveColor="#3e2465"
        barStyle={{backgroundColor: '#694fad'}}>
        <Tab.Screen
          name="Screen_A"
          component={ScreenA}
          options={{headerShown: false}}
        />
        <Tab.Screen
          name="Screen_B"
          component={ScreenB}
          options={{headerShown: false}}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default RNTabNavMaterialTab;

Answer 1

I wanted to share what I have learned and discovered that the solution is very simple. What I did was set the screenOptions set in v6 and put all of those above the tabBarIcon.

const RNTabNavMaterialTab = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
          screenOptions={({route}) => ({
          tabBarActiveTintColor: "#f0f",
          tabBarInactiveTintColor: "#555",
          tabBarActiveBackgroundColor: "#fff",
          tabBarInactiveBackgroundColor: "#999",
          tabBarShowLabel: true,
          tabBarLabelStyle: {"fontSize": 14},
          tabBarStyle: [{"display": "flex"},null],
          tabBarIcon: ({focused, size, color}) => {
            let iconName;
            if (route.name === 'Screen_A') {
              iconName = 'autoprefixer';
              size = focused ? 25 : 20;
              // color = focused ? '#f0f' : '#555';
            } else if (route.name === 'Screen_B') {
              iconName = 'btc';
              size = focused ? 25 : 20;
              // color = focused ? '#f0f' : '#555';
            }
            return <FontAwesome5 name={iconName} size={size} color={color} />;
          },
        })}>
        <Tab.Screen
          name="Screen_A"
          component={ScreenA}
          options={{headerShown: false}}
        />
        <Tab.Screen
          name="Screen_B"
          component={ScreenB}
          options={{headerShown: false}}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};