diff --git a/example/src/screens/timelineCalendar.js b/example/src/screens/timelineCalendar.js
index 3217edca66..830f006967 100644
--- a/example/src/screens/timelineCalendar.js
+++ b/example/src/screens/timelineCalendar.js
@@ -85,13 +85,13 @@ export default class TimelineCalendarScreen extends Component {
   };
 
   onDateChanged = date => {
-    // console.warn('ExpandableCalendarScreen onDateChanged: ', date, updateSource);
+    // console.warn('TimelineCalendarScreen onDateChanged: ', date, updateSource);
     // fetch and set data for date + week ahead
     this.setState({currentDate: date});
   };
 
   onMonthChange = (/* month, updateSource */) => {
-    // console.warn('ExpandableCalendarScreen onMonthChange: ', month, updateSource);
+    // console.warn('TimelineCalendarScreen onMonthChange: ', month, updateSource);
   };
 
   renderEmptyItem() {
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 9af25240bd..de19a258ed 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -377,10 +377,10 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
-  DoubleConversion: cde416483dac037923206447da6e1454df403714
+  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: e686045572151edef46010a6f819ade377dfeb4b
   FBReactNativeSpec: 92869e54fbef651850edc0f8ad2e5e53421f5fbe
-  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
+  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
   RCTRequired: 6d3e854f0e7260a648badd0d44fc364bc9da9728
   RCTTypeSafety: c1f31d19349c6b53085766359caac425926fafaa
diff --git a/src/agenda/index.tsx b/src/agenda/index.tsx
index 04cc6c3afd..042c045555 100644
--- a/src/agenda/index.tsx
+++ b/src/agenda/index.tsx
@@ -19,13 +19,17 @@ import {
 import {extractComponentProps} from '../component-updater.js';
 // @ts-expect-error
 import {parseDate, xdateToData, toMarkingFormat} from '../interface';
+// @ts-expect-error
 import {weekDayNames, sameDate, sameMonth} from '../dateutils';
+// @ts-expect-error
 import {AGENDA_CALENDAR_KNOB} from '../testIDs';
 // @ts-expect-error
 import {VelocityTracker} from '../input';
-import CalendarList, {CalendarListProps} from '../calendar-list';
+import {DateData} from '../types';
 import styleConstructor from './style';
-import ReservationList, {ReservationListProps} from './reservation-list';
+import CalendarList, {CalendarListProps} from '../calendar-list';
+import ReservationList, {ReservationListProps}  from './reservation-list';
+
 
 const HEADER_HEIGHT = 104;
 const KNOB_HEIGHT = 24;
@@ -40,31 +44,28 @@ export type ReservationsType = {
   [date: string]: ReservationItemType[];
 };
 
-export type AgendaProps = CalendarListProps &
-  ReservationListProps & {
-    /** agenda container style */
-    style?: ViewStyle;
-    /** the list of items that have to be displayed in agenda. If you want to render item as empty date
+export type AgendaProps = CalendarListProps & ReservationListProps & {
+  /** the list of items that have to be displayed in agenda. If you want to render item as empty date
    the value of date key has to be an empty array []. If there exists no value for date key it is
    considered that the date in question is not yet loaded */
-    items: ReservationsType;
-    /** callback that gets called when items for a certain month should be loaded (month became visible) */
-    loadItemsForMonth?: (data: any) => void;
-    /** callback that fires when the calendar is opened or closed */
-    onCalendarToggled?: (enabled: boolean) => void;
-    /** callback that gets called on day press */
-    onDayPress?: (data: any) => void;
-    /** callback that gets called when day changes while scrolling agenda list */
-    onDaychange?: (data: any) => void; //TODO: Should be renamed 'onDayChange'
-    /** specify how agenda knob should look like */
-    renderKnob?: () => JSX.Element;
-    /** initially selected day */
-    selected: boolean; //TODO: Should be renamed 'selectedDay'
-    /** Hide knob button. Default = false */
-    hideKnob: boolean;
-    /** When `true` and `hideKnob` prop is `false`, the knob will always be visible and the user will be able to drag the knob up and close the calendar. Default = false */
-    showClosingKnob: boolean;
-  };
+  items: ReservationsType;
+  /** callback that gets called when items for a certain month should be loaded (month became visible) */
+  loadItemsForMonth?: (data: any) => DateData;
+  /** callback that fires when the calendar is opened or closed */
+  onCalendarToggled?: (enabled: boolean) => void;
+  /** callback that gets called on day press */
+  onDayPress?: (data: DateData) => void;
+  /** callback that gets called when day changes while scrolling agenda list */
+  onDayChange?: (data: any) => void;
+  /** specify how agenda knob should look like */
+  renderKnob?: () => JSX.Element;
+  /** initially selected day */
+  selected: boolean, //TODO: Should be renamed 'selectedDay'
+  /** Hide knob button. Default = false */
+  hideKnob: boolean,
+  /** When `true` and `hideKnob` prop is `false`, the knob will always be visible and the user will be able to drag the knob up and close the calendar. Default = false */
+  showClosingKnob: boolean
+}
 
 type AgendaState = {
   scrollY: Animated.Value;
@@ -101,7 +102,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     /** callback that gets called on day press */
     onDayPress: PropTypes.func,
     /** callback that gets called when day changes while scrolling agenda list */
-    onDaychange: PropTypes.func, //TODO: Should be renamed 'onDayChange'
+    onDayChange: PropTypes.func,
     /** specify how agenda knob should look like */
     renderKnob: PropTypes.func,
     /** initially selected day */
@@ -120,10 +121,10 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
   private currentMonth: XDate;
   private knobTracker: any;
   private _isMounted: boolean | undefined;
-  private scrollPad: any;
-  private calendar: any;
-  private knob: any;
-  public list: any;
+  private scrollPad: React.RefObject<any> = React.createRef();
+  private calendar: React.RefObject<CalendarList> = React.createRef();
+  private knob: React.RefObject<any> = React.createRef();
+  public list: React.RefObject<ReservationList> = React.createRef();
 
   constructor(props: AgendaProps) {
     super(props);
@@ -187,11 +188,11 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
   };
 
   setScrollPadPosition = (y: number, animated: boolean) => {
-    if (this.scrollPad?.scrollTo) {
-      this.scrollPad.scrollTo({x: 0, y, animated});
+    if (this.scrollPad?.current?.scrollTo) {
+      this.scrollPad.current.scrollTo({x: 0, y, animated});
     } else {
       // Support for RN O.61 (Expo 37)
-      this.scrollPad.getNode().scrollTo({x: 0, y, animated});
+      this.scrollPad?.current?.getNode().scrollTo({x: 0, y, animated});
     }
   };
 
@@ -216,7 +217,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     // in CalendarList listView, but that might impact performance when scrolling
     // month list in expanded CalendarList.
     // Further info https://github.com/facebook/react-native/issues/1831
-    this.calendar.scrollToDay(this.state.selectedDay, this.calendarOffset() + 1, true);
+    this.calendar?.current?.scrollToDay(this.state.selectedDay, this.calendarOffset() + 1, true);
   }
 
   loadReservations(props: AgendaProps) {
@@ -253,7 +254,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     }
 
     this.setScrollPadPosition(this.initialScrollPadPosition(), true);
-    this.calendar.scrollToDay(day, this.calendarOffset(), true);
+    this.calendar?.current?.scrollToDay(day, this.calendarOffset(), true);
 
     _.invoke(this.props, 'loadItemsForMonth', xdateToData(day));
     _.invoke(this.props, 'onDayPress', xdateToData(day));
@@ -283,7 +284,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
   };
 
   onCalendarListLayout = () => {
-    this.calendar.scrollToDay(this.state.selectedDay.clone(), this.calendarOffset(), false);
+    this.calendar?.current?.scrollToDay(this.state.selectedDay.clone(), this.calendarOffset(), false);
   };
 
   onLayout = (event: LayoutChangeEvent) => {
@@ -294,15 +295,11 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
 
   onTouchStart = () => {
     this.headerState = 'touched';
-    if (this.knob) {
-      this.knob.setNativeProps({style: {opacity: 0.5}});
-    }
+    this.knob?.current?.setNativeProps({style: {opacity: 0.5}});
   };
 
   onTouchEnd = () => {
-    if (this.knob) {
-      this.knob.setNativeProps({style: {opacity: 1}});
-    }
+    this.knob?.current?.setNativeProps({style: {opacity: 1}});
 
     if (this.headerState === 'touched') {
       const isOpen = this.state.calendarScrollable;
@@ -330,7 +327,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     this.enableCalendarScrolling(snapY === 0);
   };
 
-  onVisibleMonthsChange = (months: string[]) => {
+  onVisibleMonthsChange = (months: DateData[]) => {
     _.invoke(this.props, 'onVisibleMonthsChange', months);
 
     if (this.props.items && !this.state.firstReservationLoad) {
@@ -348,7 +345,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     const newDate = parseDate(day);
     const withAnimation = sameMonth(newDate, this.state.selectedDay);
 
-    this.calendar.scrollToDay(day, this.calendarOffset(), withAnimation);
+    this.calendar?.current?.scrollToDay(day, this.calendarOffset(), withAnimation);
     this.setState({
       selectedDay: newDate
     });
@@ -362,7 +359,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     return (
       <ReservationList
         {...reservationListProps}
-        ref={c => (this.list = c)}
+        ref={this.list}
         reservations={this.props.items}
         selectedDay={this.state.selectedDay}
         topDay={this.state.topDay}
@@ -380,7 +377,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     return (
       <CalendarList
         {...calendarListProps}
-        ref={c => (this.calendar = c)}
+        ref={this.calendar}
         current={this.currentMonth}
         markedDates={this.generateMarkings(this.state.selectedDay, markedDates, items)}
         calendarWidth={this.viewWidth}
@@ -398,13 +395,12 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     let knob: JSX.Element | null = <View style={this.style.knobContainer} />;
 
     if (!hideKnob) {
-      const knobView = renderKnob ? renderKnob() : <View style={this.style.knob} />;
-      knob =
-        !this.state.calendarScrollable || showClosingKnob ? (
-          <View style={this.style.knobContainer}>
-            <View ref={c => (this.knob = c)}>{knobView}</View>
-          </View>
-        ) : null;
+      const knobView = renderKnob ? renderKnob() : <View style={this.style.knob}/>;
+      knob = !this.state.calendarScrollable || showClosingKnob ? (
+        <View style={this.style.knobContainer}>
+          <View ref={this.knob}>{knobView}</View>
+        </View>
+      ) : null;
     }
     return knob;
   }
@@ -493,7 +489,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
           {this.renderWeekDaysNames(weekDaysNames)}
         </Animated.View>
         <Animated.ScrollView
-          ref={(ref: any) => (this.scrollPad = ref)}
+          ref={this.scrollPad}
           style={[this.style.scrollPadStyle, scrollPadStyle]}
           overScrollMode="never"
           showsHorizontalScrollIndicator={false}
diff --git a/src/agenda/platform-style.ios.ts b/src/agenda/platform-style.ios.ts
index a6ea5a50a0..cca46a7e01 100644
--- a/src/agenda/platform-style.ios.ts
+++ b/src/agenda/platform-style.ios.ts
@@ -1,4 +1,4 @@
-import {Theme} from '../commons/types';
+import {Theme} from '../types';
 
 export default function platformStyles(appStyle: Theme) {
   return {
diff --git a/src/agenda/platform-style.ts b/src/agenda/platform-style.ts
index d57581de3e..92fe497a4a 100644
--- a/src/agenda/platform-style.ts
+++ b/src/agenda/platform-style.ts
@@ -1,5 +1,5 @@
 import {ViewStyle} from 'react-native';
-import {Theme} from '../commons/types';
+import {Theme} from '../types';
 
 export default function platformStyles(appStyle: Theme) {
   return {
diff --git a/src/agenda/reservation-list/index.tsx b/src/agenda/reservation-list/index.tsx
index e88fd85c8c..eb3fbb52c9 100644
--- a/src/agenda/reservation-list/index.tsx
+++ b/src/agenda/reservation-list/index.tsx
@@ -3,25 +3,19 @@ import PropTypes from 'prop-types';
 import XDate from 'xdate';
 
 import React, {Component} from 'react';
-import {
-  ActivityIndicator,
-  View,
-  FlatList,
-  ViewStyle,
-  TextStyle,
-  NativeSyntheticEvent,
-  NativeScrollEvent,
-  LayoutChangeEvent
-} from 'react-native';
+import {ActivityIndicator, View, FlatList, StyleProp, ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent} from 'react-native';
 
 // @ts-expect-error
 import {extractComponentProps} from '../../component-updater';
+// @ts-expect-error
 import {sameDate} from '../../dateutils';
+// @ts-expect-error
 import {toMarkingFormat} from '../../interface';
 import styleConstructor from './style';
 import Reservation, {ReservationProps} from './reservation';
 import {ReservationItemType, ReservationsType} from 'agenda';
 
+
 export interface DayReservations {
   reservation?: ReservationItemType;
   date?: XDate;
@@ -41,7 +35,7 @@ export type ReservationListProps = ReservationProps & {
   onDayChange?: (day: Date) => void;
   /** specify what should be rendered instead of ActivityIndicator */
   renderEmptyData: () => JSX.Element;
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
 
   /** onScroll ListView event */
   onScroll?: (yOffset: number) => void;
@@ -109,7 +103,8 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
   private heights: number[];
   private selectedDay: XDate;
   private scrollOver: boolean;
-  private list?: FlatList<DayReservations> | null;
+  private list: React.RefObject<FlatList> = React.createRef();
+
 
   constructor(props: ReservationListProps) {
     super(props);
@@ -159,7 +154,7 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
         scrollPosition += this.heights[i] || 0;
       }
       this.scrollOver = false;
-      this.list.scrollToOffset({offset: scrollPosition, animated: true});
+      this.list?.current?.scrollToOffset({offset: scrollPosition, animated: true});
     }
     this.selectedDay = selectedDay;
     this.updateDataSource(reservations.reservations);
@@ -294,7 +289,7 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
 
     return (
       <FlatList
-        ref={c => (this.list = c)}
+        ref={this.list}
         style={style}
         contentContainerStyle={this.style.content}
         data={this.state.reservations}
diff --git a/src/agenda/reservation-list/reservation.tsx b/src/agenda/reservation-list/reservation.tsx
index 9991e2dc7e..047b9ad27b 100644
--- a/src/agenda/reservation-list/reservation.tsx
+++ b/src/agenda/reservation-list/reservation.tsx
@@ -7,12 +7,15 @@ import {View, Text} from 'react-native';
 
 // @ts-expect-error
 import {xdateToData} from '../../interface';
+// @ts-expect-error
 import {isToday} from '../../dateutils';
+// @ts-expect-error
 import {RESERVATION_DATE} from '../../testIDs';
 import styleConstructor from './style';
-import {Theme} from '../../commons/types';
+import {Theme} from '../../types';
 import {DayReservations} from './index';
 
+
 export interface ReservationProps {
   item: DayReservations;
   /** Specify theme properties to override specific styles for reservation parts. Default = {} */
diff --git a/src/agenda/reservation-list/style.ts b/src/agenda/reservation-list/style.ts
index 5c4d859dc9..0e0dfd916d 100644
--- a/src/agenda/reservation-list/style.ts
+++ b/src/agenda/reservation-list/style.ts
@@ -1,6 +1,6 @@
 import {StyleSheet} from 'react-native';
 import * as defaultStyle from '../../style';
-import {Theme} from '../../commons/types';
+import {Theme} from '../../types';
 
 
 export default function styleConstructor(theme: Theme = {}) {
diff --git a/src/agenda/style.ts b/src/agenda/style.ts
index 8df4e90680..6ac9b1c631 100644
--- a/src/agenda/style.ts
+++ b/src/agenda/style.ts
@@ -1,7 +1,7 @@
 import {StyleSheet} from 'react-native';
 import * as defaultStyle from '../style';
 import platformStyles from './platform-style';
-import {Theme} from '../commons/types';
+import {Theme} from '../types';
 
 
 export default function styleConstructor(theme: Theme = {}) {
diff --git a/src/calendar-list/index.tsx b/src/calendar-list/index.tsx
index 4b7da533f7..726a1c3a51 100644
--- a/src/calendar-list/index.tsx
+++ b/src/calendar-list/index.tsx
@@ -3,26 +3,29 @@ import PropTypes from 'prop-types';
 import XDate from 'xdate';
 
 import React, {Component} from 'react';
-import {FlatList, Platform, Dimensions, View, ViewStyle, LayoutChangeEvent} from 'react-native';
+import {FlatList, Platform, Dimensions, View, ViewStyle, LayoutChangeEvent, FlatListProps} from 'react-native';
 
 // @ts-expect-error
 import {extractComponentProps} from '../component-updater';
 // @ts-expect-error
 import {xdateToData, parseDate} from '../interface';
+// @ts-expect-error
 import {page, sameDate} from '../dateutils';
+// @ts-expect-error
 import {STATIC_HEADER} from '../testIDs';
 import styleConstructor from './style';
 import Calendar, {CalendarProps} from '../calendar';
 import CalendarListItem from './item';
 import CalendarHeader from '../calendar/header/index';
 
+
 const {width} = Dimensions.get('window');
 const CALENDAR_WIDTH = width;
 const CALENDAR_HEIGHT = 360;
 const PAST_SCROLL_RANGE = 50;
 const FUTURE_SCROLL_RANGE = 50;
 
-export type CalendarListProps = CalendarProps & {
+interface Props extends CalendarProps, FlatListProps<any> {
   /** Max amount of months allowed to scroll to the past. Default = 50 */
   pastScrollRange?: number;
   /** Max amount of months allowed to scroll to the future. Default = 50 */
@@ -58,11 +61,12 @@ export type CalendarListProps = CalendarProps & {
   /** onLayout event */
   onLayout?: (event: LayoutChangeEvent) => void;
   removeClippedSubviews: boolean;
-};
+}
+export type CalendarListProps = Props;
 
 type XDateAndBump = XDate & {propBump?: number};
 
-type CalendarListState = {
+type State = {
   rows: Array<XDateAndBump>;
   texts: Array<string>;
   openDate: XDate;
@@ -76,7 +80,7 @@ type CalendarListState = {
  * @example: https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendarsList.js
  * @gif: https://github.com/wix/react-native-calendars/blob/master/demo/calendar-list.gif
  */
-class CalendarList extends Component<CalendarListProps, CalendarListState> {
+class CalendarList extends Component<Props, State> {
   static displayName = 'CalendarList';
 
   static propTypes = {
@@ -129,12 +133,12 @@ class CalendarList extends Component<CalendarListProps, CalendarListState> {
   };
 
   style: any;
-  listView: FlatList<XDateAndBump> | undefined | null;
+  list: React.RefObject<FlatList> = React.createRef();
   viewabilityConfig = {
     itemVisiblePercentThreshold: 20
   };
 
-  constructor(props: CalendarListProps) {
+  constructor(props: Props) {
     super(props);
 
     this.style = styleConstructor(props.theme);
@@ -170,7 +174,7 @@ class CalendarList extends Component<CalendarListProps, CalendarListState> {
     };
   }
 
-  componentDidUpdate(prevProps: CalendarListProps) {
+  componentDidUpdate(prevProps: Props) {
     const prevCurrent = parseDate(prevProps.current);
     const current = parseDate(this.props.current);
 
@@ -179,7 +183,7 @@ class CalendarList extends Component<CalendarListProps, CalendarListState> {
     }
   }
 
-  static getDerivedStateFromProps(_: CalendarListProps, prevState: CalendarListState) {
+  static getDerivedStateFromProps(_: Props, prevState: State) {
     const rowClone = prevState.rows;
     const newRows = [];
 
@@ -214,7 +218,7 @@ class CalendarList extends Component<CalendarListProps, CalendarListState> {
         }
       }
     }
-    this.listView?.scrollToOffset({offset: scrollAmount, animated});
+    this.list?.current?.scrollToOffset({offset: scrollAmount, animated});
   }
 
   scrollToMonth = (m: XDate) => {
@@ -225,7 +229,7 @@ class CalendarList extends Component<CalendarListProps, CalendarListState> {
     const size = horizontal ? calendarWidth : calendarHeight;
     const scrollAmount = size * pastScrollRange + diffMonths * size;
 
-    this.listView?.scrollToOffset({offset: scrollAmount, animated: animateScroll});
+    this.list?.current?.scrollToOffset({offset: scrollAmount, animated: animateScroll});
   };
 
   getItemLayout = (_: Array<XDateAndBump> | undefined | null, index: number) => {
@@ -347,7 +351,7 @@ class CalendarList extends Component<CalendarListProps, CalendarListState> {
     return (
       <View style={this.style.flatListContainer}>
         <FlatList
-          ref={c => (this.listView = c)}
+          ref={this.list}
           style={[this.style.container, style]}
           // @ts-ignore
           initialListSize={pastScrollRange + futureScrollRange + 1} // ListView deprecated
diff --git a/src/calendar-list/item.tsx b/src/calendar-list/item.tsx
index 3c18c8a824..9b6a2ea1c1 100644
--- a/src/calendar-list/item.tsx
+++ b/src/calendar-list/item.tsx
@@ -4,7 +4,7 @@ import memoize from 'memoize-one';
 import React, {Component} from 'react';
 import {Text, View} from 'react-native';
 
-import {Theme} from '../commons/types';
+import {Theme} from '../types';
 // @ts-expect-error
 import {extractComponentProps} from '../component-updater';
 import Calendar, {CalendarProps} from '../calendar';
diff --git a/src/calendar-list/style.ts b/src/calendar-list/style.ts
index fc2754f7bf..b229646b5c 100644
--- a/src/calendar-list/style.ts
+++ b/src/calendar-list/style.ts
@@ -1,6 +1,6 @@
 import {Platform, StyleSheet} from 'react-native';
 import * as defaultStyle from '../style';
-import {Theme} from '../commons/types';
+import {Theme} from '../types';
 
 export default function getStyle(theme: Theme = {}) {
   const appStyle = {...defaultStyle, ...theme};
diff --git a/src/calendar/day/basic/index.tsx b/src/calendar/day/basic/index.tsx
index dda322fe5a..b20c3ce247 100644
--- a/src/calendar/day/basic/index.tsx
+++ b/src/calendar/day/basic/index.tsx
@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 
 import React, {Component, Fragment} from 'react';
 import {TouchableOpacity, Text, View} from 'react-native';
+
+import {Theme, DateData} from '../../../types';
 // @ts-expect-error
 import {shouldUpdate} from '../../../component-updater';
 import styleConstructor from './style';
 import Marking, {MarkingTypes, MarkingProps} from '../marking';
-import {Theme} from '../../../commons/types';
 
 export interface BasicDayProps {
   state?: 'selected' | 'disabled' | 'today';
@@ -18,7 +19,7 @@ export interface BasicDayProps {
   /** Theme object */
   theme?: Theme;
   /** onPress callback */
-  onPress?: (date: Date) => void;
+  onPress?: (date: DateData) => void;
   /** onLongPress callback */
   onLongPress?: (date: Date) => void;
   /** The date to return from press callbacks */
diff --git a/src/calendar/day/basic/style.ts b/src/calendar/day/basic/style.ts
index 1f0a1d5c93..380f1721b4 100644
--- a/src/calendar/day/basic/style.ts
+++ b/src/calendar/day/basic/style.ts
@@ -1,6 +1,6 @@
 import {StyleSheet, Platform} from 'react-native';
 import * as defaultStyle from '../../../style';
-import {Theme} from '../../../commons/types';
+import {Theme} from '../../../types';
 
 export default function styleConstructor(theme: Theme = {}) {
   const appStyle = {...defaultStyle, ...theme};
diff --git a/src/calendar/day/dot/index.tsx b/src/calendar/day/dot/index.tsx
index e89bad91cd..927de00d1e 100644
--- a/src/calendar/day/dot/index.tsx
+++ b/src/calendar/day/dot/index.tsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import styleConstructor from './style';
-import {Theme} from '../../../commons/types';
+import {Theme} from '../../../types';
 
 export interface DotProps {
   theme?: Theme;
diff --git a/src/calendar/day/dot/style.ts b/src/calendar/day/dot/style.ts
index 63f93f8fe4..4326d40664 100644
--- a/src/calendar/day/dot/style.ts
+++ b/src/calendar/day/dot/style.ts
@@ -1,6 +1,6 @@
 import {StyleSheet} from 'react-native';
 import * as defaultStyle from '../../../style';
-import {Theme} from '../../../commons/types';
+import {Theme} from '../../../types';
 
 export default function styleConstructor(theme: Theme = {}) {
   const appStyle = {...defaultStyle, ...theme};
diff --git a/src/calendar/day/index.tsx b/src/calendar/day/index.tsx
index 6c475e7ebb..f1777d0fdd 100644
--- a/src/calendar/day/index.tsx
+++ b/src/calendar/day/index.tsx
@@ -4,9 +4,12 @@ import XDate from 'xdate';
 import memoize from 'memoize-one';
 
 import React, {Component} from 'react';
+
 // @ts-expect-error
 import {shouldUpdate} from '../../component-updater';
+// @ts-expect-error
 import {isToday as dateutils_isToday} from '../../dateutils';
+// @ts-expect-error
 import {xdateToData} from '../../interface';
 // @ts-expect-error
 import {SELECT_DATE_SLOT} from '../../testIDs';
@@ -14,6 +17,7 @@ import BasicDay, {BasicDayProps} from './basic';
 import PeriodDay from './period';
 import {MarkingProps} from './marking';
 
+
 const basicDayPropsTypes = _.omit(BasicDay.propTypes, 'date');
 
 export interface DayProps extends Omit<BasicDayProps, 'date'> {
diff --git a/src/calendar/day/marking/index.tsx b/src/calendar/day/marking/index.tsx
index fdfafa615b..7e29609e08 100644
--- a/src/calendar/day/marking/index.tsx
+++ b/src/calendar/day/marking/index.tsx
@@ -7,7 +7,7 @@ import {View, ViewStyle, TextStyle} from 'react-native';
 import {shouldUpdate, extractComponentProps} from '../../../component-updater';
 import styleConstructor from './style';
 import Dot, {DotProps} from '../dot';
-import {Theme} from '../../../commons/types';
+import {Theme} from '../../../types';
 
 export enum MarkingTypes {
   DOT = 'dot',
diff --git a/src/calendar/day/marking/style.ts b/src/calendar/day/marking/style.ts
index b268290337..b0b15bd14d 100644
--- a/src/calendar/day/marking/style.ts
+++ b/src/calendar/day/marking/style.ts
@@ -1,6 +1,6 @@
 import {StyleSheet} from 'react-native';
 import * as defaultStyle from '../../style';
-import {Theme} from '../../../commons/types';
+import {Theme} from '../../../types';
 
 export default function styleConstructor(theme: Theme = {}) {
   const appStyle = {...defaultStyle, ...theme};
diff --git a/src/calendar/day/period/index.tsx b/src/calendar/day/period/index.tsx
index 3584d1190b..becc0ff052 100644
--- a/src/calendar/day/period/index.tsx
+++ b/src/calendar/day/period/index.tsx
@@ -10,7 +10,7 @@ import * as defaultStyle from '../../../style';
 import styleConstructor from './style';
 import Dot from '../dot';
 import {MarkingProps} from '../marking';
-import {Theme} from '../../../commons/types';
+import {Theme} from '../../../types';
 
 interface PeriodDayProps {
   state?: 'selected' | 'disabled' | 'today' | '';
diff --git a/src/calendar/day/period/style.ts b/src/calendar/day/period/style.ts
index 1d0ee09e4f..5f06b9a2cc 100644
--- a/src/calendar/day/period/style.ts
+++ b/src/calendar/day/period/style.ts
@@ -1,6 +1,6 @@
 import {StyleSheet} from 'react-native';
 import * as defaultStyle from '../../../style';
-import {Theme} from '../../../commons/types';
+import {Theme} from '../../../types';
 
 const FILLER_HEIGHT = 34;
 
diff --git a/src/calendar/header/index.tsx b/src/calendar/header/index.tsx
index 934ee8a14d..9a8e620905 100644
--- a/src/calendar/header/index.tsx
+++ b/src/calendar/header/index.tsx
@@ -4,7 +4,7 @@ import memoize from 'memoize-one';
 import XDate from 'xdate';
 
 import React, {Component, Fragment, ReactNode} from 'react';
-import {ActivityIndicator, Platform, View, Text, TouchableOpacity, Image, ViewStyle, AccessibilityActionEvent, ColorValue} from 'react-native';
+import {ActivityIndicator, Platform, View, Text, TouchableOpacity, Image, StyleProp, ViewStyle, AccessibilityActionEvent, ColorValue} from 'react-native';
 // @ts-expect-error
 import {shouldUpdate} from '../../component-updater';
 // @ts-expect-error
@@ -18,10 +18,9 @@ import {
   // @ts-expect-error
 } from '../../testIDs';
 import styleConstructor from './style';
-import {Theme} from '../../commons/types';
+import {Theme, Direction} from '../../types';
 
-type Direction = 'left' | 'right';
-export interface CalendarHeaderProps {
+interface Props {
   theme?: Theme;
   firstDay?: number;
   displayLoadingIndicator?: boolean;
@@ -51,12 +50,13 @@ export interface CalendarHeaderProps {
   /** Provide aria-level for calendar heading for proper accessibility when used with web (react-native-web) */
   webAriaLevel?: number;
   testID?: string;
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
   accessibilityElementsHidden?: boolean;
   importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants';
 }
+export type CalendarHeaderProps = Props;
 
-class CalendarHeader extends Component<CalendarHeaderProps> {
+class CalendarHeader extends Component<Props> {
   static displayName = 'IGNORE';
 
   static propTypes = {
@@ -96,13 +96,13 @@ class CalendarHeader extends Component<CalendarHeaderProps> {
   };
   style: any;
 
-  constructor(props: CalendarHeaderProps) {
+  constructor(props: Props) {
     super(props);
 
     this.style = styleConstructor(props.theme);
   }
 
-  shouldComponentUpdate(nextProps: CalendarHeaderProps) {
+  shouldComponentUpdate(nextProps: Props) {
     if (nextProps.month?.toString('yyyy MM') !== this.props.month?.toString('yyyy MM')) {
       return true;
     }
diff --git a/src/calendar/header/style.ts b/src/calendar/header/style.ts
index 86e7a64993..495dd8cdfa 100644
--- a/src/calendar/header/style.ts
+++ b/src/calendar/header/style.ts
@@ -1,6 +1,6 @@
 import {StyleSheet, Platform} from 'react-native';
 import * as defaultStyle from '../../style';
-import {Theme} from '../../commons/types';
+import {Theme} from '../../types';
 
 export default function (theme: Theme = {}) {
   const appStyle = {...defaultStyle, ...theme};
diff --git a/src/calendar/index.tsx b/src/calendar/index.tsx
index 12b61490f2..9d72e0b665 100644
--- a/src/calendar/index.tsx
+++ b/src/calendar/index.tsx
@@ -4,11 +4,13 @@ import XDate from 'xdate';
 import memoize from 'memoize-one';
 
 import React, {Component, RefObject} from 'react';
-import {View, ViewStyle} from 'react-native';
+import {View, ViewStyle, StyleProp} from 'react-native';
 // @ts-expect-error
 import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
 
+// @ts-expect-error
 import {page, isGTE, isLTE, sameMonth} from '../dateutils';
+// @ts-expect-error
 import {xdateToData, parseDate, toMarkingFormat} from '../interface';
 // @ts-expect-error
 import {getState} from '../day-state-manager';
@@ -17,12 +19,12 @@ import {getState} from '../day-state-manager';
 import {extractComponentProps} from '../component-updater';
 // @ts-expect-error
 import {WEEK_NUMBER} from '../testIDs';
+import {Theme, DateData} from '../types';
 import styleConstructor from './style';
 import CalendarHeader, {CalendarHeaderProps} from './header';
 import Day, {DayProps} from './day/index';
 import BasicDay from './day/basic';
 import {MarkingProps} from './day/marking';
-import {Theme} from '../commons/types';
 
 type MarkedDatesType = {
   [key: string]: MarkingProps;
@@ -32,7 +34,7 @@ export interface CalendarProps extends CalendarHeaderProps, DayProps {
   /** Specify theme properties to override specific styles for calendar parts */
   theme?: Theme;
   /** Specify style for calendar container element */
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
   /** Initially visible month */
   current?: XDate;
   /** Minimum date that can be selected, dates before minDate will be grayed out */
@@ -52,13 +54,13 @@ export interface CalendarProps extends CalendarHeaderProps, DayProps {
   /** Always show six weeks on each month (only when hideExtraDays = false) */
   showSixWeeks?: boolean;
   /** Handler which gets executed on day press */
-  onDayPress?: (date: Date) => any;
+  onDayPress?: (date: DateData) => void;
   /** Handler which gets executed on day long press */
-  onDayLongPress?: (date: Date) => any;
+  onDayLongPress?: (date: DateData) => void;
   /** Handler which gets executed when month changes in calendar */
-  onMonthChange?: () => void;
+  onMonthChange?: () => DateData;
   /** Handler which gets executed when visible month changes in calendar */
-  onVisibleMonthsChange?: () => void;
+  onVisibleMonthsChange?: (months: DateData[]) => void;
   /** Disables changing month when click on days of other months (when hideExtraDays is false) */
   disableMonthChange?: boolean;
   /** Enable the option to swipe between months */
@@ -154,7 +156,7 @@ class Calendar extends Component<CalendarProps, CalendarState> {
     });
   };
 
-  handleDayInteraction(date: Date, interaction?: (date: Date) => any) {
+  handleDayInteraction(date: Date, interaction?: (date: DateData) => void) {
     const {disableMonthChange} = this.props;
     const day = parseDate(date);
     const minDate = parseDate(this.props.minDate);
diff --git a/src/calendar/style.ts b/src/calendar/style.ts
index 577ab647ab..08c8061a68 100644
--- a/src/calendar/style.ts
+++ b/src/calendar/style.ts
@@ -1,6 +1,6 @@
 import {StyleSheet} from 'react-native';
 import * as defaultStyle from '../style';
-import {Theme} from '../commons/types';
+import {Theme} from '../types';
 
 export default function getStyle(theme: Theme = {}) {
   const appStyle = {...defaultStyle, ...theme};
diff --git a/src/commons/types.ts b/src/types.ts
similarity index 67%
rename from src/commons/types.ts
rename to src/types.ts
index eb6fb75d42..a1cf01d86b 100644
--- a/src/commons/types.ts
+++ b/src/types.ts
@@ -1,7 +1,20 @@
-import {ColorValue, TextStyle} from 'react-native';
+import {ColorValue, ViewStyle, TextStyle} from 'react-native';
+// @ts-expect-error
+import {UPDATE_SOURCES} from './expandableCalendar/commons';
+
+
+export type Direction = 'left' | 'right';
+export type UpdateSource = keyof typeof UPDATE_SOURCES;
+export type DateData = {
+  year: number,
+  month: number,
+  day: number,
+  timestamp: number,
+  dateString: string
+}
 export interface Theme {
   container?: object;
-  contentStyle?: object;
+  contentStyle?: ViewStyle;
   header?: object;
   headerText?: object;
   arrowButton?: object;
@@ -22,6 +35,7 @@ export interface Theme {
     marking?: object;
     'calendar-list'?: {main?: object};
     agenda?: {main?: object, list?: object};
+    expandable?: {main?: object}
   };
   textSectionTitleColor?: string;
   textSectionTitleDisabledColor?: string;
@@ -35,11 +49,11 @@ export interface Theme {
   dotColor?: string;
   selectedDotColor?: string;
   disabledArrowColor?: string;
-  textDayFontFamily?: string;
-  textMonthFontFamily?: string;
-  textDayHeaderFontFamily?: string;
-  textDayFontWeight?: string;
-  textMonthFontWeight?: string;
+  textDayFontFamily?: TextStyle['fontFamily'];
+  textMonthFontFamily?: TextStyle['fontFamily'];
+  textDayHeaderFontFamily?: TextStyle['fontFamily'];
+  textDayFontWeight?: TextStyle['fontWeight'];
+  textMonthFontWeight?: TextStyle['fontWeight'];
   textDayHeaderFontWeight?: TextStyle['fontWeight'];
   textDayFontSize?: number;
   textMonthFontSize?: number;
@@ -57,12 +71,12 @@ export interface Theme {
   textDefaultColor?: string;
   textColor?: string;
   textLinkColor?: string;
-  todayButtonFontFamily?: string;
-  todayButtonFontWeight?: string;
+  todayButtonFontFamily?: TextStyle['fontFamily'];
+  todayButtonFontWeight?: TextStyle['fontWeight'];
   todayButtonFontSize?: number;
-  textDayStyle?: object;
+  textDayStyle?: TextStyle;
   dotStyle?: object;
-  arrowStyle?: object;
+  arrowStyle?: ViewStyle;
   todayBackgroundColor?: string;
   disabledDotColor?: string;
   todayDotColor?: string;