Agenda won't compile at all. Type errors everywhere in the example provided.

Description

When copying the example code (and even fixing some of the type errors in the files) the Agenda component has a blaring error saying that every paramater is a missing a series of items.

Expected Behavior

The example should run a bare agenda (just like calendar and calendar list, maybe with minimal editing)

Observed Behavior

Type errors everywhere! Couldn’t compile. After fixing type errors, eg. selected had to be a boolean???, this was the error displayed on the Agenda tag itself.

Type '{ items: { '2021-12-22': { name: string; height: number; day: string; }[]; '2021-12-23': { name: string; height: number; day: string; }[]; '2021-12-24': never[]; '2021-12-25': { name: string; height: number; day: string; }[]; }; ... 19 more ...; style: {}; }' is missing the following properties from type 'Pick<Readonly<AgendaProps> & Readonly<{ children?: ReactNode; }>, "testID" | "children" | "hitSlop" | "onLayout" | "pointerEvents" | ... 194 more ... | "webAriaLevel">': showOnlySelectedDayItems, item ts(2739)

Environment

• react-native-calendars@1.1271.0

• @react-navigation/native-stack@6.2.5 │ ├─┬ @react-navigation/elements@1.2.1 │ │ └── react-native@0.64.3 deduped │ └── react-native@0.64.3 deduped ├─┬ @react-navigation/native@6.0.6 │ └── react-native@0.64.3 deduped ├─┬ react-native-animated-loader@0.0.9 │ ├─┬ lottie-react-native@5.0.1 │ │ ├─┬ react-native-safe-modules@1.0.3 │ │ │ └── react-native@0.64.3 deduped │ │ └── react-native@0.64.3 deduped │ └── react-native@0.64.3 deduped ├─┬ react-native-inset-shadow@1.0.3 │ └── react-native@0.64.3 deduped ├─┬ react-native-safe-area-context@3.3.2 │ └── react-native@0.64.3 deduped ├─┬ react-native-screens@3.8.0 │ └── react-native@0.64.3 deduped └─┬ react-native@0.64.3 └─┬ @react-native-community/cli@5.0.1 └── react-native@0.64.3 deduped

12.0.1 - OS version MacBook Pro 2019

Reproducible Demo

<Agenda
          // 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={{
            '2021-12-22': [{name: 'item 1 - any js object', height: 80, day: ''}],
            '2021-12-23': [{name: 'item 2 - any js object', height: 80, day: ''}],
            '2021-12-24': [],
            '2021-12-25': [{name: 'item 3 - any js object', height: 100, day: ''}, {name: 'any js object', height: 80, day: ''}]
          }}
          // Callback that gets called when items for a certain month should be loaded (month became visible)
          //    loadItemsForMonth={(month) => {console.log('trigger items loading')}}
          // Callback that fires when the calendar is opened or closed
          onCalendarToggled={(calendarOpened) => {console.log(calendarOpened)}}
          // Callback that gets called on day press
          onDayPress={(day) => {console.log('day pressed')}}
          // Callback that gets called when day changes while scrolling agenda list
          onDayChange={(day) => {console.log('day changed')}}
          // Initially selected day
          selected= {true}
          // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
          //    minDate={'2012-05-10'}
          // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
          //    maxDate={'2012-05-30'}
          // Max amount of months allowed to scroll to the past. Default = 50
          pastScrollRange={50}
          // Max amount of months allowed to scroll to the future. Default = 50
          futureScrollRange={50}
          // Specify how each item should be rendered in agenda
          renderItem={(item, firstItemInDay) => {return (<View />);}}
          // Specify how each date should be rendered. day can be undefined if the item is not first in that day
          renderDay={(day, item) => {return (<View />);}}
          // Specify how empty date content with no items should be rendered
          renderEmptyDate={() => {return (<View />);}}
          // Specify how agenda knob should look like
          renderKnob={() => {return (<View />);}}
          // Specify what should be rendered instead of ActivityIndicator
          renderEmptyData = {() => {return (<View />);}}
          // Specify your item comparison function for increased performance
          rowHasChanged={(r1, r2) => {return r1.text !== r2.text}}
          // Hide knob button. Default = false
          hideKnob={true}
          // 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={false}
          // By default, agenda dates are marked if they have at least one item, but you can override this if needed
          markedDates={{
            '2012-05-16': {selected: true, marked: true},
            '2012-05-17': {marked: true},
            '2012-05-18': {disabled: true}
          }}
          // If disabledByDefault={true} dates flagged as not disabled will be enabled. Default = false
          disabledByDefault={true}
          // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly
          onRefresh={() => console.log('refreshing...')}
          // Set this true while waiting for new data from a refresh
          refreshing={false}
          // Add a custom RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView
          //    refreshControl={null}

          // Agenda theme
          theme={{
            backgroundColor: Colours.myMainDark,
            calendarBackground: Colours.myMainDark,
            textSectionTitleColor: 'rgba(255, 255, 255, 0.5)',
            textSectionTitleDisabledColor: 'green',
            selectedDayBackgroundColor: 'yellow',
            selectedDayTextColor: 'purple',
            todayTextColor: Colours.myAccent,
            dayTextColor: Colours.myWhiteText,
            textDisabledColor: 'rgba(255, 255, 255, 0.5)',
            dotColor: 'pink',
            selectedDotColor: '#ffffff',
            arrowColor: Colours.myPrimary,
            disabledArrowColor: '#d9e1e8',
            monthTextColor: Colours.myPrimary,
            indicatorColor: 'white',
            textDayFontFamily: Font.mainFont,
            textMonthFontFamily: Font.mainFont,
            textDayHeaderFontFamily: Font.mainFont,
            textDayFontWeight: '300',
            textMonthFontWeight: 'bold',
            textDayHeaderFontWeight: '300',
            textDayFontSize: 16,
            textMonthFontSize: 16,
            textDayHeaderFontSize: 16,
            agendaDayTextColor: 'yellow',
            agendaDayNumColor: 'green',
            agendaTodayColor: 'red',
            agendaKnobColor: 'blue'
          }}
          // Agenda container style
          style={{}}
        />

[JSimai]

Legendary! That video helps heaps! Thank you.

[patr0cl0]

Hey, this is happening to me as well, try looking at #388