feat: Migrate to native bottom tab navigator using image assets for tab icons and update react-native-screens.

[hb2708]

✅ I have read the contributing file

Completes #408

Summary

• ios 26 Liquid glass tab bar support
• With the changes to tab bar the app will not support expo go. To run need to run yarn start -> press s ( switch to development build) -> press i or a

Changelog

• Added new tab bar images (Exported from Figma)

Demo

iOS	Android
Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-12-18.at.01.17.18.mov	demo.mp4

[PierreBresson]

I have tested it, and It works well, thanks for looking into that! However, I found 2 issues :

• Icons not on focused are black instead of gray
• Some content can't be seen/reach now. I've put the screenshots below of what I could find.

[hb2708]

@PierreBresson
ahh good catch should have scrolled as well instead of just changing tabs.

for the monthly budget screen need some adjustment where the button needs to moved inside the scrollview
WIll look like below . and the button will no more be stick to bottom.
Can add a small separator line above the button if need
For now this seems to be a solution

Let me know if that works will commit and push . till then i will keep on local For the Monthly Budget page

[hb2708]

May get a better solution when we add other changes for large header in follow up work

[hb2708]

Related to the inactive tab tint color, it will be automatically set, and we won’t be able to control it. This feature will no longer be supported in iOS once we migrate to Liquid Glass in iOS 26.

https://github.com/react-navigation/react-navigation/blob/2b7ee0d2d1b1ef0390b690f59c0c1dd8bd57e9eb/packages/bottom-tabs/src/unstable/types.tsx#L210-L215

[PierreBresson]

Moving the button inside the scrollview is a good solution for now, otherwise we can delete the button and update the value every time the slider value has changed.
Let's skip small separator line, otherwise it looks good 😊

[hb2708]

@PierreBresson pushed All should be good now

[PierreBresson]

@hb2708 almost there. The button is fixed but there are still a few regressions :

[hb2708]

@PierreBresson Added contentInsetAdjustmentBehavior='automatic' to all scrollable content so that we dont face at any place now and future as well. hope i did not miss any screen

[PierreBresson]

iOS is fixed, but android has issues :

[hb2708]

hmm it seems contentInsetAdjustmentBehavior dont work as expected in android 🤦

[hb2708]

@PierreBresson Added some android specific code which i felt is a solution at this point . tried to cover all the screen i felt may have issue

[PierreBresson]

Please use useBottomTabBarHeight, see documentation.

[hb2708]

useBottomTabBarHeight wont work for Native Bottom Tab Navigator as it expects JS-based navigator context

When used it will throw error as

[Error: Couldn't find the bottom tab bar height. Are you inside a screen in Bottom Tab Navigator?]

[hb2708]

@PierreBresson updated the approach to use different hook.

[PierreBresson]

Ah I see, alright let's go for the static value then, thanks for looking into it.

[PierreBresson]

Good to go, merci !