headerTitleAlign set to "center" is broken on Android 4.0.0-beta.14

[itsramiel]

Description

Hi,

I am using react-native-screens 4.0.0-beta.14 and I would like to center my title, however the title is not centered but instead left aligned in a weird way. Can be always reproduced within the example of this repo:

Screen.Recording.2024-10-22.at.9.01.48.PM.mov

Steps to reproduce

Either have a Navigation with headerTitleAlign set to center or clone my fork, run the example app, and follow the video

Snack or a link to a repository

https://github.com/itsramiel/react-native-screens/tree/chore/reproduce

Screens version

4.0.0-beta.14

React Native version

0.74.5

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[alduzy]

@itsramiel Thank you for reporting the issue. Unfortunately, I was unable to replicate it in either our repository or in your fork. Can you double-check it? Make sure you don't have any uncommited changes that may be causing this.

[itsramiel]

Hey @alduzy Thanks for the reply!!

I am sure I have no uncommitted changes. Actually I encountered it originally in project using react navigation and rn screens beta, then I reproduced in this repo.

I did some extra digging, thinking maybe it only happens on certain api levels? Well, turns out yes.

I am developing on android api 28 emulator and that's where the issue started.
Then I tested on two other emulators, Api 31, 34 and it doesnt happen there.

So maybe this bug is for a specific api level or range of levels?

Here is a video of my app testing across the 3 api levels. The buggy one, 28, is in the middle

Screen.Recording.2024-10-23.at.6.mp4

[alduzy]

@itsramiel Now that's a clue, thanks for investigating it! I can confirm the issue is reproducible on Android APIs <= 29.