How can I change icon position using BottomNavigation.Bar in a Tab.Navigator about react-native-paper HOT 1 OPEN

Hey, I could be wrong, but it looks like there is no easy way to solve your problem. I haven't found a way to override the top style. I think in your case it is also problematic that the icon container has a fixed height (it is based on the Material Design specification). Therefore, the icon is not aligned correctly because your icon size is 30dp, while in the Material specification is 24dp. To have an aligned icon, you can either set the icon size to 24dp or try adjusting the position with a negative value for the top style if the icon, for example :

<Tab.Screen
  name="Home"
  component={HomeScreen}
  options={{
    tabBarIcon: ({ color, size }) => {
      return (
        <Icon 
          name="home" 
          size={size} 
          color={color} 
          style={{ top: -4 }} // <- THIS
        />
      );
    },
  }}
/>

However, I cannot guarantee that this will not cause other unforeseen problems

I know that these are not the best solutions. Maybe at least one of them will at least be enough until someone else provides a better one?

from react-native-paper.