done with adding testIDS

react-native-segmented-control · Oct 22, 2024 · ee9d29f · ee9d29f
1 parent 6b06902
commit ee9d29f
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 2 deletions.
diff --git a/ios/RNCSegmentedControl.h b/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
diff --git a/ios/RNCSegmentedControl.m b/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
diff --git a/ios/RNCSegmentedControlManager.m b/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) &&      \

diff --git a/js/SegmentedControl.js b/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 > index ? testIDS[index] : `${index}`}
                 selected={selectedIndex === index}
                 accessibilityHint={`${
                   index + 1

diff --git a/js/SegmentedControlTab.js b/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) ? (

diff --git a/js/types.js b/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>,
 |}>;