ExpandableCalendar - Added height calculation on layout instead of hard coded header height

src/calendar-list/index.tsx

@@ -101,12 +101,14 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
     /** FlatList props */
     contentContainerStyle,
     onEndReachedThreshold,
-    onEndReached
+    onEndReached,
+    onHeaderLayout
   } = props;
 
   const calendarProps = extractCalendarProps(props);
   const headerProps = extractHeaderProps(props);
   const calendarSize = horizontal ? calendarWidth : calendarHeight;
+  const shouldUseStaticHeader = staticHeader && horizontal;
 
   const [currentMonth, setCurrentMonth] = useState(parseDate(current));
 
@@ -250,12 +252,13 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
         calendarHeight={calendarHeight}
         scrollToMonth={scrollToMonth}
         visible={isDateInRange(item)}
+        onHeaderLayout={!shouldUseStaticHeader ? onHeaderLayout : undefined}
       />
     );
   }, [horizontal, calendarStyle, calendarWidth, testID, getMarkedDatesForItem, isDateInRange, calendarProps]);
 
   const renderStaticHeader = () => {
-    if (staticHeader && horizontal) {
+    if (shouldUseStaticHeader) {
       return (
         <CalendarHeader
           {...headerProps}
@@ -265,6 +268,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
           addMonth={addMonth}
           accessibilityElementsHidden={true} // iOS
           importantForAccessibility={'no-hide-descendants'} // Android
+          onHeaderLayout={onHeaderLayout}
         />
       );
     }

src/calendar/header/index.tsx

@@ -13,7 +13,8 @@ import {
   ViewStyle,
   AccessibilityActionEvent,
   ColorValue,
-  Insets
+  Insets,
+  ViewProps
 } from 'react-native';
 import {formatNumbers, weekDayNames} from '../../dateutils';
 import styleConstructor from './style';
@@ -73,6 +74,8 @@ export interface CalendarHeaderProps {
   numberOfDays?: number;
   /** Left inset for the timeline calendar header. Default = 72 */
   timelineLeftInset?: number;
+  /** Callback for header onLayout */
+  onHeaderLayout?: ViewProps['onLayout'];
 }
 
 const accessibilityActions = [
@@ -107,7 +110,8 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
     importantForAccessibility,
     numberOfDays,
     current = '',
-    timelineLeftInset
+    timelineLeftInset,
+    onHeaderLayout
   } = props;
 
   const numberOfDaysCondition = useMemo(() => {
@@ -289,6 +293,7 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
       onAccessibilityAction={onAccessibilityAction}
       accessibilityElementsHidden={accessibilityElementsHidden} // iOS
       importantForAccessibility={importantForAccessibility} // Android
+      onLayout={onHeaderLayout}
     >
       <View style={headerStyle}>
         {_renderArrow('left')}

src/componentUpdater.ts

@@ -114,7 +114,8 @@ export function extractHeaderProps(props: CalendarProps) {
     numberOfDays,
     current,
     timelineLeftInset,
-    testID
+    testID,
+    onHeaderLayout
   } = props;
 
   const headerProps = {
@@ -139,7 +140,8 @@ export function extractHeaderProps(props: CalendarProps) {
     numberOfDays,
     current,
     timelineLeftInset,
-    testID
+    testID,
+    onHeaderLayout
   };
 
   return headerProps;

src/expandableCalendar/index.tsx

@@ -22,7 +22,7 @@ import {
 import {page} from '../dateutils';
 import {parseDate, toMarkingFormat} from '../interface';
 import {DateData, Direction} from '../types';
-import styleConstructor, {HEADER_HEIGHT, KNOB_CONTAINER_HEIGHT} from './style';
+import styleConstructor, {KNOB_CONTAINER_HEIGHT} from './style';
 import WeekDaysNames from '../commons/WeekDaysNames';
 import Calendar from '../calendar';
 import CalendarList, {CalendarListProps} from '../calendar-list';
@@ -31,6 +31,7 @@ import WeekCalendar from './WeekCalendar';
 import Context from './Context';
 import constants from '../commons/constants';
 import {UpdateSources} from './commons';
+import useHeaderHeight from './useHeaderHeight';
 
 export enum Positions {
   CLOSED = 'closed',
@@ -126,6 +127,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
   } = props;
 
   const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
+  const {headerHeight, onHeaderLayout} = useHeaderHeight();
 
   /** Date */
 
@@ -182,7 +184,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
   const startHeight = useMemo(() => isOpen ? openHeight.current : closedHeight, [closedHeight, isOpen]);
   const _height = useRef(startHeight);
   const deltaY = useMemo(() => new Animated.Value(startHeight), [startHeight]);
-  const headerDeltaY = useRef(new Animated.Value(isOpen ? -HEADER_HEIGHT : 0));
+  const headerDeltaY = useRef(new Animated.Value(isOpen ? -headerHeight : 0));
 
   useEffect(() => {
     _height.current = startHeight;
@@ -205,17 +207,17 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
 
   /** Styles */
 
-  const style = useRef(styleConstructor(theme));
+  const style = useMemo(() => styleConstructor(theme, {headerHeight}), [theme, headerHeight]);
   const themeObject = Object.assign(headerStyleOverride, theme);
 
-  const _wrapperStyles = useRef({style: {height: startHeight}});
-  const _headerStyles = {style: {top: isOpen ? -HEADER_HEIGHT : 0}};
+  const _wrapperStyles = useMemo(() => ({style: {height: startHeight}}), [headerHeight]);
+  const _headerStyles = {style: {top: isOpen ? -headerHeight : 0}};
   const _weekCalendarStyles = {style: {opacity: isOpen ? 0 : 1}};
 
   const shouldHideArrows = !horizontal ? true : hideArrows || false;
 
   const updateNativeStyles = () => {
-    wrapper?.current?.setNativeProps(_wrapperStyles.current);
+    wrapper?.current?.setNativeProps(_wrapperStyles);
 
     if (!horizontal) {
       header?.current?.setNativeProps(_headerStyles);
@@ -229,25 +231,25 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
     const rightPaddings = calendarStyle?.paddingRight;
 
     return [
-      style.current.weekDayNames,
+      style.weekDayNames,
       {
         paddingLeft: isNumber(leftPaddings) ? leftPaddings + 6 : DAY_NAMES_PADDING,
         paddingRight: isNumber(rightPaddings) ? rightPaddings + 6 : DAY_NAMES_PADDING
       }
     ];
-  }, [calendarStyle]);
+  }, [calendarStyle, style]);
 
   const animatedHeaderStyle = useMemo(() => {
-    return [style.current.header, {height: HEADER_HEIGHT + 10, top: headerDeltaY.current}];
-  }, [headerDeltaY.current]);
+    return [style.header, {height: headerHeight + 10, top: headerDeltaY.current}];
+  }, [headerDeltaY.current, style]);
 
   const weekCalendarStyle = useMemo(() => {
-    return [style.current.weekContainer, isOpen ? style.current.hidden : style.current.visible];
-  }, [isOpen]);
+    return [style.weekContainer, isOpen ? style.hidden : style.visible];
+  }, [isOpen, style]);
 
   const containerStyle = useMemo(() => {
-    return [allowShadow && style.current.containerShadow, propsStyle];
-  }, [allowShadow, propsStyle]);
+    return [allowShadow && style.containerShadow, propsStyle, headerHeight === 0 && {opacity: 0}];
+  }, [allowShadow, propsStyle, style]);
 
   const wrapperStyle = useMemo(() => {
     return {height: deltaY};
@@ -339,11 +341,11 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
 
   const handlePanResponderMove = (_: GestureResponderEvent, gestureState: PanResponderGestureState) => {
     // limit min height to closed height and max to open height
-    _wrapperStyles.current.style.height = Math.min(Math.max(closedHeight, _height.current + gestureState.dy), openHeight.current);
+    _wrapperStyles.style.height = Math.min(Math.max(closedHeight, _height.current + gestureState.dy), openHeight.current);
 
     if (!horizontal) {
       // vertical CalenderList header
-      _headerStyles.style.top = Math.min(Math.max(-gestureState.dy, -HEADER_HEIGHT), 0);
+      _headerStyles.style.top = Math.min(Math.max(-gestureState.dy, -headerHeight), 0);
     } else {
       // horizontal Week view
       if (!isOpen) {
@@ -357,7 +359,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
   };
 
   const handlePanResponderEnd = () => {
-    _height.current = Number(_wrapperStyles.current.style.height);
+    _height.current = Number(_wrapperStyles.style.height);
     bounceToPosition();
   };
 
@@ -497,7 +499,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
     return (
       <Image
         source={direction === 'right' ? rightArrowImageSource : leftArrowImageSource}
-        style={style.current.arrowImage}
+        style={style.arrowImage}
         testID={`${testID}.${direction}Arrow`}
       />
     );
@@ -508,7 +510,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
       <View style={weekDaysStyle}>
         <WeekDaysNames
           firstDay={firstDay}
-          style={style.current.dayHeader}
+          style={style.dayHeader}
         />
       </View>
     );
@@ -523,7 +525,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
         style={animatedHeaderStyle}
         pointerEvents={'none'}
       >
-        <Text allowFontScaling={false} style={style.current.headerTitle}>
+        <Text allowFontScaling={false} style={style.headerTitle}>
           {monthYear}
         </Text>
         {renderWeekDaysNames()}
@@ -533,8 +535,8 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
 
   const renderKnob = () => {
     return (
-      <View style={style.current.knobContainer} pointerEvents={'box-none'}>
-        <TouchableOpacity style={style.current.knob} testID={`${testID}.knob`} onPress={toggleCalendarPosition} hitSlop={knobHitSlop} /* activeOpacity={isOpen ? undefined : 1} *//>
+      <View style={style.knobContainer} pointerEvents={'box-none'}>
+        <TouchableOpacity style={style.knob} testID={`${testID}.knob`} onPress={toggleCalendarPosition} hitSlop={knobHitSlop} /* activeOpacity={isOpen ? undefined : 1} *//>
       </View>
     );
   };
@@ -572,6 +574,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
         horizontal={horizontal}
         firstDay={firstDay}
         calendarStyle={calendarStyle}
+        onHeaderLayout={onHeaderLayout}
         {...others}
         current={date}
         theme={themeObject}
@@ -608,9 +611,9 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
       ) : (
         <Animated.View testID={`${testID}.expandableContainer`} ref={wrapper} style={wrapperStyle} {...panResponder.panHandlers}>
           {renderCalendarList()}
-          {renderWeekCalendar()}
           {!hideKnob && renderKnob()}
           {!horizontal && renderAnimatedHeader()}
+          {renderWeekCalendar()}
         </Animated.View>
       )}
     </View>

src/expandableCalendar/style.ts

@@ -7,10 +7,12 @@ import constants from '../commons/constants';
 export const HEADER_HEIGHT = 68;
 export const KNOB_CONTAINER_HEIGHT = 24;
 
+type StyleConstructorOptions = Partial<{
+  headerHeight: number
+}>;
 
-export default function styleConstructor(theme: Theme = {}) {
+export default function styleConstructor(theme: Theme = {}, {headerHeight = HEADER_HEIGHT}: StyleConstructorOptions = {}) {
   const appStyle = {...defaultStyle, ...theme};
-
   return StyleSheet.create({
     containerShadow: {
       backgroundColor: appStyle.calendarBackground,
@@ -96,7 +98,7 @@ export default function styleConstructor(theme: Theme = {}) {
       position: 'absolute',
       left: 0,
       right: 0,
-      top: HEADER_HEIGHT + (constants.isAndroid ? 8 : 9), // align row on top of calendar's first row
+      top: headerHeight
     },
     hidden: {
       opacity: 0

src/expandableCalendar/useHeaderHeight.ts

@@ -0,0 +1,16 @@
+import {useCallback, useState} from 'react';
+import type {LayoutChangeEvent} from 'react-native';
+
+const useHeaderHeight = () => {
+    const [headerHeight, setHeaderHeight] = useState(0);
+    const onHeaderLayout = useCallback(({nativeEvent: {layout: {height}}}: LayoutChangeEvent) => {
+        setHeaderHeight(height);
+    }, []);
+
+    return {
+        headerHeight,
+        onHeaderLayout,
+    };
+};
+
+export default useHeaderHeight;