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