Tentei alterar o tamanho do ícone, usando a mesma solução para alteração do tamanho da fonte, mas, no caso do Icon, não funcionou. Funcionou somente para a Label
Solução:
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../assets/home.svg';
import Coracao from '../assets/coracao.svg';
import ProdutorRotas from './ProdutorRotas';
import MelhoresProdutoresRotas from './MelhoresProdutoresRotas';
const Tab = createBottomTabNavigator();
export default function AppRotas() {
return <NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
tabBarIcon: ({ color }) => {
let Icon = Home;
if (route.name === 'Melhores Produtores') {
Icon = Coracao;
}
return <Icon color={color} />;
},
tabBarActiveTintColor: '#2A9F85',
tabBarInactiveTintColor: 'gray',
tabBarLabelStyle: estilos.textoAba,
tabBarIconStyle: estilos.iconeAba,
})}>
<Tab.Screen name='Home' component={ProdutorRotas} />
<Tab.Screen name='Melhores Produtores' component={MelhoresProdutoresRotas} />
</Tab.Navigator>
</NavigationContainer>
}
const estilos = StyleSheet.create({
iconeAba: {
width: 64,
height: 64,
},
textoAba: {
fontSize: 14,
lineHeight: 15,
marginBottom: 4,
}
});