feat: add custom color for iOS13 segmented control (#27643)

Summary:
Addresses Issue from react-native-segmented-control/segmented-control#16

SegmentedControlIOS changed how it looks in iOS13.

This PR allows allows more customization of SegmentedControl for iOS13.

## Changelog

[iOS] [Added] - add textColor and backgroundColor props for iOS >=13
Pull Request resolved: #27643

Test Plan:
| Before | After |
| --- | --- |
| <img src="https://user-images.githubusercontent.com/6936373/71608475-e68ff580-2bc4-11ea-9fe4-b85b99130356.png" width="320" /> | <img src="https://user-images.githubusercontent.com/6936373/71608757-dc6ef680-2bc6-11ea-85be-aa31f25ecf36.png" width="320" /> |

Differential Revision: D19296783

Pulled By: cpojer

fbshipit-source-id: 81a31b2d5ae3085a6fd1874e7d72e75be4c51318

Libraries/Components/SegmentedControlIOS/RCTSegmentedControlNativeComponent.js

@@ -33,6 +33,8 @@ type NativeProps = $ReadOnly<{|
   selectedIndex?: WithDefault<Int32, 0>,
   enabled?: WithDefault<boolean, true>,
   tintColor?: ?ColorValue,
+  textColor?: ?ColorValue,
+  backgroundColor?: ?ColorValue,
   momentary?: WithDefault<boolean, false>,
 
   // Events

React/Views/RCTSegmentedControl.m

@@ -39,6 +39,27 @@ - (void)setSelectedIndex:(NSInteger)selectedIndex
   super.selectedSegmentIndex = selectedIndex;
 }
 
+- (void)setBackgroundColor:(UIColor *)backgroundColor
+{
+    #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
+        __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
+    if (@available(iOS 13.0, *)) {
+      [super setBackgroundColor:backgroundColor];
+    }
+    #endif
+}
+
+- (void)setTextColor:(UIColor *)textColor
+{
+    #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
+        __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
+    if (@available(iOS 13.0, *)) {
+      [self setTitleTextAttributes:@{NSForegroundColorAttributeName: textColor}
+                  forState:UIControlStateNormal];
+    }
+    #endif
+}
+
 - (void)setTintColor:(UIColor *)tintColor
 {
   [super setTintColor:tintColor];

React/Views/RCTSegmentedControlManager.m

@@ -23,6 +23,8 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(values, NSArray<NSString *>)
 RCT_EXPORT_VIEW_PROPERTY(selectedIndex, NSInteger)
 RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(backgroundColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(textColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(momentary, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(enabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)

ReactAndroid/src/main/java/com/facebook/react/viewmanagers/SegmentedControlManagerDelegate.java

@@ -35,6 +35,12 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "tintColor":
         mViewManager.setTintColor(view, value == null ? null : ((Double) value).intValue());
         break;
+      case "textColor":
+        mViewManager.setTextColor(view, value == null ? null : ((Double) value).intValue());
+        break;
+      case "backgroundColor":
+        mViewManager.setBackgroundColor(view, value == null ? null : ((Double) value).intValue());
+        break;
       case "momentary":
         mViewManager.setMomentary(view, value == null ? false : (boolean) value);
         break;

ReactAndroid/src/main/java/com/facebook/react/viewmanagers/SegmentedControlManagerInterface.java

@@ -18,5 +18,7 @@ public interface SegmentedControlManagerInterface<T extends View> {
   void setSelectedIndex(T view, int value);
   void setEnabled(T view, boolean value);
   void setTintColor(T view, @Nullable Integer value);
+  void setTextColor(T view, @Nullable Integer value);
+  void setBackgroundColor(T view, @Nullable Integer value);
   void setMomentary(T view, boolean value);
 }