react-native-screens icon indicating copy to clipboard operation
react-native-screens copied to clipboard

Draft: fix(iOS): Reorder back button setup logic so iOS renders it correctly when displayMode=minimal

Open kmichalikk opened this issue 3 months ago • 1 comments

Description

Partially fixes #2991. Unfortunately, not all cases are covered; see below.

When navigating from screen with headerShown: false to a screen that has a back button with displayMode=minimal, the width of the button appears to be the same as if it was meant for the first screen, with space allocated for a label that is not visible.

Changes

Simply moving the line that updates the displayMode after the rest of back button's setup code, solves the problem for apps which use displayMode=minimal.

Before

https://github.com/user-attachments/assets/d9abc075-ba47-44d9-a350-78f7199b64cc

After

https://github.com/user-attachments/assets/149044b3-572b-451c-bdbb-a5a5331e9190

What still needs fixing

When mixing headerShown=false, displayMode=default and displayMode=minimal, the screen with displayMode=minimal still doesn't work. For now, please use workarounds suggested by the community in #2991.

https://github.com/user-attachments/assets/68a864f7-a8f1-4567-8df7-d2de27e5d282

Testing

Use Test2991, change headerShown, and headerBackButtonDisplayMode. For changes to take effect, it's good to close and reopen the app on the phone.

kmichalikk avatar Sep 10 '25 06:09 kmichalikk

It looked fine-ish until I tried the other way around, from first to third, to first, to second. Now second is always minimal. I'd say it's not an improvement then. Converting it to Draft.

kmichalikk avatar Sep 10 '25 09:09 kmichalikk