feat: add Appearance Props

* Add appearance feature

* feat: add appearance type in flowtype

Co-authored-by: Akash Rajendra <[email protected]>

Author: Naturalclar

index.d.ts

@@ -67,6 +67,12 @@ export interface SegmentedControlIOSProps extends ViewProps {
    * The labels for the control's segment buttons, in order.
    */
   values?: string[];
+
+  /**
+   * (iOS 13 only)
+   * Overrides the control's appearance irrespective of the OS theme
+   */
+  appearance?: 'dark' | 'light'
 }
 
 /**

ios/RNCSegmentedControl.m

@@ -94,4 +94,18 @@ - (void)didChange
   }
 }
 
+- (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];
+      }
+  }
+#endif
+}
+
 @end

ios/RNCSegmentedControlManager.m

@@ -29,5 +29,6 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(momentary, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(enabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(appearance, NSString)
 
 @end

js/RNCSegmentedControlNativeComponent.js

@@ -72,6 +72,11 @@ export type SegmentedControlIOSProps = $ReadOnly<{|
    * The `onValueChange` callback will still work as expected.
    */
   momentary?: ?boolean,
+  /**
+   * (iOS 13 only)
+   * Overrides the control's appearance irrespective of the OS theme
+   */
+  appearance?: 'dark' | 'light',
 |}>;
 
 type NativeSegmentedControlIOS = Class<