ExpandableCalendar sometimes does not render after receving push notifications

[EttoreFranchi]

Hello,

I have this simple component in my React Native Expo 52 application:

import React, { useEffect } from 'react';
import { ExpandableCalendar, CalendarProvider } from 'react-native-calendars';
import { LayoutAnimation } from 'react-native';

export default function CalendarVisualization({ date, setDate }) {
  useEffect(() => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
  }, []);

  return (
    <CalendarProvider
      date={date}
      onDateChanged={(date) => setDate(new Date(date))}
    >
        <ExpandableCalendar
          firstDay={1}
        />
    </CalendarProvider>
  );
}

When I click on an expo push notification the app gets reloaded and ExpandableCalendar sometimes fails to render. Although it is completely transparent, it is still interactable (so I can still change the selected day, week etc).

I am using react-native-calendars 1.1312.1.

The component does not log nor throw any error.

It there something I'm doing wrong?
Thanks for the help!

[sdjg113]

ExpandableCalendar has a initial height of 0. onHeaderLayout sometimes does not set the proper height.

  const [headerHeight, setHeaderHeight] = useState(0)
  const onHeaderLayout = useCallback(
    ({
      nativeEvent: {
        layout: { height },
      },
    }: LayoutChangeEvent) => {
      setHeaderHeight(height || DEFAULT_HEADER_HEIGHT)
    },
    []
  )

```    from ExpandableCalendar.   The onHeaderLayout is not reliable so the header height remain 0.      I use some hacky force it to re-render.          

const [forceRenderKey, setForceRenderKey] = useState(0)
// Force re-render to work around ExpandableCalendar headerHeight === 0 bug
useEffect(() => {
const timer = setTimeout(() => {
setForceRenderKey(1)
}, 50)
return () => clearTimeout(timer)
}, [])

    <ExpandableCalendar
        key={forceRenderKey}

I have the lib as components and spent a hour trying to change the  onHeaderLayout . Nothing worked reliably. 

[freely322]

Check my PR
#2653

[sdjg113]

Check my PR #2653

The solution did not work for me. I need a lot customization so I pulled the lib into my components.
The proposed solution measure the height at 70 while my DEFAULT_HEADER_HEIGHT is at 78. But the correct height would be around 36 ish if the onHeaderLayout is correctly run. I am not sure where the whole number 70 is coming from neither. I thought it included the day names.