How can i adjust the native Searchbar icon before headerRight elements ?

[arnelcariaga]

Description

When i set this option to display the Searchbar it's show at the end of the header but i want to show the Searchbar before the headerRight elements and not after.

headerSearchBarOptions: {
                disableBackButtonOverride: true,
                obscureBackground: false,
                hideNavigationBar: true
}

Current screen

Steps to reproduce

Expected screen

Snack or a link to a repository

https://snack.expo.dev/@arnelcariaga/c7790c

Screens version

~3.20.0

React Native version

0.71.8

Platforms

Android

JavaScript runtime

None

Workflow

Expo bare workflow

Architecture

None

Build type

None

Device

Real device

Device model

No response

Acknowledgements

Yes

[kkafar]

Hey, I do not believe it is possible with screens. I'm also moving this issue to discussions section of the repository.

[tboba]

Hi @arnelcariaga! As @kkafar said, for now it's not possible to do such thing in react-native-screens 🥲
That's because for the Search Bar we're using Options menu from Android API and that's the only type of option we're using on the native side - when you're using headerRight option we're just using gravity for the header subviews, so everything you're putting to the headerRight option is going behind the search bar icon, because this icon goes to the rightmost position of the header view.

We're planning to introduce an API for managing and adding more items to the options menu, but it's not our priority for now.
I'll close this discussion, but in case you've got any questions, don't hesitate to ask them!