Fix/ SegmentedControl fixes (#1369)

* pass testID

* Fix animation leap

Author: lidord-wix

generatedTypes/components/segmentedControl/segment.d.ts

@@ -43,6 +43,7 @@ export declare type SegmentProps = SegmentedControlItemProps & {
      * onLayout function.
      */
     onLayout?: (index: number, event: LayoutChangeEvent) => void;
+    testID?: string;
 };
 declare const _default: React.ComponentClass<SegmentedControlItemProps & {
     /**
@@ -69,6 +70,7 @@ declare const _default: React.ComponentClass<SegmentedControlItemProps & {
      * onLayout function.
      */
     onLayout?: ((index: number, event: LayoutChangeEvent) => void) | undefined;
+    testID?: string | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
 }, any>;

src/components/segmentedControl/index.tsx

@@ -84,7 +84,8 @@ const SegmentedControl = (props: SegmentedControlProps) => {
     activeBackgroundColor = Colors.white,
     inactiveColor = Colors.grey20,
     outlineColor = activeColor,
-    outlineWidth = BORDER_WIDTH
+    outlineWidth = BORDER_WIDTH,
+    testID
   } = props;
   const [selectedSegment, setSelectedSegment] = useState(-1);
 
@@ -114,7 +115,7 @@ const SegmentedControl = (props: SegmentedControlProps) => {
   const onLayout = useCallback((index: number, event: LayoutChangeEvent) => {
     const {x, width, height} = event.nativeEvent.layout;
     segmentsStyle.current[index] = {x, width};
-    segmentedControlHeight.current = height + (2 * (HORIZONTAL_PADDING - BORDER_WIDTH));
+    segmentedControlHeight.current = height + 2 * (HORIZONTAL_PADDING - BORDER_WIDTH);
     segmentsCounter.current++;
 
     return segmentsCounter.current === segments?.length && setSelectedSegment(initialIndex);
@@ -150,20 +151,29 @@ const SegmentedControl = (props: SegmentedControlProps) => {
           activeColor={activeColor}
           inactiveColor={inactiveColor}
           {...segments?.[index]}
+          testID={testID}
         />
       );
     });
 
   return (
-    <View style={containerStyle}>
+    <View style={containerStyle} testID={testID}>
       <View row center style={[styles.container, style, {borderRadius, backgroundColor}]}>
-        <Reanimated.View
-          style={[
-            styles.selectedSegment,
-            animatedStyle,
-            {borderColor: outlineColor, borderRadius, backgroundColor: activeBackgroundColor, borderWidth: outlineWidth, height: segmentedControlHeight.current}
-          ]}
-        />
+        {animatedStyle && (
+          <Reanimated.View
+            style={[
+              styles.selectedSegment,
+              animatedStyle,
+              {
+                borderColor: outlineColor,
+                borderRadius,
+                backgroundColor: activeBackgroundColor,
+                borderWidth: outlineWidth,
+                height: segmentedControlHeight.current
+              }
+            ]}
+          />
+        )}
         {renderSegments()}
       </View>
     </View>

src/components/segmentedControl/segment.tsx

@@ -50,6 +50,7 @@ export type SegmentProps = SegmentedControlItemProps & {
    * onLayout function.
    */
   onLayout?: (index: number, event: LayoutChangeEvent) => void;
+  testID?: string;
 };
 
 /**
@@ -66,7 +67,8 @@ const Segment = React.memo((props: SegmentProps) => {
     onPress,
     inactiveColor,
     index,
-    iconOnRight
+    iconOnRight,
+    testID
   } = props;
 
   const segmentedColor = useMemo(() => (isSelected ? activeColor : inactiveColor),
@@ -88,7 +90,15 @@ const Segment = React.memo((props: SegmentProps) => {
   [onLayout, index]);
 
   return (
-    <TouchableOpacity onLayout={segmentOnLayout} style={segmentStyle} onPress={onSegmentPress} row flexG center>
+    <TouchableOpacity
+      onLayout={segmentOnLayout}
+      style={segmentStyle}
+      onPress={onSegmentPress}
+      row
+      flexG
+      center
+      testID={`${testID}.${index}`}
+    >
       {!iconOnRight && renderIcon()}
       {label && (
         <Text text90 numberOfLines={1} color={segmentedColor}>