As I delve into my studies on React Native, I came across the deprecation of the tabBarOptions feature. I understand that now we need to include it in screenOptions, but I'm facing issues with implementing this in my code. I tried enclosing them in brackets to combine them, but it doesn't seem to 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;