Merge pull request #50 from react-native-community/@vonovak/add-selectedTextColor

add active text color support

Author: Naturalclar

README.md

@@ -112,6 +112,11 @@ type SegmentedControlIOSProps = $ReadOnly<{|
    * Text color of the control.
    */
   textColor?: ?string,
+  /**
+   * Text color of the control when selected.
+   * NOTE: this prop will only work for iOS >= 13
+   */
+  activeTextColor?: ?string,
   /**
    * (For iOS >= 13)
    * Background color of the control.

ios/RNCSegmentedControl.m

@@ -60,15 +60,24 @@ - (void)setTextColor:(UIColor *)textColor
     #endif
 }
 
+- (void)setActiveTextColor:(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:UIControlStateSelected];
+    }
+    #endif
+}
+
 - (void)setTintColor:(UIColor *)tintColor
 {
   [super setTintColor:tintColor];
 #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 setSelectedSegmentTintColor:tintColor];
-    [self setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor whiteColor]}
-                        forState:UIControlStateSelected];
     [self setTitleTextAttributes:@{NSForegroundColorAttributeName: tintColor}
                          forState:UIControlStateNormal];
   }

ios/RNCSegmentedControlManager.m

@@ -25,6 +25,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(backgroundColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(textColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(activeTextColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(momentary, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(enabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)

js/RNCSegmentedControlNativeComponent.js

@@ -22,7 +22,7 @@ type Event = SyntheticEvent<
   |}>,
 >;
 
-type SegmentedControlIOSProps = $ReadOnly<{|
+export type SegmentedControlIOSProps = $ReadOnly<{|
   ...ViewProps,
   /**
    * The labels for the control's segment buttons, in order.
@@ -52,17 +52,20 @@ type SegmentedControlIOSProps = $ReadOnly<{|
    */
   tintColor?: ?string,
   /**
-   *
    * Text color of the control.
    * NOTE: this prop will only work for iOS >= 13
    */
   textColor?: ?string,
+  /**
+   * Text color of the control when selected.
+   * NOTE: this prop will only work for iOS >= 13
+   */
+  activeTextColor?: ?string,
   /**
    * Background color of the control.
    * NOTE: this prop will only work for iOS >= 13
    */
   backgroundColor?: ?string,
-  /**
   /**
    * If true, then selecting a segment won't persist visually.
    * The `onValueChange` callback will still work as expected.

js/SegmentedControlIOS.ios.js

@@ -16,7 +16,9 @@ import {StyleSheet} from 'react-native';
 import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 
-import RNCSegmentedControlNativeComponent from './RNCSegmentedControlNativeComponent';
+import RNCSegmentedControlNativeComponent, {
+  type SegmentedControlIOSProps,
+} from './RNCSegmentedControlNativeComponent';
 
 type Event = SyntheticEvent<
   $ReadOnly<{|
@@ -25,42 +27,6 @@ type Event = SyntheticEvent<
   |}>,
 >;
 
-type SegmentedControlIOSProps = $ReadOnly<{|
-  ...ViewProps,
-  /**
-   * The labels for the control's segment buttons, in order.
-   */
-  values?: $ReadOnlyArray<string>,
-  /**
-   * The index in `props.values` of the segment to be (pre)selected.
-   */
-  selectedIndex?: ?number,
-  /**
-   * Callback that is called when the user taps a segment;
-   * passes the segment's value as an argument
-   */
-  onValueChange?: ?(value: number) => mixed,
-  /**
-   * Callback that is called when the user taps a segment;
-   * passes the event as an argument
-   */
-  onChange?: ?(event: Event) => mixed,
-  /**
-   * If false the user won't be able to interact with the control.
-   * Default value is true.
-   */
-  enabled?: boolean,
-  /**
-   * Accent color of the control.
-   */
-  tintColor?: ?string,
-  /**
-   * If true, then selecting a segment won't persist visually.
-   * The `onValueChange` callback will still work as expected.
-   */
-  momentary?: ?boolean,
-|}>;
-
 type Props = $ReadOnly<{|
   ...SegmentedControlIOSProps,
   forwardedRef: ?React.Ref<typeof RNCSegmentedControlNativeComponent>,
@@ -118,8 +84,10 @@ const styles = StyleSheet.create({
   },
 });
 
-// $FlowFixMe
-const SegmentedControlIOSWithRef = React.forwardRef(
+const SegmentedControlIOSWithRef = React.forwardRef<
+  SegmentedControlIOSProps,
+  RNCSegmentedControlNativeComponent,
+>(
   (
     props: SegmentedControlIOSProps,
     forwardedRef: ?React.Ref<typeof RNCSegmentedControlNativeComponent>,