search

okwasniewski / react-native-bottom-tabs

Native Bottom Tabs for React Native
https://okwasniewski.github.io/react-native-bottom-tabs/
MIT License
619 stars 24 forks source link

createNativeBottomTabNavigator creates truncated labels on iPadOS < 18 and iOS in landscape #124

Closed johankasperi closed 1 week ago

johankasperi commented 2 weeks ago

Thanks for an awesome library! This is a huge improvement for React Native.

When using createNativeBottomTabNavigator the labels are truncated on iPadOS < 18 and on iOS when in landscape. I can replicate this in the example project. The same bug is not present when using TabView. I'm using Xcode 16.1

iPad 10th generation iPadOS 17.5 (Simulator)

Simulator Screenshot - iPad (10th generation) - 2024-11-05 at 11 36 15

iPhone 16 Pro iOS 18.1 (Simulator)

Simulator Screenshot - iPhone 16 Pro - 2024-11-05 at 11 40 43

I've tried to look into what is causing this but haven't found anything yet.

johankasperi commented 2 weeks ago

It's happening when I'm setting tabBarInactiveTintColor (can replicate the bug on TabView when setting this property) and it seems to be because of this code https://github.com/okwasniewski/react-native-bottom-tabs/blob/e96c92c2dfe58b04e115e5877dcf24d9fd0cea03/ios/TabViewImpl.swift#L157

okwasniewski commented 2 weeks ago

Thanks for reporting the issue and doing the initial debugging!

Weird that background color affects this 😅 I will look into this

johankasperi commented 2 weeks ago

Are you sure that we need to do the "hack" suggested in https://stackoverflow.com/a/71934882 ?

I've tested with this code and almost got everything working:

    UITabBar.appearance().barTintColor = props.barTintColor
    UITabBar.appearance().isTranslucent = props.translucent
    UITabBar.appearance().unselectedItemTintColor = props.inactiveColor

But to make that work we cannot override the appearance with:

  UITabBar.appearance().standardAppearance = appearance

so we have to remove that code

okwasniewski commented 2 weeks ago

I am not sure about this, maybe it's not needed.

If you got it working can you open a PR? 🙏

johankasperi commented 2 weeks ago

I am not sure about this, maybe it's not needed.

If you got it working can you open a PR? 🙏

Of course! I haven't got it working yet though but after some initial tests I believe we can get it working without that "hack" from Stackoverflow. I can give it a go asap and open a PR.