Feat: add backgroundColor and textColor for iOS13 segmented contr… (#22)

Feat: add backgroundColor and textColor for iOS13 segmented control

Author: cpojer

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

@@ -18,7 +18,7 @@ - (instancetype)initWithFrame:(CGRect)frame
  if ((self = [super initWithFrame:frame])) {
  _selectedIndex = self.selectedSegmentIndex;
  [self addTarget:self action:@selector(didChange)
-  forControlEvents:UIControlEventValueChanged];
+ forControlEvents:UIControlEventValueChanged];
  }
  return self;
 }
@@ -39,6 +39,42 @@ - (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];
+#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];
+ }
+#endif
+}
+
 - (void)didChange
 {
  _selectedIndex = self.selectedSegmentIndex;

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,18 @@ type SegmentedControlIOSProps = $ReadOnly<{|
  * Accent color of the control.
  */
  tintColor?: ?string,
+ /**
+ *
+ * Text color of the control.
+ * NOTE: this prop will only work for iOS >= 13
+ */
+ textColor?: ?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.