feat: allow changing fontSize (#72)

Naturalclar · web-flow · commit efebedec38f5 · 2020-04-29T23:08:15.000+09:00
diff --git a/example/App.js b/example/App.js
@@ -74,7 +74,16 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
             selectedIndex={1}
           />
         </View>
-
+        <View style={styles.segmentContainer}>
+          <Text style={styles.text}>
+            Segmented controls can have defined fontSize
+          </Text>
+          <SegmentedControl
+            values={['One', 'Two']}
+            style={{height: 80}}
+            fontSize={32}
+          />
+        </View>
         <View>
           <Text style={styles.text}>Custom colors can be provided</Text>
           <View style={styles.segmentContainer}>
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -182,7 +182,7 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
   - React-jsinspector (0.61.5)
-  - react-native-segmented-control (1.3.0):
+  - react-native-segmented-control (1.4.0):
     - React
   - React-RCTActionSheet (0.61.5):
     - React-Core/RCTActionSheetHeaders (= 0.61.5)
@@ -326,7 +326,7 @@ SPEC CHECKSUMS:
   React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
   React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
-  react-native-segmented-control: 64a281fade11306631dccd3bbeac6e55b5ab362f
+  react-native-segmented-control: 6ad7533758f4567e1e97136a67986f4167fd106a
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
   React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72
@@ -341,4 +341,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 79310af6b976c356911a8a833e9b99c3399fdda3
 
-COCOAPODS: 1.8.4
+COCOAPODS: 1.9.1
diff --git a/example/ios/example.xcodeproj/project.pbxproj b/example/ios/example.xcodeproj/project.pbxproj
@@ -161,7 +161,6 @@
 				6BE7AEF78095A785F4869399 /* Pods-exampleTests.debug.xcconfig */,
 				50618065BE0BA2D84E81F280 /* Pods-exampleTests.release.xcconfig */,
 			);
-			name = Pods;
 			path = Pods;
 			sourceTree = "<group>";
 		};
@@ -305,7 +304,7 @@
 			};
 			buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "example" */;
 			compatibilityVersion = "Xcode 3.2";
