react-native-navigation

react-native-navigation copied to clipboard

🐛 Bug Report

Custom fontSize in bottomTab cut off title text and ellipsized on iOS after resume

(A clear and concise description of what the bug is)

Have you read the Contributing Guidelines on issues?

(Write your answer here.)

To Reproduce

Navigation.setDefaultOptions({ bottomTab: { fontSize: 14, }, });

background -> resume app -> { ellipsis dots } -> click on each tab -> background -> resume -> all visible

Expected behavior

No dots

Actual Behavior

Ellipsis text in bottomBar

Your Environment

• React Native Navigation version: latest
• React Native version: 63.3
• Platform(s) (iOS, Android, or both?): 7.4.1
• Device info (Simulator/Device? OS version? Debug/Release?): tested with iOS14 / debug

same issues 7.15.0

Also happens on iOS 14.3 Simulator on iPhone 12 with RNN v7.15.0. When activating a tab the label is fixed. Couldn't reproduce this on an actual device yet.

The same issue 7.14.0 when icon is set.

Still reproducing with react-native 0.66.2 and rnn 7.23.1

Still occurs. I created minimal reproduction repo here: https://github.com/wix/react-native-navigation/issues/7072#issuecomment-964246173

Workaround is to update tab title when app goes to "active" app state.

I've wrote a wrapper to use it on component registration:

export function BottomTabNameCorrector<P extends NavigationComponentProps>(
  tabId: string,
  Component: NavigationFunctionComponent<P>,
): NavigationFunctionComponent<P> {
  function Wrapper(props: P) {
    const onForeground = useCallback(() => {
      /*bottomTabsLayout is LayoutBottomTabs constant used to describe tabs root*/
      const tabTitle = bottomTabsLayout.children?.find(tabOptions => tabOptions.stack?.id == tabId)?.stack?.options?.bottomTab?.text;

      tabTitle && Navigation.mergeOptions(tabId, {
        bottomTab: {
          text: tabTitle,
        },
      });
    }, []);

    useAppState({onForeground}); // useAppState is simple hook which uses react-native AppState listener

    return (
      <Component {...props} />
    );
  }

  Wrapper.displayName = `BottomTabNameCorrector(${
    Component.displayName || Component.name
  })`;

  return isIos ? Wrapper : Component; // disabled for android
}

Usage: Navigation.registerComponent(Pages.menu.name, BottomTabNameCorrector(Tabs.menu.id, Menu));

+1

any workarounds ?

Happening for me as well on iPad (iPadOS 15.4)

• react-native: 0.66.1
• react-native-navigation: 7.25.1

@13thdeus Hi. I'm trying to implement your workaround, but I can't figure out how did you get bottomTabsLayout. How can I import it?

@13thdeus Hi. I'm trying to implement your workaround, but I can't figure out how did you get bottomTabsLayout. How can I import it?

It is an objct you've passed to Navigation.setRoot(bottomTabsLayout)

UPD: sorry in my case it is lools like this:

export const getTabsRootLayout = () => {
  return {
    root: {
      bottomTabs: bottomTabsLayout,
    },
  };
};
...
Navigation.setRoot(getTabsRootLayout());

Let's solve it together here: https://github.com/wix/react-native-navigation/issues/7506#issuecomment-1160668701

just remove the font-weight and add a font family with a bold text the issue will be resolved plus if you had different number of tabs according to your selection 1st what you have to do is check if your tabs length is greater then 1 then used the focus query other wise you just need to add the font family
fontFamily: categoryList.length > 1? focused ?bold:font_description:bold,