React-native-navigation: iOS TopBar title font weight changes on push/pop

Created on 15 May 2019 · 17Comments · Source: wix/react-native-navigation

Issue Description

2019-05-15 20 30 45

Steps to Reproduce / Code Snippets / Screenshots

Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'navigation.app',
              options: {
                topBar: {
                  visible: true,
                  title: {
                    text: 'Your Recipes',
                  },
                  searchBar: true,
                  searchBarPlaceholder: "Search for Recipes",
                  rightButtons: [
                    {
                      id: "add-recipe",
                      systemItem: "add"
                    }
                  ]
                },
              }
            }

          }
        ]
      }
    }
  })

After using Navigation.push() and Navigation.pop() the title font weight changes and stays like this.

Environment

React Native Navigation version: Tested on latest master branch
React Native version: 0.59.5
Platform(s) (iOS, Android, or both?): iOS
Device info (Simulator/Device? OS version? Debug/Release?): Both Simulator + physical device. Both debug and release builds.

🏚 stale

Source

Nickforall

👍3

Most helpful comment

For everyone experiencing this:
Hotfixed it for myself by editing this line:

https://github.com/wix/react-native-navigation/blob/b0c8113243de2043b98442dd485c04b0422aa213/lib/ios/RNNFontAttributesCreator.m#L18

- titleTextAttributes[NSFontAttributeName] = [UIFont systemFontOfSize:[fontSize floatValue]];
+ titleTextAttributes[NSFontAttributeName] = [UIFont boldSystemFontOfSize:[fontSize floatValue]];

Nickforall on 17 May 2019

👍2

All 17 comments

Yeah, this has been around for some time now. I think this occurs on both platform.

jinshin1013 on 16 May 2019

I have the same problem, huge bummer

mpiannucci on 16 May 2019

Same here

Crisis2010 on 17 May 2019

I can reproduce this on
"react-native": "0.59.8", "react-native-navigation": "2.18.5"

MakhouT on 17 May 2019

For everyone experiencing this:
Hotfixed it for myself by editing this line:

https://github.com/wix/react-native-navigation/blob/b0c8113243de2043b98442dd485c04b0422aa213/lib/ios/RNNFontAttributesCreator.m#L18

- titleTextAttributes[NSFontAttributeName] = [UIFont systemFontOfSize:[fontSize floatValue]];
+ titleTextAttributes[NSFontAttributeName] = [UIFont boldSystemFontOfSize:[fontSize floatValue]];

Nickforall on 17 May 2019

👍2

Create a PR for it, everyone can benefit from it :)

MakhouT on 17 May 2019

I don't think it's exactly expected behavior to always be bold, and this also only works if you don't use a custom font. If it is I'd be happy to create a PR :)

Nickforall on 17 May 2019

I think it should inherit from the user set in options, however if user doesn't specify, it should be default to bold? The fact that it's bold initially suggest to me that it should default to bold.

jinshin1013 on 18 May 2019

There is no configurable option as of now.

Nickforall on 18 May 2019

Still an issue on react-native-navigation version 2.21.0

piuholo on 4 Jun 2019

For everyone experiencing this:
Hotfixed it for myself by editing this line:

https://github.com/wix/react-native-navigation/blob/b0c8113243de2043b98442dd485c04b0422aa213/lib/ios/RNNFontAttributesCreator.m#L18
- titleTextAttributes[NSFontAttributeName] = [UIFont systemFontOfSize:[fontSize floatValue]];
+ titleTextAttributes[NSFontAttributeName] = [UIFont boldSystemFontOfSize:[fontSize floatValue]];

Used https://www.npmjs.com/package/patch-package along with this one

- titleTextAttributes[NSFontAttributeName] = [UIFont systemFontOfSize:[fontSize floatValue]];
+ titleTextAttributes[NSFontAttributeName] = [UIFont systemFontOfSize:[fontSize floatValue] weight:UIFontWeightBold];

michaelfreund on 17 Jun 2019

👍1

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.