Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Selectables week numbers

See original GitHub issue

Description

When running the example app, pressing one of the week numbers on the Calendar with week numbers example causes the app to crash.

Expected Behavior

The week numbers should not be selectable ( behaving like other markings, such as the weekday names on the top)

Observed Behavior

Selecting the week number triggered the onPress prop to trigger when it was not defined for the week numbers, causing the example app to crash.

Error output from the console:

ExceptionsManager.js:65 this.props.onPress is not a function
handleException	@	ExceptionsManager.js:65
handleError	@	InitializeCore.js:115
reportFatalError	@	error-guard.js:44
__guardSafe	@	MessageQueue.js:318
callFunctionReturnFlushedQueue	@	MessageQueue.js:117
(anonymous)	@	debuggerWorker.js:72

Environment

npm ls react-native-calendars: react-native-calendars@1.17.3
npm ls react-native: react-native@0.53.3

Also specify:

Phone/emulator/simulator & version: Simulator Version 10.0 (SimulatorApp-835.5 CoreSimulator-494.33)
OS: macOS High Sierra 10.13.3

Reproducible Demo

The error can be observed on the example app present on the repository, but here follows a minimal reproducible version:

import React, {Component} from 'react';
import { StyleSheet, View } from 'react-native';
import {Calendar} from 'react-native-calendars';

export default class CalendarsScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.onDayPress = this.onDayPress.bind(this);
  }

  render() {
    return (
      <View style={styles.container}>
        <Calendar
          onDayPress={this.onDayPress}
          style={styles.calendar}
          hideExtraDays
          showWeekNumbers
          markedDates={{[this.state.selected]: {selected: true}}}
        />
      </View>
    );
  }

  onDayPress(day) {
    this.setState({
      selected: day.dateString
    });
  }
}

const styles = StyleSheet.create({
  calendar: {
    borderTopWidth: 1,
    paddingTop: 5,
    borderBottomWidth: 1,
    borderColor: '#eee',
    height: 350
  },
  container: {
    flex: 1,
    backgroundColor: 'gray'
  }
});