React-native-calendars: onDayPress does not respond

[manoel17rpn]

This is my code.

This works fine, but when I clicked in any day does not respond in terminal. Simply nothing happens when I click.

       <Calendar
              style={styles.calendar}
              onDayPress={(day) => {console.log("clicked")}}
              current={'2018-03-01'}
              minDate={'2018-03-01'}
              markingType={'custom'}
              hideExtraDays
              theme={{
                calendarBackground: '#1FB2AA',
                textSectionTitleColor: 'white',
                todayTextColor: 'white',
                dayTextColor: 'white',
                selectedDayTextColor: 'white',
                monthTextColor: 'white',
                selectedDayBackgroundColor: '#333248',
                arrowColor: 'white',
              }}
              markedDates={{
                '2018-03-08': {selected: true,
                  customStyles: {
                    text: {
                      color: 'white'
                    }
                  }
                },
                '2018-03-09': {
                  customStyles: {
                    container: {
                      backgroundColor: 'red',
                    },
                    text: {
                      color: 'white',
                    },
                  }
                }}}
              hideArrows={false}
            />

[thetrevlore]

Update: My issue is #466. On an emulator it works in debug mode. But not on an external device.

+1. I've tried a physical Samsung Galaxy S7 with Android 7.0.0 and a physical Google Pixel with Android 8.0.0.

My code is similar to above, the touchable opacity of the selected date responds to the touch, but I can't for the life of me get a console.log to happen. It's as if onDayPress is the wrong parameter name.

react-native: 0.51
react-native-calendars: ^1.17.7

<CalendarList pastScrollRange={6} futureScrollRange={2} showScrollIndicator renderArrow={(direction) => (<Icon name={`angle-${direction}`} size={25} color="black" />)} maxDate={this.maxDate} onDayPress={(day) => {console.log('selected day', day)}} onDayLongPress={(day) => { this.selectedDay(day); }} monthFormat="MMMM yyyy" onMonthChange={(month) => { console.log('month changed', month); }} hideExtraDays disableMonthChange firstDay={0} onPressArrowLeft={substractMonth => substractMonth()} onPressArrowRight={addMonth => addMonth()} markingType="multi-dot" markedDates={this.state.markedDates} theme={{ selectedDayBackgroundColor: '#00adf5' }} />

[shreyas1496]

@manoel17rpn @thetrevlore
I faced the similar issue. onDayLongPress was getting called instead of onDayPress. I think this is not react-native-calendar issue. It is the issue of timing difference between your react native host and your mobile phone. Use network-provided time and network-provided timezone on both the devices to get them in sync.

This worked for me. Let me know if you still face the issue

[kevinzhangftw]

@shreyas1496 @manoel17rpn @thetrevlore @tautvilas
what do you mean by "Use network-provided time and network-provided timezone on both the devices to get them in sync" ? how would I do that? I google it and dont seem to find any references as to how to do this.

I am running into the same issue with onDayPress in , problem only happens on android device

[kevinzhangftw]

I have just build a minimal sample app
https://github.com/kevinzhangftw/React-Native-Agenda-View

I was able to reproduce this error on android devices. Is this a bug that we can fix?

[shreyas1496]

@kevinzhangftw
I faced this issue only when the chrome debugger was on. When the debugger is on, js code is runs on the chrome v8 engine and not on the phone. JS code and native code communicate by sending messages over the bridge along with timestamps.

So, the touchable opacity of the selected date responds to the touch, but due to difference in time between phone and debugger, onDayPress is handled as onDayLongPress.

With "Use network-provided time and network-provided timezone on both the devices to get them in sync", I meant try to set the phone's time equal to the computer time so you don't invoke wrong callbacks

You can see many similar issues like https://github.com/facebook/react-native/issues/8720, https://github.com/facebook/react-native/issues/11989