iOS 14.2: Back Button vertically misaligned

[mrousavy]

🐛 Bug Report

Since iOS 14.2, the back button is somewhat weirdly aligned (vertically).

iPhone without notch, iOS 14.1:

iPhone with notch, iOS 14.2:

To Reproduce

1. Create screen with backbutton
2. Run on iOS 14.2

Your Environment

• React Native Navigation version: master
• React Native version: 0.63.3
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Device & Simulator, iOS 14.2

[arcziby]

Any information about coming fixes?

[yogevbd]

Couldn't reproduce it on an iPhone 12 Pro running iOS 14.2. Could you please try to reproduce it in the playground app?

[arcziby]

after upgrade to 7.7.0 I still have wrong look

[pontusstjerna]

For us, it was the previous view missing a back button options (the root view of the stack in our case). When back button options was set for that view as well, the alignment was fixed.

My wild guess is that it is related to UINavigationItem *previousNavigationItem = previousViewControllerInStack.navigationItem; and the options are not applied to the current navigation item, but I am not really an Objective-C developer.

[arcziby]

any updates?

[florinvasilevilsan]

Any updates?

[mateioprea]

Can someone who's having this issue, fork the repo and provide a reproduction case in the playground app?

After that someone can look into it.

[florinvasilevilsan]

Iphone12, IOS 14.4

I managed to get this sorted in my case.

I can reproduce the issue in my project by using a stack that has no topBar.title.text defined. The initial screen that this stack is loading, as you can see in the image below, has the topBar.title.text set as empty string nor back button defined (I believe I added this in the past to solve another react-native-navigation issue, which I cannot remember atm). The entire topBar is hidden also.

// SearchScreen

Once I tap an item in the list above, the backButton title vertical alignment is top aligned, rather than middle. I am setting the topBar.backButton object for this screen , which has a title.

// CategoryListingScreen

// topBar options passed to the SearchScreen.

visible: false,
animate: false,
height: 0,
title: {
    text: 'Search',
    alignment: 'center',
},

// topBar options passed to the CategoryListingScreen.

backButton: {
    title: name,
    showTitle: true,
    visible: true,
},
title: {
    alignment: 'center',
    color: 'transparent',
},

I managed to fix the issue above by assigning a title to the topBar.title.text (does not matter what that is in my case(cause topBar is hidden on that screen), as long as you provide a non-empty string value).

So that's all. Hope this helps anyone who's having an issue.

[phuongwd]

Couldn't reproduce it on an iPhone 12 Pro running iOS 14.2. Could you please try to reproduce it in the playground app?

@yogevbd This issue is happening on real devices. I tested on iPhone X - 14.5 / 14.6

[arcziby]

+1