From e8f577e541815bfd8adebdf14f70c9e4205f8e4e Mon Sep 17 00:00:00 2001
From: Jesse Katsumata <jesse.katsumata@gmail.com>
Date: Mon, 6 Jan 2020 22:17:32 -0800
Subject: [PATCH] feat: add custom color for iOS13 segmented control (#27643)

Summary:
Addresses Issue from https://github.com/react-native-community/react-native-segmented-control/issues/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: https://github.com/facebook/react-native/pull/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
---
 .../RCTSegmentedControlNativeComponent.js     |  2 ++
 React/Views/RCTSegmentedControl.m             | 21 +++++++++++++++++++
 React/Views/RCTSegmentedControlManager.m      |  2 ++
 .../SegmentedControlManagerDelegate.java      |  6 ++++++
 .../SegmentedControlManagerInterface.java     |  2 ++
 5 files changed, 33 insertions(+)

diff --git a/Libraries/Components/SegmentedControlIOS/RCTSegmentedControlNativeComponent.js b/Libraries/Components/SegmentedControlIOS/RCTSegmentedControlNativeComponent.js
index 405ab500acc..8923582c394 100644
--- a/Libraries/Components/SegmentedControlIOS/RCTSegmentedControlNativeComponent.js
+++ b/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
diff --git a/React/Views/RCTSegmentedControl.m b/React/Views/RCTSegmentedControl.m
index 5df69e71468..6c1f1b9f47a 100644
--- a/React/Views/RCTSegmentedControl.m
+++ b/React/Views/RCTSegmentedControl.m
@@ -39,6 +39,27 @@
   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];
diff --git a/React/Views/RCTSegmentedControlManager.m b/React/Views/RCTSegmentedControlManager.m
index 8b3573ab485..a5e921d3c1e 100644
--- a/React/Views/RCTSegmentedControlManager.m
+++ b/React/Views/RCTSegmentedControlManager.m
@@ -23,6 +23,8 @@ RCT_EXPORT_MODULE()
 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)
diff --git a/ReactAndroid/src/main/java/com/facebook/react/viewmanagers/SegmentedControlManagerDelegate.java b/ReactAndroid/src/main/java/com/facebook/react/viewmanagers/SegmentedControlManagerDelegate.java
index e3c7505a86b..f79e5189d97 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/viewmanagers/SegmentedControlManagerDelegate.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/viewmanagers/SegmentedControlManagerDelegate.java
@@ -35,6 +35,12 @@ public class SegmentedControlManagerDelegate<T extends View, U extends BaseViewM
       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;
diff --git a/ReactAndroid/src/main/java/com/facebook/react/viewmanagers/SegmentedControlManagerInterface.java b/ReactAndroid/src/main/java/com/facebook/react/viewmanagers/SegmentedControlManagerInterface.java
index e6c50357616..0ee9d568509 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/viewmanagers/SegmentedControlManagerInterface.java
+++ b/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);
 }