react-native-screens
react-native-screens copied to clipboard
fix: change the search icon's color according to search bar's state
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