done with adding testIDS (#894)

Author: rvenky125

ios/RNCSegmentedControl.h

@@ -11,5 +11,6 @@
 @interface RNCSegmentedControl : UISegmentedControl
 @property(nonatomic, assign) NSInteger selectedIndex;
 @property(nonatomic, copy) RCTBubblingEventBlock onChange;
+@property(nonatomic, copy) NSArray *testIDS;
 
 @end

ios/RNCSegmentedControl.m

@@ -88,4 +88,17 @@ - (void)setAppearance:(NSString *)appearanceString {
 #endif
 }
 
+- (NSArray *)accessibilityElements {
+  NSArray *elements = [super accessibilityElements];
+  [elements enumerateObjectsUsingBlock:^(UIView *obj, NSUInteger idx, BOOL *stop) {
+    @try {
+      obj.accessibilityIdentifier = self.testIDS[idx];      
+    } @catch (NSException *exception) {
+      NSLog(@"%@", exception);
+    }
+  }];
+
+  return elements;
+}
+
 @end

ios/RNCSegmentedControlManager.m

@@ -27,6 +27,7 @@ - (UIView *)view {
 RCT_EXPORT_VIEW_PROPERTY(enabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(appearance, NSString)
+RCT_EXPORT_VIEW_PROPERTY(testIDS, NSArray)
 
 RCT_CUSTOM_VIEW_PROPERTY(fontStyle, NSObject, RNCSegmentedControl) {
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) &&      \

js/SegmentedControl.js

@@ -37,6 +37,7 @@ const SegmentedControl = ({
   activeFontStyle,
   appearance,
   accessibilityHintSeperator = 'out of',
+  testIDS,
 }: SegmentedControlProps): React.Node => {
   const colorSchemeHook = useColorScheme();
   const colorScheme = appearance || colorSchemeHook;
@@ -113,6 +114,7 @@ const SegmentedControl = ({
             return (
               <SegmentedControlTab
                 enabled={enabled}
+                testID={(testIDS?.length ?? 0) > index ? testIDS[index] : `${index}`}
                 selected={selectedIndex === index}
                 accessibilityHint={`${
                   index + 1

js/SegmentedControlTab.js

@@ -94,8 +94,9 @@ export const SegmentedControlTab = ({
       onPress={onSelect}
       accessibilityHint={accessibilityHint}
       accessibilityRole="button"
-      accessibilityState={{selected: selected, disabled: !enabled}}>
-      <View testID={testID} style={styles.default}>
+      accessibilityState={{selected: selected, disabled: !enabled}}
+      testID={testID}>
+      <View style={styles.default}>
         {typeof value === 'number' || typeof value === 'object' ? (
           <Image source={value} style={styles.segmentImage} />
         ) : isBase64(value) ? (

js/types.js

@@ -107,4 +107,10 @@ export type SegmentedControlProps = $ReadOnly<{|
    * Touchable style properties for Segmented Control Tab
    */
   tabStyle?: ViewStyle,
+
+
+  /**
+   * array testID to each segment button
+   */
+  testIDS: $ReadOnlyArray<string | number | Object>,
 |}>;