Fix forwardRef wrapper

Author: Inbal-Tish

example/src/screens/calendarPlaygroundScreen.tsx

@@ -1,5 +1,5 @@
 import times from 'lodash/times';
-import React, {useState, useCallback, useMemo, useRef} from 'react';
+import React, {forwardRef, useState, useCallback, useMemo, useRef} from 'react';
 import {StyleSheet, View, ScrollView, Text, TouchableOpacity, Switch, Alert} from 'react-native';
 import {Calendar, CalendarUtils} from 'react-native-calendars';
 
@@ -368,7 +368,7 @@ const NewCalendarScreen = () => {
     setCustomHeaderNewMonth(false);
   };
 
-  const CustomHeader = React.forwardRef((props, ref) => {
+  const CustomHeader = forwardRef((props, ref) => {
     customHeaderProps.current = props;
 
     return (

example/src/screens/calendarScreen.tsx

@@ -1,4 +1,4 @@
-import React, {useState, Fragment, useCallback, useMemo, useRef} from 'react';
+import React, {forwardRef, useState, Fragment, useCallback, useMemo, useRef} from 'react';
 import {StyleSheet, View, ScrollView, Text, TouchableOpacity} from 'react-native';
 import {Calendar, CalendarUtils} from 'react-native-calendars';
 import testIDs from '../testIDs';
@@ -448,7 +448,7 @@ const CalendarScreen = () => {
   };
 
   const renderCalendarWithCustomHeader = () => {
-    const CustomHeader = React.forwardRef((props, ref) => {
+    const CustomHeader = forwardRef((props, ref) => {
       customHeaderProps.current = props;
 
       return (

src/agenda/index.tsx

@@ -82,7 +82,7 @@ export default class Agenda extends Component<AgendaProps, State> {
     onDayChange: PropTypes.func,
     renderKnob: PropTypes.func,
     renderList: PropTypes.func,
-    selected: PropTypes.any, //TODO: Should be renamed 'selectedDay' and inherited from ReservationList
+    selected: PropTypes.any,
     hideKnob: PropTypes.bool,
     showClosingKnob: PropTypes.bool
   };

src/calendar/header/index.tsx

@@ -83,7 +83,7 @@ const accessibilityActions = [
   {name: 'decrement', label: 'decrement'}
 ];
 
-const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
+const CalendarHeader = (props: CalendarHeaderProps, ref) => {
   const {
     theme,
     style: propsStyle,
@@ -306,12 +306,13 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
       {renderDayNames()}
     </View>
   );
-});
-
-export default CalendarHeader;
-CalendarHeader.displayName = 'CalendarHeader';
-CalendarHeader.defaultProps = {
-  monthFormat: 'MMMM yyyy',
-  webAriaLevel: 1,
-  arrowsHitSlop: 20
 };
+
+export default Object.assign(forwardRef(CalendarHeader), {
+  displayName: 'CalendarHeader',
+  defaultProps: {
+    monthFormat: 'MMMM yyyy',
+    webAriaLevel: 1,
+    arrowsHitSlop: 20
+  }
+});

src/expandableCalendar/AgendaList/agendaList.tsx

@@ -41,7 +41,7 @@ const viewabilityConfig = {
  * @extends: SectionList
  * @example: https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendar.js
  */
-const AgendaList = forwardRef((props: AgendaListProps, ref: any) => {
+const AgendaList = (props: AgendaListProps, ref: any) => {
   const {
     theme,
     sections,
@@ -247,17 +247,16 @@ const AgendaList = forwardRef((props: AgendaListProps, ref: any) => {
   // _getItemLayout = (data, index) => {
   //   return {length: constants.screenWidth, offset: constants.screenWidth * index, index};
   // }
-});
-
-export default AgendaList;
-
-AgendaList.displayName = 'AgendaList';
-AgendaList.propTypes = {
-  dayFormat: PropTypes.string,
-  dayFormatter: PropTypes.func,
-  useMoment: PropTypes.bool,
-  markToday: PropTypes.bool,
-  // @ts-expect-error TODO Figure out why forwardRef causes error about the number type
-  sectionStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
-  avoidDateUpdates: PropTypes.bool
 };
+
+export default Object.assign(forwardRef(AgendaList), {
+  displayName: 'AgendaList',
+  propTypes: {
+    dayFormat: PropTypes.string,
+    dayFormatter: PropTypes.func,
+    useMoment: PropTypes.bool,
+    markToday: PropTypes.bool,
+    sectionStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
+    avoidDateUpdates: PropTypes.bool
+  }
+});