Fix TS configuration so it can be used in our example screens

Author: ethanshar

example/src/screens/calendars.tsx

@@ -1,7 +1,6 @@
 import React, {useState, Fragment} from 'react';
 import {StyleSheet, View, ScrollView, Text, TouchableOpacity, Switch} from 'react-native';
-// @ts-expect-error
-import {Calendar} from 'react-native-calendars';
+import {Calendar, CalendarProps} from 'react-native-calendars';
 import testIDs from '../testIDs';
 
 const INITIAL_DATE = '2020-02-02';
@@ -14,7 +13,7 @@ const CalendarsScreen = () => {
     setShowMarkedDatesExamples(!showMarkedDatesExamples);
   };
 
-  const onDayPress = day => {
+  const onDayPress: CalendarProps['onDayPress'] = day => {
     setSelected(day.dateString);
   };
 
@@ -349,7 +348,7 @@ const CalendarsScreen = () => {
             return (
               <View>
                 <Text style={[styles.customDay, state === 'disabled' ? styles.disabledText : styles.defaultText]}>
-                  {date.day}
+                  {date?.day}
                 </Text>
               </View>
             );
@@ -362,6 +361,7 @@ const CalendarsScreen = () => {
   const renderCalendarWithCustomHeader = () => {
     const CustomHeader = React.forwardRef((props, ref) => {
       return (
+        // @ts-expect-error
         <View ref={ref} {...props} style={styles.customHeader}>
           <Text>This is a custom header!</Text>
           <TouchableOpacity onPress={() => console.warn('Tapped!')}>

src/calendar/day/index.tsx

@@ -13,14 +13,15 @@ import {SELECT_DATE_SLOT} from '../../testIDs';
 import BasicDay, {BasicDayProps} from './basic';
 import PeriodDay from './period';
 import {MarkingProps} from './marking';
+import {DateData} from '../../types';
 
 const basicDayPropsTypes = omit(BasicDay.propTypes, 'date');
 
 export interface DayProps extends Omit<BasicDayProps, 'date'> {
   /** The day to render */
   day?: XDate;
   /** Provide custom day rendering component */
-  dayComponent?: any;
+  dayComponent?: React.ComponentType<DayProps & {date?: DateData}>;
 }
 
 export default class Day extends Component<DayProps> {

src/calendar/day/marking/index.tsx

@@ -1,7 +1,7 @@
 import filter from 'lodash/filter';
 
 import React, {Component} from 'react';
-import {View, ViewStyle, TextStyle} from 'react-native';
+import {View, ViewStyle, TextStyle, StyleProp} from 'react-native';
 
 import {Theme, MarkingTypes} from '../../../types';
 import {shouldUpdate, extractComponentProps} from '../../../componentUpdater';
@@ -44,8 +44,11 @@ export interface MarkingProps extends DotProps {
   inactive?: boolean;
   disableTouchEvent?: boolean;
   activeOpacity?: number;
+  textColor?: string;
   selectedColor?: string;
   selectedTextColor?: string;
+  customTextStyle?: StyleProp<TextStyle>;
+  customContainerStyle?: StyleProp<ViewStyle>;
   dotColor?: string;
   //multi-dot
   dots?: DOT[];

src/calendar/index.tsx

@@ -31,11 +31,11 @@ export interface CalendarProps extends CalendarHeaderProps, DayProps {
   /** Specify style for calendar container element */
   style?: StyleProp<ViewStyle>;
   /** Initially visible month */
-  current?: XDate;
+  current?: string;
   /** Minimum date that can be selected, dates before minDate will be grayed out */
-  minDate?: XDate;
+  minDate?: string;
   /** Maximum date that can be selected, dates after maxDate will be grayed out */
-  maxDate?: XDate;
+  maxDate?: string;
   /** If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday */
   firstDay?: number;
   /** Collection of dates that have to be marked */

src/types.ts

@@ -1,7 +1,6 @@
-import {ViewStyle, TextStyle} from 'react-native';
+import {ViewStyle, TextStyle, StyleProp} from 'react-native';
 import {UpdateSources} from './expandableCalendar/commons';
 
-
 export type MarkingTypes = 'dot' | 'multi-dot' | 'period' | 'multi-period' | 'custom';
 export type DayState = 'selected' | 'disabled' | 'inactive' | 'today' | '';
 export type Direction = 'left' | 'right';
@@ -12,7 +11,7 @@ export type DateData = {
   day: number;
   timestamp: number;
   dateString: string;
-}
+};
 export interface Theme {
   container?: object;
   contentStyle?: ViewStyle;
@@ -88,4 +87,7 @@ export interface Theme {
   arrowHeight?: number;
   arrowWidth?: number;
   weekVerticalMargin?: number;
+  'stylesheet.calendar.header'?: {
+    week: StyleProp<ViewStyle>;
+  };
 }

tsconfig.json

@@ -17,10 +17,12 @@
     // "emitDeclarationOnly": true,
     // "noImplicitAny": false
     "declaration": true,
-    "baseUrl": "src",
-    "paths": {}
+    "baseUrl": ".",
+    "paths": {
+      "react-native-calendars": ["src/index.ts"],
+    }
   },
   // "include": ["src/calendar/day/basic", "src/global.d.ts"],
-  "include": ["src/**/*"],
+  "include": ["src/**/*", "example/src/screens/calendars.tsx"],
   "exclude": ["node_modules", "testUtils"]
 }