React-native-navigation: NavBar Title font no longer applying.

[flikQ]

Issue Description

NavBar titles are not taking instructed global font - colors etc apply ok. I am attempting to apply a custom font to the titles within the navbar, there were working until recent updates of the RNN package.

Steps to Reproduce / Code Snippets / Screenshots

I have the following within Navigation.startSingleScreenApp()

navigatorStyle: {
navBarBackgroundColor: lightPurple,
navBarTextColor: 'white',
navBarTextFontFamily: 'ProximaNova-black',
},

As mentioned the colors apply ok, the typeface is no longer applying on any of the tab titles or any screens unless the font is applied direction on the push() / showModal() etc. It's infuriating as this was working ok until very recently with no changes to the overall code except and updating RNN.

Anyone else experienced this?

NB: I have also applied a navigatorStyle to the RNNTabBar in order to test if it applies it there. It does not.

Thanks.

---

Environment

• React Native Navigation version: 1.1.340
• React Native version: 0.46.4
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): All Sims & TestFlight build

[ZiedBeta]

Hi,

I am currently having the same behavior.
setting navBarTextFontFamily is not longer applying on Tab titles

• RNN version: 1.1.340
• RN version: 0.52.0
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator

[yogevbd]

We had one PR that caused unexpected behavior in styles. We reverted that PR and now everything should work fine.

[flikQ]

@yogevbd I have updated and made sure I am on latest version. the navBarTextFontFamily is still not applying in navigatorStyle within RNApp.

[alvaromb]

Same as @yogevbd.

[flikQ]

How do we reopen the issue?

[ZiedBeta]

Hi,
@flikQ @alvaromb You can use the 1.1.300 version. Working properly for me.
Update you package.json so you set RNN version to 1.1.300
and then rm -rf node_modules && npm install && react-native run-ios

[flikQ]

@ZiedBeta this worked perfectly, thanks!

[guyca]

@flikQ startSingleScreenApp doesn't accept a navigatorStyle property. Use appStyle for global style properties.

[ZiedBeta]

@guyca , As I understood, @flikQ was having an issue when defining navigatorStyle in a tab definition in tabs:

[danielang]

@guyca @yogevbd:
In RCCTitleViewHelper.m:205 it should be withPrefix:@"navBarText" instead of withPrefix:@"navBarTitle"
In RCCTitleViewHelper.m:205 it should be id fontSize = style[@"navBarTextFontSize"]; instead of id fontSize = style[@"navBarTitleFontSize"];

[JimTeva]

I followed @danielang advice and tried: navBarTitleFontSize instead of navBarTextFontSize.... it works fine lol, thanks @danielang for spoting it!

[JimTeva]

It is actually the same problem with navBarTextFontFamily --> we must use navBarTitleFontFamily

[brenwell]

The solution from @tevatahiti worked for me. Thanks!

Navigation.startTabBasedApp({
    tabs: [

        {
            label: 'Input',
            screen: 'InputScreen',
            icon: require('./img/three.png'),
            selectedIcon: require('./img/three_selected.png'), // iOS only
            title: 'Input',
        },
        {
            label: 'Home',
            screen: 'HomeScreen', // this is a registered name for a screen
            icon: require('./img/one.png'),
            selectedIcon: require('./img/one_selected.png'), // iOS only
            title: 'Home!'
        },
    ],

    appStyle: {
        navBarTitleFontFamily: 'Lato-Bold',
        navBarNoBorder: true,
    }
});