iOS search cancel button conflicts with header right in landscape

[pmmmwh]

Description

When headerRight is used, it squishes the touchable area of the cancel button of the search bar in landscape mode. There are still a couple pixels that will trigger the button, but it's very small. This only happens if the search bar is engaged in landscape - if you start searching in portrait then rotate to landscape and cancel, or start in landscape and rotate to portrait before cancel, it will work as expected.

I didn't test headerLeft due to time, but I suspect it would be fine since the cancel button is on the right.

Steps to reproduce

1. Clone the repro repo
2. Run npm run ios
3. Rotate simulator such that it's in landscape mode
4. Interact with the search bar, the touch size of the cancel button is now wrong and very hard to trigger

Snack or a link to a repository

https://github.com/pmmmwh/rn-screens-ios-search-cancel

Screens version

4.4.0

React Native version

0.76.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[ArekChr]

I encountered the same issue with react-native-screens v4.5.0

edit: fixed in v4.11.1 👍🏼