-			developmentRegion = English;
+			developmentRegion = en;
 			hasScannedForEncodings = 0;
 			knownRegions = (
 				en,
@@ -637,6 +636,7 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = example;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Debug;
@@ -656,6 +656,7 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = example;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Release;
diff --git a/example/yarn.lock b/example/yarn.lock
diff --git a/index.d.ts b/index.d.ts
@@ -78,6 +78,10 @@ export interface SegmentedControlProps extends ViewProps {
    * Overrides the control's appearance irrespective of the OS theme
    */
   appearance?: 'dark' | 'light';
+  /**
+   * Font Size of Segmented Control
+   */
+  fontSize?: number;
 }
 
 /**
diff --git a/ios/RNCSegmentedControl.h b/ios/RNCSegmentedControl.h
@@ -10,7 +10,7 @@
 #import <React/RCTComponent.h>
 
 @interface RNCSegmentedControl : UISegmentedControl
-
+@property (nonatomic, copy) NSMutableDictionary *attributes;
 @property (nonatomic, assign) NSInteger selectedIndex;
 @property (nonatomic, copy) RCTBubblingEventBlock onChange;
 
diff --git a/ios/RNCSegmentedControl.m b/ios/RNCSegmentedControl.m
@@ -19,6 +19,7 @@ - (instancetype)initWithFrame:(CGRect)frame
     _selectedIndex = self.selectedSegmentIndex;
     [self addTarget:self action:@selector(didChange)
               forControlEvents:UIControlEventValueChanged];
+      _attributes = [[NSMutableDictionary alloc] init];
   }
   return self;
 }
@@ -38,6 +39,14 @@ - (void)setSelectedIndex:(NSInteger)selectedIndex
   super.selectedSegmentIndex = selectedIndex;
 }
 
+- (void)setFontSize:(NSInteger)fontSize
+{
+  UIFont *font = [UIFont boldSystemFontOfSize: fontSize];
+    [_attributes setObject: font forKey:NSFontAttributeName];
+    [self setTitleTextAttributes:_attributes
+                                forState:UIControlStateNormal];
+}
+
 - (void)setBackgroundColor:(UIColor *)backgroundColor
 {
     #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
@@ -53,8 +62,9 @@ - (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];
+        [_attributes setObject: textColor forKey:NSForegroundColorAttributeName];
+        [self setTitleTextAttributes:_attributes
+                          forState:UIControlStateNormal];
     }
     #endif
 }
diff --git a/ios/RNCSegmentedControlManager.m b/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(fontSize, NSInteger)
 RCT_EXPORT_VIEW_PROPERTY(activeTextColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(momentary, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(enabled, BOOL)
diff --git a/js/SegmentedControl.js b/js/SegmentedControl.js
@@ -25,6 +25,7 @@ const SegmentedControl = ({
   tintColor,
   textColor,
   backgroundColor,
+  fontSize,
 }: SegmentedControlProps) => {
   const handleChange = (index: number) => {
     // mocks iOS's nativeEvent
@@ -55,6 +56,7 @@ const SegmentedControl = ({
               value={value}
               tintColor={tintColor}
               textColor={textColor}
+              fontSize={fontSize}
               activeTextColor={activeTextColor}
               onSelect={() => {
                 handleChange(index);
diff --git a/js/SegmentedControlTab.js b/js/SegmentedControlTab.js
@@ -15,6 +15,7 @@ type Props = $ReadOnly<{|
   onSelect: () => void,
   selected: boolean,
   enabled: boolean,
+  fontSize?: ?number,
 |}>;
 
 export const SegmentedControlTab = ({
@@ -25,6 +26,7 @@ export const SegmentedControlTab = ({
   tintColor,
   textColor,
   activeTextColor,
+  fontSize,
 }: Props) => {
   const getColor = () => {
     if (selected && activeTextColor) {
@@ -56,7 +58,14 @@ export const SegmentedControlTab = ({
           styles.default,
           selected && {backgroundColor: getBackgroundColor()},
         ]}>
-        <Text style={[{color}, selected && styles.activeText]}>{value}</Text>
+        <Text
+          style={[
+            {color},
+            !(fontSize == null) && {fontSize},
+            selected && styles.activeText,
+          ]}>
+          {value}
+        </Text>
       </View>
     </TouchableOpacity>
   );
diff --git a/js/types.js b/js/types.js
@@ -43,18 +43,18 @@ export type SegmentedControlProps = $ReadOnly<{|
    */
   tintColor?: ?ColorValue,
   /**
+   * (iOS 13 only)
    * Text color of the control.
-   * NOTE: this prop will only work for iOS >= 13
    */
   textColor?: ?ColorValue,
   /**
+   * (iOS 13 only)
    * Text color of the control when selected.
-   * NOTE: this prop will only work for iOS >= 13
    */
   activeTextColor?: ?ColorValue,
   /**
+   * (iOS 13 only)
    * Background color of the control.
-   * NOTE: this prop will only work for iOS >= 13
    */
   backgroundColor?: ?ColorValue,
   /**
@@ -67,4 +67,8 @@ export type SegmentedControlProps = $ReadOnly<{|
    * Overrides the control's appearance irrespective of the OS theme
    */
   appearance?: 'dark' | 'light',
+  /**
+   * FontSize of the segmented control
+   */
+  fontSize?: ?number,
 |}>;

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ - (instancetype)initWithFrame:(CGRect)frame`
`19`	`19`	`_selectedIndex = self.selectedSegmentIndex;`
`20`	`20`	`[self addTarget:self action:@selector(didChange)`
`21`	`21`	`forControlEvents:UIControlEventValueChanged];`
	`22`	`+ _attributes = [[NSMutableDictionary alloc] init];`
`22`	`23`	`}`
`23`	`24`	`return self;`
`24`	`25`	`}`
`@@ -38,6 +39,14 @@ - (void)setSelectedIndex:(NSInteger)selectedIndex`
`38`	`39`	`super.selectedSegmentIndex = selectedIndex;`
`39`	`40`	`}`
`40`	`41`
	`42`	`+- (void)setFontSize:(NSInteger)fontSize`
	`43`	`+{`
	`44`	`+ UIFont *font = [UIFont boldSystemFontOfSize: fontSize];`
	`45`	`+ [_attributes setObject: font forKey:NSFontAttributeName];`
	`46`	`+ [self setTitleTextAttributes:_attributes`
	`47`	`+ forState:UIControlStateNormal];`
	`48`	`+}`
	`49`	`+`
`41`	`50`	`- (void)setBackgroundColor:(UIColor *)backgroundColor`
`42`	`51`	`{`
`43`	`52`	`#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \`
`@@ -53,8 +62,9 @@ - (void)setTextColor:(UIColor *)textColor`
`53`	`62`	`#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \`
`54`	`63`	`__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0`
`55`	`64`	`if (@available(iOS 13.0, *)) {`
`56`		`- [self setTitleTextAttributes:@{NSForegroundColorAttributeName: textColor}`
`57`		`- forState:UIControlStateNormal];`
	`65`	`+ [_attributes setObject: textColor forKey:NSForegroundColorAttributeName];`
	`66`	`+ [self setTitleTextAttributes:_attributes`
	`67`	`+ forState:UIControlStateNormal];`
`58`	`68`	`}`
`59`	`69`	`#endif`
`60`	`70`	`}`