feat: add activeFontStyle prop (#88)

Author: Naturalclar

example/App.js

@@ -23,23 +23,19 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
           <Text style={styles.text}>Segmented controls can have values</Text>
           <SegmentedControl values={['One', 'Two']} />
         </View>
-
         <View style={styles.segmentSection}>
           <SegmentedControl values={['One', 'Two', 'Three', 'Four', 'Five']} />
         </View>
-
         <View style={styles.segmentSection}>
           <Text style={styles.text}>
             Segmented controls can have pre-selected values
           </Text>
           <SegmentedControl values={['One', 'Two']} selectedIndex={0} />
         </View>
-
         <View style={styles.segmentSection}>
           <Text style={styles.text}>Segmented controls can be momentary</Text>
           <SegmentedControl values={['One', 'Two']} momentary={true} />
         </View>
-
         <View style={styles.segmentSection}>
           <Text style={styles.text}>Segmented controls can be disabled</Text>
           <SegmentedControl
@@ -48,28 +44,25 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
             selectedIndex={1}
           />
         </View>
-
         <View style={styles.segmentContainer}>
           <Text style={styles.text}>Custom colors can be provided</Text>
           <SegmentedControl
             tintColor="#ff0000"
             values={['One', 'Two', 'Three', 'Four']}
             selectedIndex={0}
             backgroundColor="#0000ff"
-            activeTextColor="white"
           />
         </View>
         <View style={styles.segmentContainer}>
           <SegmentedControl
             tintColor="#00ff00"
             values={['One', 'Two', 'Three']}
             selectedIndex={1}
-            activeTextColor="black"
           />
         </View>
         <View style={styles.segmentSection}>
           <SegmentedControl
-            textColor="#ff00ff"
+            fontStyle={{color: '#ff00ff'}}
             values={['One', 'Two']}
             selectedIndex={1}
           />
@@ -82,16 +75,18 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
             <SegmentedControl
               values={['One', 'Two']}
               style={{height: 80}}
-              fontSize={32}
+              fontStyle={styles.fontStyle}
             />
           </View>
           <SegmentedControl
             values={['One', 'Two']}
+            tintColor="red"
             style={{height: 80}}
-            fontSize={32}
-            textColor="blue"
-            tintColor="green"
-            activeTextColor="red"
+            fontStyle={{
+              fontFamily: 'Optima',
+              fontSize: 32,
+            }}
+            activeFontStyle={styles.activeFontStyle}
           />
         </View>
         <View>
@@ -141,4 +136,13 @@ const styles = StyleSheet.create({
   container: {
     paddingTop: 80,
   },
+  fontStyle: {
+    fontSize: 32,
+    fontFamily: 'serif',
+  },
+  activeFontStyle: {
+    fontSize: 40,
+    fontFamily: 'Optima-Bold',
+    color: 'blue',
+  },
 });

example/ios/Podfile

@@ -76,6 +76,7 @@ target 'example' do
   pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
   pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  
 
   target 'exampleTests' do
     inherit! :complete

example/ios/Podfile.lock

@@ -457,6 +457,6 @@ SPEC CHECKSUMS:
   Yoga: 3ebccbdd559724312790e7742142d062476b698e
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 56c2537f71f3f02200d6918c542a8e89a0b422fa
+PODFILE CHECKSUM: 79ca0d949f09a7c2ff51fed03be24f2aa963d8da
 
-COCOAPODS: 1.9.1
+COCOAPODS: 1.8.4

index.d.ts

@@ -15,6 +15,21 @@ export interface NativeSegmentedControlIOSChangeEvent extends TargetedEvent {
   selectedSegmentIndex: number;
 }
 
+export type FontStyle = {
+  /**
+   * Font Color of Segmented Control when Active
+   */
+  color?: string;
+  /**
+   * Font Size of Segmented Control when Active
+   */
+  fontSize?: number;
+  /**
+   * Font Family of the Segmented Control when Active
+   */
+  fontFamily?: string;
+};
+
 export interface SegmentedControlProps extends ViewProps {
   /**
    * If false the user won't be able to interact with the control. Default value is true.
@@ -51,19 +66,7 @@ export interface SegmentedControlProps extends ViewProps {
   tintColor?: string;
 
   /**
-   * (iOS 13 only)
-   * Text color of the control.
-   */
-  textColor?: string;
-
-  /**
-   * (iOS 13 only)
-   * Text color of the active control.
-   */
-  activeTextColor?: string;
-
-  /**
-   * (iOS 13 only)
+   * (iOS 13+ only)
    * Background color of the control.
    */
   backgroundColor?: string;
@@ -74,27 +77,18 @@ export interface SegmentedControlProps extends ViewProps {
   values?: string[];
 
   /**
-   * (iOS 13 only)
+   * (iOS 13+ only)
    * Overrides the control's appearance irrespective of the OS theme
    */
   appearance?: 'dark' | 'light';
   /**
    * Font style properties of the Segmented Control
    */
-  fontStyle?: {
-    /**
-   * Font Size of Segmented Control
+  fontStyle?: FontStyle;
+  /**
+   * Active Font style properties of the Segmented Control
    */
-    fontSize?: number;
-    /**
-     * Font Family of the Segmented Control when idle/normal
-     */
-    fontFamilyIdle?: string;
-    /**
-     * Font Family of the Segmented Control when selected
-     */
-    fontFamilySelected?: string;
-  }
+  activeFontStyle?: FontStyle;
 }
 
 /**

ios/RNCSegmentedControl.h

@@ -6,12 +6,10 @@
  */
 
 #import <UIKit/UIKit.h>
-
 #import <React/RCTComponent.h>
 
 @interface RNCSegmentedControl : UISegmentedControl
-@property (nonatomic, copy) NSMutableDictionary *attributes;
-@property (nonatomic, assign) NSInteger selectedIndex;
-@property (nonatomic, copy) RCTBubblingEventBlock onChange;
+@property(nonatomic, assign) NSInteger selectedIndex;
+@property(nonatomic, copy) RCTBubblingEventBlock onChange;
 
 @end

ios/RNCSegmentedControl.m

@@ -13,101 +13,78 @@
 
 @implementation RNCSegmentedControl
 
-- (instancetype)initWithFrame:(CGRect)frame
-{
+- (instancetype)initWithFrame:(CGRect)frame {
   if ((self = [super initWithFrame:frame])) {
     _selectedIndex = self.selectedSegmentIndex;
-    [self addTarget:self action:@selector(didChange)
-              forControlEvents:UIControlEventValueChanged];
-      _attributes = [[NSMutableDictionary alloc] init];
+    [self addTarget:self
+                  action:@selector(didChange)
+        forControlEvents:UIControlEventValueChanged];
   }
   return self;
 }
 
-- (void)setValues:(NSArray<NSString *> *)values
-{
+- (void)setValues:(NSArray<NSString *> *)values {
   [self removeAllSegments];
   for (NSString *value in values) {
-    [self insertSegmentWithTitle:value atIndex:self.numberOfSegments animated:NO];
+    [self insertSegmentWithTitle:value
+                         atIndex:self.numberOfSegments
+                        animated:NO];
   }
   super.selectedSegmentIndex = _selectedIndex;
 }
 
-- (void)setSelectedIndex:(NSInteger)selectedIndex
-{
+- (void)setSelectedIndex:(NSInteger)selectedIndex {
   _selectedIndex = 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, *)) {
-        [_attributes setObject: textColor forKey:NSForegroundColorAttributeName];
-        [self setTitleTextAttributes:_attributes
-                          forState:UIControlStateNormal];
-    }
-    #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, *)) {
-      [_attributes setObject: textColor forKey:NSForegroundColorAttributeName];
-      [self setTitleTextAttributes:_attributes
-                  forState:UIControlStateSelected];
-    }
-    #endif
+- (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)setTintColor:(UIColor *)tintColor
-{
+- (void)setTintColor:(UIColor *)tintColor {
   [super setTintColor:tintColor];
-#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
+#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];
-    [_attributes setObject: tintColor forKey:NSForegroundColorAttributeName];
-    [self setTitleTextAttributes:_attributes
-                  forState:UIControlStateNormal];
+    NSDictionary *attributes = [NSDictionary
+        dictionaryWithObjectsAndKeys:tintColor, NSForegroundColorAttributeName,
+                                     nil];
+    NSDictionary *activeAttributes = [NSDictionary
+        dictionaryWithObjectsAndKeys:UIColor.labelColor,
+                                     NSForegroundColorAttributeName, nil];
+    [self setTitleTextAttributes:attributes forState:UIControlStateNormal];
+    [self setTitleTextAttributes:activeAttributes
+                        forState:UIControlStateSelected];
   }
 #endif
 }
 
-- (void)didChange
-{
+- (void)didChange {
   _selectedIndex = self.selectedSegmentIndex;
   if (_onChange) {
     _onChange(@{
-      @"value": [self titleForSegmentAtIndex:_selectedIndex],
-      @"selectedSegmentIndex": @(_selectedIndex)
+      @"value" : [self titleForSegmentAtIndex:_selectedIndex],
+      @"selectedSegmentIndex" : @(_selectedIndex)
     });
   }
 }
 
-- (void)setAppearance:(NSString *)appearanceString
-{
-#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
+- (void)setAppearance:(NSString *)appearanceString {
+#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) &&      \
     __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
   if (@available(iOS 13.0, *)) {
-      if ([appearanceString  isEqual: @"dark"]) {
-          [self setOverrideUserInterfaceStyle:UIUserInterfaceStyleDark];
-      } else if ([appearanceString  isEqual: @"light"]) {
-          [self setOverrideUserInterfaceStyle:UIUserInterfaceStyleLight];
-      }
+    if ([appearanceString isEqual:@"dark"]) {
+      [self setOverrideUserInterfaceStyle:UIUserInterfaceStyleDark];
+    } else if ([appearanceString isEqual:@"light"]) {
+      [self setOverrideUserInterfaceStyle:UIUserInterfaceStyleLight];
+    }
   }
 #endif
 }