Wrong headerTitle layout when pushing screen with keyboard on new arch

[janicduplessis]

Description

When pushing a new screen that has headerTitle, headerRight and an autoFocus TextInput the layout of the headerTitle is incorrect the 2nd time the screen is opened.

Workaround:

Disable view recycling in RNSScreenStackHeaderSubview

// RNSScreenStackHeaderSubview.mm

+ (BOOL)shouldBeRecycled
{
  return NO;
}

Not sure if it would be an acceptable fix, but disabling view recycling does fix the problem.

Steps to reproduce

Using this code in FabricExample app HeaderOptions.tsx

Note: If using iOS simulator make sure to toggle the software keyboard.

• Go to "Header Options" example
• Click the "Header large item" button
• Click "Go to next screen"
• See that header title layout is correct
• Click on the navbar back icon
• Click "Go to next screen"
• See that the header title layout is not incorrect and offset to the right

First open:

2nd open:

Weirdly this doesn't repro if no headerRight is set or if the keyboard is not opened.

Snack or a link to a repository

https://github.com/janicduplessis/react-native-screens/tree/%40janic/header-bug-2

Screens version

main@e5a6220

React Native version

0.74

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[tboba]

Hi @janicduplessis, thanks for creating this issue!
@alduzy Could you check if PR #2248 that you've created fixes this issue? I believe that these layout things might be similar.

[alduzy]

@janicduplessis I can confirm it is reproducible even without opening the keyboard. @tboba Unfortunately the PR you mentioned does not fix this issue. I'll take a look at it