fix: change the search icon's color according to search bar's state

[Cancercookie]

Description

In our project we have the following configuration:

{
  barTintColor: theme.neutral100w,
  hideWhenScrolling: false,
  tintColor: "white",
  headerIconColor: "white",
  hideNavigationBar: true,
  placeholder: LABELS.SEARCH_PLACEHOLDER,
  hintTextColor: "gray",
  shouldShowHintSearchIcon: false,
}

that on Android gives us:

what happens is that because of headerIconColor: "white" we get this result on open:

What happens is that headerIconColor is applied to the clear icon too, making it blend with the background.

I've tried implementing a solution to set the same color as hintTextColor in our codebase using onOpen and onClose events but it was unstable.

Changes

It makes sense to me that the color of the clear icon should follow hintTextColor when search is opened. What I propose is setting the color once when we land on the page and then setting it again according to search state each time setToolbarElementsVisibility gets called

Screenshots / GIFs

The end result:

Test code and steps to reproduce

• Use the previous configuration as values for headerSearchBarOptions in any Screen.
• Open/close search field

Checklist

• [ ] Included code example that can be used to test this change
• [ ] Updated TS types
• [ ] Updated documentation:
  • [ ] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
  • [ ] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
  • [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
  • [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
• [ ] Ensured that CI passes