React-native-calendars: onDayPress does not work when overriding day component

[ikotsov]

Description

Hello,

I am using CalendarList and a custom Day component. onDayPress prop works as expected without defining a custom day component. When I define one it does not work at all, does not respond. I tried that with the example code just to be 100% sure > https://github.com/wix/react-native-calendars#overriding-day-component

To make it work I wrapped my custom day component into a TouchableOpacity tag, but I know judging from the source code that this is not valid.

<CalendarList
style={[styles.calendar, { height: 300 }]}
dayComponent={({ date, state }) => {
  return (
    <TouchableOpacity onPress={myOnPress}>
      <View>
        <Text
          style={{
            textAlign: 'center',
            color: state === 'disabled' ? 'gray' : 'black'
          }}>
          {date.day}
        </Text>
      </View>
    <TouchableOpacity/>
  );
}}
/>

Is this a bug?

Expected Behavior

The onDayPress prop to respond and work as expected when defining a custom day component using dayComponent prop.

Environment

• npm ls react-native-calendars: 1.265.0
• npm ls react-native: 0.61.4

Also specified:

1. Phone/emulator/simulator & version: Nexus_5_API_28

[chenei]

Yes, you right.
We need to rethink about the API of dayComponent.

[MaiconGilton]

I found there are two more props coming from dayComponent you can use for that, so you can do:

dayComponent={({ date, state, onPress, onLongPress }) => 
        <TouchableOpacity onPress={onPress} onLongPress={onLongPress}>
           <Text
             style={{
               textAlign: 'center',
               color: state === 'disabled' ? 'gray' : 'black'
             }}>
             {date.day}
           </Text>
       <TouchableOpacity/>

[carloswbarros]

I found there are two more props coming from dayComponent you can use for that, so you can do:

dayComponent={({ date, state, onPress, onLongPress }) => 
        <TouchableOpacity onPress={onPress} onLongPress={onLongPress}>
           <Text
             style={{
               textAlign: 'center',
               color: state === 'disabled' ? 'gray' : 'black'
             }}>
             {date.day}
           </Text>
       <TouchableOpacity/>

Nice find, and if you need the same parameter used in onPress and onLongPress you can use the date

dayComponent={({ date, state, onPress, onLongPress }) => {         
    return (
        <TouchableOpacity onPress={() => onPress(date)} onLongPress={() => onLongPress(date)}>
            <Text>
                ...
            </Text>    
        </TouchableOpacity>
    );
}}

[Karthik-B-06]

I found there are two more props coming from dayComponent you can use for that, so you can do:

dayComponent={({ date, state, onPress, onLongPress }) => 
        <TouchableOpacity onPress={onPress} onLongPress={onLongPress}>
           <Text
             style={{
               textAlign: 'center',
               color: state === 'disabled' ? 'gray' : 'black'
             }}>
             {date.day}
           </Text>
       <TouchableOpacity/>

Nice find, and if you need the same parameter used in onPress and onLongPress you can use the date

dayComponent={({ date, state, onPress, onLongPress }) => {         
    return (
        <TouchableOpacity onPress={() => onPress(date)} onLongPress={() => onLongPress(date)}>
            <Text>
                ...
            </Text>    
        </TouchableOpacity>
    );
}}

Does this affect the performance of the calendar?