fix style type

src/agenda/index.tsx

@@ -4,7 +4,7 @@ import XDate from 'xdate';
 import memoize from 'memoize-one';
 
 import React, {Component} from 'react';
-import {Text, View, Dimensions, Animated, ViewStyle, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
+import {Text, View, Dimensions, Animated, StyleProp, ViewStyle, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
 
 // @ts-expect-error
 import {extractComponentProps} from '../component-updater.js';
@@ -36,8 +36,6 @@ export type ReservationsType = {
 }
 
 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
    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 */
@@ -47,9 +45,9 @@ export type AgendaProps = CalendarListProps & ReservationListProps & {
   /** 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;
+  onDayPress?: (data: any) => DateData;
   /** callback that gets called when day changes while scrolling agenda list */
-  onDaychange?: (data: any) => void; //TODO: Should be renamed 'onDayChange'
+  onDayChange?: (data: any) => void;
   /** specify how agenda knob should look like */
   renderKnob?: () => JSX.Element;
   /** initially selected day */
@@ -95,7 +93,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 */

src/agenda/reservation-list/index.tsx

@@ -3,7 +3,7 @@ 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';
@@ -35,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;

src/calendar-list/index.tsx

@@ -3,7 +3,7 @@ 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';
@@ -24,7 +24,7 @@ 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 */
@@ -60,11 +60,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;
@@ -78,7 +79,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 = {
@@ -136,7 +137,7 @@ class CalendarList extends Component<CalendarListProps, CalendarListState> {
     itemVisiblePercentThreshold: 20
   };
 
-  constructor(props: CalendarListProps) {
+  constructor(props: Props) {
     super(props);
 
     this.style = styleConstructor(props.theme);
@@ -172,7 +173,7 @@ class CalendarList extends Component<CalendarListProps, CalendarListState> {
     };
   }
 
-  componentDidUpdate(prevProps: CalendarListProps) {
+  componentDidUpdate(prevProps: Props) {
     const prevCurrent = parseDate(prevProps.current);
     const current = parseDate(this.props.current);
 
@@ -181,7 +182,7 @@ class CalendarList extends Component<CalendarListProps, CalendarListState> {
     }
   }
 
-  static getDerivedStateFromProps(_: CalendarListProps, prevState: CalendarListState) {
+  static getDerivedStateFromProps(_: Props, prevState: State) {
     const rowClone = prevState.rows;
     const newRows = [];
 

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
@@ -21,7 +21,7 @@ import styleConstructor from './style';
 import {Theme} from '../../types';
 
 type Direction = 'left' | 'right';
-export interface CalendarHeaderProps {
+interface Props {
   theme?: Theme;
   firstDay?: number;
   displayLoadingIndicator?: boolean;
@@ -51,12 +51,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 +97,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;
     }

src/calendar/index.tsx

@@ -4,7 +4,7 @@ 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';
 
@@ -19,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, DateData} from '../types';
 
 
 type MarkedDatesType = {
@@ -35,7 +35,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 */
@@ -55,7 +55,7 @@ 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: Date) => DateData;
   /** Handler which gets executed on day long press */
   onDayLongPress?: (date: Date) => any;
   /** Handler which gets executed when month changes in calendar */