fix: Transparent ExpandableCalendar wix#2653

Refactor header layout and height calculations

Author: anthonydu

src/expandableCalendar/index.tsx

@@ -143,9 +143,21 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
 
   const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
   const [headerHeight, setHeaderHeight] = useState(0);
-  const onHeaderLayout = useCallback(({nativeEvent: {layout: {height}}}: LayoutChangeEvent) => {
-      setHeaderHeight(height || DEFAULT_HEADER_HEIGHT);
-  }, []);
+  const shouldMeasureHeader = useRef(true);
+  const onHeaderLayout = useCallback(
+    ({
+      nativeEvent: {
+        layout: {height}
+      }
+    }: LayoutChangeEvent) => {
+      const _height = (height || DEFAULT_HEADER_HEIGHT) + 5;
+      if (height !== headerHeight) {
+        setHeaderHeight(_height);
+      }
+      shouldMeasureHeader.current = false;
+    },
+    [headerHeight]
+  );
 
   /** Date */
 
@@ -191,22 +203,24 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
 
   const [position, setPosition] = useState(numberOfDays ? Positions.CLOSED : initialPosition);
   const isOpen = position === Positions.OPEN;
-  const getOpenHeight = () => {
+  const getOpenHeight = useCallback(() => {
     if (!horizontal) {
       return Math.max(constants.screenHeight, constants.screenWidth);
     }
     return headerHeight + (WEEK_HEIGHT * (numberOfWeeks.current)) + (hideKnob ? 0 : KNOB_CONTAINER_HEIGHT);
-  };
+  }, [headerHeight, horizontal, hideKnob, numberOfWeeks]);
+
   const openHeight = useRef(getOpenHeight());
   const closedHeight = useMemo(() => headerHeight + WEEK_HEIGHT + (hideKnob || Number(numberOfDays) > 1 ? 0 : KNOB_CONTAINER_HEIGHT), [numberOfDays, hideKnob, headerHeight]);
-  const startHeight = useMemo(() => isOpen ? openHeight.current : closedHeight, [closedHeight, isOpen]);
+  const startHeight = useMemo(() => isOpen ? getOpenHeight() : closedHeight, [closedHeight, isOpen, getOpenHeight]);
   const _height = useRef(startHeight);
   const deltaY = useMemo(() => new Animated.Value(startHeight), [startHeight]);
   const headerDeltaY = useRef(new Animated.Value(isOpen ? -headerHeight : 0));
 
   useEffect(() => {
     _height.current = startHeight;
     deltaY.setValue(startHeight);
+    _wrapperStyles.current.style.height = startHeight;
   }, [startHeight]);
 
   useEffect(() => {
@@ -637,7 +651,13 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
           renderArrow={_renderArrow}
         />
       ) : (
-        <Animated.View testID={`${testID}.expandableContainer`} ref={wrapper} style={wrapperStyle} {...panResponder.panHandlers}>
+        <Animated.View
+          testID={`${testID}.expandableContainer`}
+          ref={wrapper}
+          style={wrapperStyle}
+          onLayout={shouldMeasureHeader.current ? onHeaderLayout : undefined}
+          {...panResponder.panHandlers}
+        >
           {renderCalendarList()}
           {renderWeekCalendar()}
           {!hideKnob && renderKnob()}