feat: add backgroundColor and Text Color

Author: Naturalclar

example/App.js

@@ -60,15 +60,23 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
             tintColor="#ff0000"
             values={['One', 'Two', 'Three', 'Four']}
             selectedIndex={0}
+            backgroundColor="#0000ff"
           />
         </View>
-        <View style={{marginBottom: 25}}>
+        <View style={{marginBottom: 10}}>
           <SegmentedControlIOS
             tintColor="#00ff00"
             values={['One', 'Two', 'Three']}
             selectedIndex={1}
           />
         </View>
+        <View style={{marginBottom: 25}}>
+          <SegmentedControlIOS
+            textColor="#ff00ff"
+            values={['One', 'Two']}
+            selectedIndex={1}
+          />
+        </View>
 
         <View>
           <Text style={styles.text}>Custom colors can be provided</Text>

ios/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];
@@ -49,7 +70,7 @@ - (void)setTintColor:(UIColor *)tintColor
     [self setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor whiteColor]}
                         forState:UIControlStateSelected];
     [self setTitleTextAttributes:@{NSForegroundColorAttributeName: tintColor}
-                        forState:UIControlStateNormal];
+                         forState:UIControlStateNormal];
   }
 #endif
 }

ios/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)

js/RCTSegmentedControlNativeComponent.js

@@ -51,6 +51,16 @@ type SegmentedControlIOSProps = $ReadOnly<{|
    * Accent color of the control.
    */
   tintColor?: ?string,
+  /**
+   *
+   * Text color of the control.
+   */
+  textColor?: ?string,
+  /**
+   * Background color of the control.
+   */
+  backgroundColor?: ?string,
+  /**
   /**
    * If true, then selecting a segment won't persist visually.
    * The `onValueChange` callback will still work as expected.