React-native-calendars: Missing state prop in custom day component

[CauchR6]

I tried implementing a custom day component to override the marking type in the calendar. I followed the documentation related to this, but I receive different parameters than what is enumerated in the documentation. See below for more info.

Description

The problem is the dayComponent override does not give marking, state and other props mentionned like onDayPress.

Expected Behavior

I expected the signature to correspond to the doc. If it is an issue related to removed props in later versions, then I would like to know how I can access those props to disable some dates in custom day components.
Expected behavior (taken from v1.403.0):

Observed Behavior

See this screenshot for current behavior (on v1.1129.0):

This is an example entry of what I receive from dayComponent override.

{
  "accessibilityLabel": " Friday 8 January 2021 ", 
  "children": 8, 
  "date": {"dateString": "2021-01-08", "day": 8, "month": 1, "timestamp": 1610064000000, "year": 2021},
  "testID": "native.calendar.SELECT_DATE_SLOT-2021-01-08"
}

Notice there is no marking or state entry. Those are then undefined.

Environment

• react-native-calendars is running version '1.1129.0' which is at the time writing this, the latest release on NPM.
  EDIT: I tested the version 1.403 of the lib following this discussion and it works. It also has marking and the other props missing. Maybe those were changed in later versions and the doc was not updated?
• react-native is on version '0.63.4'.

Also specify:

1. Phone/emulator/simulator & version: ios simulator on latest IOS version.

Reproducible Demo

const renderDayComponent = ({
    date,
    state,
  }: {
    date: CalendarDate
    state: any
  }) => {
    console.log(state) // State is undefined on all entries.
    const isDisabled = state === 'disabled' **// always falsy**
    const textStyle = isDisabled ? styles.disabledText : styles.defaultDateText

    return (
      <View style={mark[date.dateString]?.customStyles.container}>
        <TouchableOpacity onPress={() => onPressDate(date)}>
          <Text style={[styles.center, textStyle]}>{date.day}</Text>
          <View style={styles.markingRow}>
            {checkCompliance(date) ? (
              <CheckmarkIcon
                size={Theme.metrics.shape.size.small}
                color={Theme.colors.primaryDark}
              />
            ) : (
              <Text style={styles.notCompliantText}>x</Text>
            )}
          </View>
        </TouchableOpacity>
      </View>
    )
  }

// ...
<Calendar
            ref={calendarRef}
            current={selectedDate}
            onDayPress={onChangeDate}
            style={styles.calendar}
            minDate={startDate.atStartOfMonth().toDayFormat()}
            maxDate={lastCalendarDate}
            markedDates={mark}
            renderHeader={(date: Date) => Header(date)}
            onMonthChange={({ dateString }: { dateString: string }) =>
              handleMonthChange(dateString)
            }
            dayComponent={renderDayComponent}
            enableSwipeMonths
            disableMonthChange
            disableAllTouchEventsForDisabledDays
          />

[jhogervorst]

I’m having a similar problem, missing the onPress prop in my custom day component.

Some trial-and-error showed that this issue started appearing since version 1.830.0 on NPM. This seems to be caused by one of the commits from Dec 10, 2020.

As workaround, I installed the previous version 1.829.0 using npm install [email protected].

[BossBele]

Same issue with state prop in custom day component --- latest version

[SergeySlutskiyGowombat]

I’m having a similar problem. found that the lib provide rest of props using propTypes
const dayProps = extractComponentProps(Component, this.props);
I used props from the PeriodDay:
static propTypes = {
state: PropTypes.oneOf(['selected', 'disabled', 'today', '']), //TODO: deprecate
marking: PropTypes.any,
theme: PropTypes.object,
onPress: PropTypes.func,
onLongPress: PropTypes.func,
date: PropTypes.object
};
But, if you want to memoize component that trick not working

[YarmolenkoD]

I had similar issue with 1.265.0 version and update to 1.403.0 helped me https://github.com/wix/react-native-calendars/issues/1373#issuecomment-746625048.

[jetBn]

how to solve it ?

[SergeySlutskiyGowombat]

how to solve it ?

You can add PropTypes to your custom day component.

I used props from the PeriodDay:
static propTypes = {
state: PropTypes.oneOf(['selected', 'disabled', 'today', '']),
marking: PropTypes.any,
theme: PropTypes.object,
onPress: PropTypes.func,
onLongPress: PropTypes.func,
date: PropTypes.object
};

it helps me

[PatrickBokhove]

I'm experiencing the same issue since i did a full new npm installtoday. marking and onPress seem to be undefined in my memoized dayComponent.

Fixed by uninstalling version 1.403.0 and installing version 1.829.0 as mentioned here

[patradanai]

DayComponent.propTypes = {
state: PropTypes.oneOf(['selected', 'disabled', 'today', '']),
marking: PropTypes.any,
theme: PropTypes.object,
onPress: PropTypes.func,
onLongPress: PropTypes.func,
date: PropTypes.object,
};

I fiexd it with propsTypes

[quizzy]

This patch fixed it for me #1407