ExpandableCalendar - fix passing 'headerStyle' to horizontal header (#2018)

* ExpandableCalendar - fix passing 'headerStyle' to horizontal header

* lint fix

Author: Inbal-Tish

example/src/screens/expandableCalendarScreen.tsx

@@ -55,7 +55,7 @@ const ExpandableCalendarScreen = (props: Props) => {
           // hideKnob
           // initialPosition={ExpandableCalendar.positions.OPEN}
           // calendarStyle={styles.calendar}
-          // headerStyle={styles.calendar} // for horizontal only
+          // headerStyle={styles.header} // for horizontal only
           // disableWeekScroll
           theme={theme.current}
           // disableAllTouchEventsForDisabledDays
@@ -72,7 +72,7 @@ const ExpandableCalendarScreen = (props: Props) => {
         renderItem={renderItem}
         // scrollToNextEvent
         sectionStyle={styles.section}
-        // dayFormat={'YYYY-MM-d'}
+        // dayFormat={'yyyy-MM-d'}
       />
     </CalendarProvider>
   );
@@ -85,6 +85,9 @@ const styles = StyleSheet.create({
     paddingLeft: 20,
     paddingRight: 20
   },
+  header: {
+    backgroundColor: 'lightgrey'
+  },
   section: {
     backgroundColor: lightThemeColor,
     color: 'grey',

src/calendar/index.tsx

@@ -60,7 +60,7 @@ export interface CalendarProps extends CalendarHeaderProps, DayProps {
   /** Disable days by default */
   disabledByDefault?: boolean;
   /** Style passed to the header */
-  headerStyle?: ViewStyle;
+  headerStyle?: StyleProp<ViewStyle>;
   /** Allow rendering a totally custom header */
   customHeader?: any;
   /** Allow selection of dates before minDate or after maxDate */

src/expandableCalendar/index.tsx

@@ -225,7 +225,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
     ];
   }, [calendarStyle]);
 
-  const headerStyle = useMemo(() => {
+  const animatedHeaderStyle = useMemo(() => {
     return [style.current.header, {height: HEADER_HEIGHT + 10, top: headerDeltaY.current}];
   }, [headerDeltaY.current]);
 
@@ -497,7 +497,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
     return (
       <Animated.View
         ref={header}
-        style={headerStyle}
+        style={animatedHeaderStyle}
         pointerEvents={'none'}
       >
         <Text allowFontScaling={false} style={style.current.headerTitle}>
@@ -548,6 +548,10 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
     }
   }, [numberOfDays]);
 
+  const _headerStyle = useMemo(() => {
+    return [numberOfDaysHeaderStyle, props.headerStyle];
+  }, [props.headerStyle]);
+
   const renderCalendarList = () => {
     return (
       <CalendarList
@@ -570,7 +574,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
         renderArrow={_renderArrow}
         staticHeader
         numberOfDays={numberOfDays}
-        headerStyle={numberOfDaysHeaderStyle}
+        headerStyle={_headerStyle}
         timelineLeftInset={timelineLeftInset}
       />
     );