How can I change icon position using BottomNavigation.Bar in a Tab.Navigator

Hello, I would like to change to icon position at the bottom navbar to be centred. Currently, the icon is not vertically aligned (see image 1). I debugged it on react-devtools and the culprit is a "top" property which is set to 4 (see image 2) and in order for the icon to be centred I need to change it to top: 0. Does anybody know which props and in which component should I do this? I've tried in Tab.Screen, Tab.Navigator and BottomNavigation.Bar components with no success. The icon doesn't look vertically aligned in both Android Emulator and physical devices. Here's what I got in my navigator:

```
import { BottomTabScreenProps, createBottomTabNavigator } from "@react-navigation/bottom-tabs"
import { CompositeScreenProps, CommonActions } from "@react-navigation/native"
import React from "react"
import { ViewStyle } from "react-native"
import { HomeScreen, MessagesScreen, SearchScreen, MyProfileScreen, TestScreen } from "../screens"
import { colors } from "../theme"
import { AppStackParamList, AppStackScreenProps } from "./AppNavigator"
import { observer } from "mobx-react-lite"
import { createNativeStackNavigator, NativeStackNavigationProp } from "@react-navigation/native-stack"
import HeaderBar from "../components/HeaderBar"
import { BottomNavigation, Icon } from 'react-native-paper';
import { ICONREGISTRY } from "app/const/iconRegistry"

export type MobileBottomNavigatorParamList = {
Home: undefined
Search: undefined
Messages: undefined
MyProfile: undefined
Test: undefined
HomeStack: undefined
SearchStack: undefined
MessagesStack: undefined
MyProfileStack: undefined
}

export type MobileBottomTabScreenProps = CompositeScreenProps<
BottomTabScreenProps,
AppStackScreenProps
>
export type HeaderNavigation = NativeStackNavigationProp

const Tab = createBottomTabNavigator()
const Stack = createNativeStackNavigator()

const HomeStack = observer(function HomeStack() {
return (
}} initialRouteName="Home">



)
})

const SearchStack = observer(function SearchStack() {
return (
}} initialRouteName="Search">


)
})

const MessagesStack = observer(function MessagesStack() {
return (
}} initialRouteName="Messages">


)
})

const MyProfileStack = observer(function MyProfileStack() {
return (
}} initialRouteName="MyProfile">


)
})

export const MobileBottomNavigator = () => {
return (
(
{
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});

if (event.defaultPrevented) {
preventDefault();
} else {
navigation.dispatch({
...CommonActions.navigate(route.name, route.params),
target: state.key,
});
}
}}
renderIcon={({ route, focused, color }) => {
const { options } = descriptors[route.key];
if (options.tabBarIcon) {
return options.tabBarIcon({ focused, color, size: 24 });
}

return null;
}}
getLabelText={({ route }) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.title;

return label;
}}
/>
)}
>
(

),
}}
/>

(

),
}}
/>

(

),
}}
/>

(

),
}}
/>

)
}

const $tabBar: ViewStyle = {
backgroundColor: "#355CA8",
borderTopColor: colors.transparent,

}
```



Start at the MobileBottomNavigator entry point in the issue's navigator code and inspect how BottomNavigation.Bar and its renderIcon callback position the React Native Paper Icon. Reproduce the misalignment on Android and iOS, then verify that the icon is vertically centered without disrupting labels or safe-area spacing.

Written by the indexing model from the issue text.