SegmentedControl - fixed Outline sometimes renders as a line (#3099)

* fixed Outline sometimes renders as a line

* fixed lint and ts errors

* removed first array initialization

* removed getinitialarray

Author: nitzanyiz

src/components/segmentedControl/index.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, {useRef, useCallback, useEffect, useState} from 'react';
+import React, {useRef, useCallback, useEffect} from 'react';
 import {StyleSheet, StyleProp, ViewStyle, TextStyle, LayoutChangeEvent} from 'react-native';
 import {
   Easing,
@@ -97,6 +97,7 @@ export type SegmentedControlProps = {
 };
 
 const nonAreUndefined = <T, >(array: Array<T | undefined>): array is Array<T> => {
+  'worklet';
   for (const item of array) {
     if (item === undefined) {
       return false;
@@ -105,10 +106,6 @@ const nonAreUndefined = <T, >(array: Array<T | undefined>): array is Array<T> =>
   return true;
 };
 
-function getInitialSegmentsDimensionsArray(length: number) {
-  return Array<{x: number; width: number} | undefined>(length).fill(undefined);
-}
-
 /**
  * @description: SegmentedControl component for toggling two values or more
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SegmentedControlScreen.tsx
@@ -138,8 +135,8 @@ const SegmentedControl = (props: SegmentedControlProps) => {
   const animatedSelectedIndex = useSharedValue(initialIndex);
   const segmentsStyle = useSharedValue([] as {x: number; width: number}[]);
   // const shouldResetOnDimensionsOnNextLayout = useRef(false); // use this flag if there bugs with onLayout being called more than once.
-  const segmentsDimensions = useRef(getInitialSegmentsDimensionsArray(segments?.length || 0));
-  const [containerHeight, setContainerHeight] = useState(0);
+  const segmentsDimensions = useRef<{x: number; width: number}[]>([]);
+  const containerHeight = useSharedValue(0);
 
   useEffect(() => {
     animatedSelectedIndex.value = initialIndex;
@@ -171,40 +168,42 @@ const SegmentedControl = (props: SegmentedControlProps) => {
   const onLayout = useCallback((index: number, event: LayoutChangeEvent) => {
     // if (shouldResetOnDimensionsOnNextLayout.current) {
     //   shouldResetOnDimensionsOnNextLayout.current = false;
-    //   // segmentsDimensions.current = getInitialSegmentsDimensionsArray(segments?.length || 0);
+    //   segmentsDimensions.current = getInitialSegmentsDimensionsArray(segments.length || 0);
     // }
     const {x, width} = event.nativeEvent.layout;
     segmentsDimensions.current[index] = {x, width};
-    if (nonAreUndefined(segmentsDimensions.current)) {
+    if (segmentsDimensions.current.length === segments.length && nonAreUndefined(segmentsDimensions.current)) {
       segmentsStyle.value = [...segmentsDimensions.current];
       // shouldResetOnDimensionsOnNextLayout.current = true;// in case onLayout will be called again (orientation change etc.)
     }
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [initialIndex, segments?.length]);
+  [initialIndex, segments.length]);
 
   const containerOnLayout = useCallback(({nativeEvent: {layout: {height}}} : LayoutChangeEvent) => {
-    setContainerHeight(height);
-  }, []);
+    containerHeight.value = height;
+  }, [containerHeight]);
 
   const animatedStyle = useAnimatedStyle(() => {
-    if (segmentsStyle.value.length !== 0) {
+    const {value} = segmentsStyle;
+    const {value: height} = containerHeight;
+    if (height !== 0 && value.length === segments.length && nonAreUndefined(value)) {
       const isFirstElementSelected = animatedSelectedIndex.value === 0;
-      const isLastElementSelected = animatedSelectedIndex.value === segmentsStyle.value.length - 1;
+      const isLastElementSelected = animatedSelectedIndex.value === value.length - 1;
       const isMiddleSelected = !isFirstElementSelected && !isLastElementSelected;
       const insetFix = -CONTAINER_BORDER_WIDTH - (!isFirstElementSelected ? segmentDividerWidth : 1);
       const widthFix = isMiddleSelected ? 2 * segmentDividerWidth : CONTAINER_BORDER_WIDTH + segmentDividerWidth;
-      const inset = withTiming(segmentsStyle.value[animatedSelectedIndex.value].x + insetFix, TIMING_CONFIG);
-      const width = withTiming(segmentsStyle.value[animatedSelectedIndex.value].width + widthFix, TIMING_CONFIG);
-      return Constants.isRTL ? {width, right: inset} : {width, left: inset};
+      const inset = withTiming(value[animatedSelectedIndex.value].x + insetFix, TIMING_CONFIG);
+      const width = withTiming(value[animatedSelectedIndex.value].width + widthFix, TIMING_CONFIG);
+      return Constants.isRTL ? {width, height, right: inset} : {width, height, left: inset};
     }
     return {};
   });
   const shouldRenderDividers = segmentDividerWidth !== 0;
 
   const renderSegments = () =>
     _.map(segments, (_value, index) => {
-      const isLastSegment = index + 1 === segments?.length;
+      const isLastSegment = index + 1 === segments.length;
       return (
         <React.Fragment key={`segment-fragment-${index}`}>
           <Segment
@@ -218,7 +217,7 @@ const SegmentedControl = (props: SegmentedControlProps) => {
             style={[segmentsStyleProp]}
             segmentLabelStyle={segmentLabelStyle}
             iconTintColor={iconTintColor}
-            {...segments?.[index]}
+            {...segments[index]}
             testID={testID}
           />
           {!isLastSegment && shouldRenderDividers && (
@@ -243,8 +242,7 @@ const SegmentedControl = (props: SegmentedControlProps) => {
               borderRadius,
               backgroundColor: activeBackgroundColor,
               borderWidth: shouldRenderDividers ? undefined : outlineWidth,
-              borderColor: shouldRenderDividers ? undefined : outlineColor,
-              height: containerHeight
+              borderColor: shouldRenderDividers ? undefined : outlineColor
             },
             animatedStyle
           ]}
@@ -258,8 +256,7 @@ const SegmentedControl = (props: SegmentedControlProps) => {
               {
                 borderColor: outlineColor,
                 borderRadius,
-                borderWidth: outlineWidth,
-                height: containerHeight
+                borderWidth: outlineWidth
               },
               animatedStyle
             ]}