React-native-navigation: [V2][iOS] SearchBar missing tint color options + can't change Cancel text color

[ItsNoHax]

Issue Description

• Using the native SearchBar I can not change the color of the Search... background. In my app it has become Dark Blue and I don't know where to change it. Same goes for the Cancel text next to it.

Steps to Reproduce / Code Snippets / Screenshots

---

Environment

• React Native Navigation version: 2572
• React Native version: 0.56
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Device + Simulator

[ericlewis]

https://github.com/wix/react-native-navigation/pull/4055

[chrise86]

@ericlewis I may be wrong but it looks like your PR sets tintColor, not barTintColor which would change the background.

[ericlewis]

@chrise86 tintColor is correct when dealing with UISearchController. I tested this in my own application already.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[brenwell]

Can this be reopened that would be awesome!! Thanks

[kgaspar]

Have the same problem, has anyone found a solution for this?

[jjbeach]

@kgaspar i had to get under the ol' hood and tweak it myself:
Just after line 49 in the _UiViewController+RNNOptions.m_ file (located in ReactNativeNavigation.xcodeproj), I added
search.searchBar.tintColor = [UIColor colorWithRed:0.59 green:0.59 blue:0.59 alpha:1.0];
and was able to successfully alter the color of the cancel button

[prathammehta]

If you don't want to mess with the code of RNN you could just add this line of code to your AppDelegate.m file in the didFinishLaunchingWithOptions method:

[[UISearchBar appearanceWhenContainedInInstancesOfClasses:@[[UIViewController class]]] setTintColor:[UIColor
                                                                                                       colorWithRed:245.0/255.0
                                                                                                       green:166.0/255.0
                                                                                                       blue:34.0/255.0
                                                                                                       alpha:1.0]];

Add any UIColor you like. :)

[kgaspar]

@jjbeach Thanks for the help, I implemented the tintColor and the button looks good now. Have you managed to change the barTintColor? To change the color of the Search Bar Background. R

[kgaspar]

Hi I managed to make the Search Bar background white with this code, added under @jjbeach solution:

search.searchBar.tintColor = UIColor.whiteColor;
search.searchBar.barTintColor = UIColor.whiteColor;
UITextField *txfSearchField = [search.searchBar valueForKey:@"_searchField"];
txfSearchField.tintColor=[UIColor colorWithRed:21/255.0 green:157/255.0 blue:130/255.0 alpha:1];
txfSearchField.textColor=[UIColor colorWithRed:1 green:1 blue:1 alpha:1];
txfSearchField.backgroundColor=[UIColor whiteColor];
UIView *backgroundview= [[txfSearchField subviews]firstObject ];
backgroundview.backgroundColor=[UIColor whiteColor];

backgroundview.layer.cornerRadius = 8;
backgroundview.clipsToBounds = true;

[guyca]

@yogevbd Seeing that #4055 was abandoned, lets add the following options:

• searchBarCursorColor (maps to tintColor in native)
• searchBarTextColor
• searchBarKeyboardStyle: 'dark'|'light'

[landorid]

Are you planning to implement this feature in the future?

[arashkevich25]

Any updates ?

[3luyka]

@guyca hey, any updates on that?

[mrousavy]

Does https://github.com/wix/react-native-navigation/commit/d50e4bf62990c12318f369e077eb8414cc3e52d4 solve this issue?

[guyca]

@mrousavy Seems like the commit you've linked and @mateioprea's PR will resolve this issue. We'll probably land it some time next week.