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,

}
```



Bắt đầu tại điểm vào MobileBottomNavigator trong mã navigator của issue và kiểm tra cách BottomNavigation.Bar cùng callback renderIcon định vị React Native Paper Icon. Tái hiện lỗi lệch vị trí trên Android và iOS, sau đó xác minh rằng icon được căn giữa theo chiều dọc mà không làm ảnh hưởng đến các nhãn hoặc khoảng cách safe-area.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.