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,

}
```



Commencez par le point d’entrée MobileBottomNavigator dans le code du navigateur de l’issue et examinez comment BottomNavigation.Bar et son callback renderIcon positionnent le React Native Paper Icon. Reproduisez le mauvais alignement sur Android et iOS, puis vérifiez que l’icône est centrée verticalement sans perturber les libellés ni l’espacement de la safe area.

Rédigé par le modèle d'indexation à partir du texte de l'issue.