Bottom Tab buttons render padding inconsistently

[cohoe]

The icons in the bottom tab navigator have horizontal padding on the actively selected one. The padding is inconsistently rendered. Noticed on iOS, seen on Android too.

[Decluttered]

Hey, I'd love so solve this issue for you! Could you assign me?

[cohoe]

Hey, I'd love so solve this issue for you! Could you assign me?

@Decluttered You are welcome to submit a PR without assignment. However if you vibe-code something out without any testing or proof of functionality I will immediately close it with contempt.

[cohoe]

Upstream issue callstack/react-native-paper#4767

Tried applying the code in callstack/react-native-paper#4820, had unintended visual side effects of making every button look like it was active. Didn't chase that down and decided to wait for the PR to land.

[fathert0rque]

@cohoe that's odd. Simulator or physical device?

My fix works as intended on the simulators, but I was disappointed to see that it shows the exact same bug as before on a physical device.

I've been running my branch as a pnpm patch for weeks and I have not observed what you just described. Not that it matters, since the PR doesn't even fix the problem in its current state.

[cohoe]

@chrisbarless Thanks for chiming in! I don't recall if my observations were specifically simulators or physicals.

On a hunch, I re-applied your patch to my latest main and am delighted to report that it functions as expected! (on physical+simulator ios+android). My hunch was that around the time I was looking at this issue I was also in the process of migrating away from the deprecated createMaterialBottomTabNavigator to createBottomTabNavigator (described here https://oss.callstack.com/react-native-paper/docs/guides/bottom-navigation). FWIW this is also with react-native-paper@5.14.5, react-native@0.82.0 (new architecture).