[V2][iOS] SearchBar missing tint color options + can't change Cancel text color

wix / react-native-navigation

A complete native navigation solution for React Native

https://wix.github.io/react-native-navigation/

MIT License

13.04k stars 2.67k forks source link

[V2][iOS] SearchBar missing tint color options + can't change Cancel text color #4093

Closed ItsNoHax closed 4 years ago

ItsNoHax commented 6 years ago

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

file

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 commented 6 years ago

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

chrise86 commented 5 years ago

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

ericlewis commented 5 years ago

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

stale[bot] commented 5 years ago

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] commented 5 years ago

The issue has been closed for inactivity.

brenwell commented 5 years ago

Can this be reopened that would be awesome!! Thanks

kgaspar commented 5 years ago

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

jjbeach commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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;