React-native-calendars: `addMonth` and `substractMonth` not working with ref

Created on 10 Mar 2019 · 4Comments · Source: wix/react-native-calendars

Please make our job easier by filling this template out to completion. If you're requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

I am trying to create my own separate buttons for right and left and pass it the bottom of the screen.
So I wanna use reference to call addMonth() and substractMonth()

Expected Behavior

I can make a reference of the calendar ref={ref=>this.calendar=ref}. I can call functions this.calendar.addMonth() and this.calendar.substractMonth()

Here is the example with addMonth():
`const ForwardButton = ({ onPress }) => (

);
class CalendarModal extends PureComponent {
constructor(props) {
super(props);
this.onButtonPressHandler = this.onButtonPressHandler.bind(this);
}
onButtonPressHandler() {
if (this.calendar) {
this.calendar.addMonth();
}
}
render() {
const { onDayPress, due_date } = this.props;
const date = due_date
? moment(due_date).format("YYYY-MM-DD")
: moment()
.add(3, "days")
.format("YYYY-MM-DD");

let selection = {};
selection[`${date}`] = {
  selected: true,
  // marked: true,
  selectedColor: "#6E64C5"
};
return (
  <View style={styles.root}>
    <View style={styles.main}>
      <View style={styles.header}>
          <ForwardButton onPress={this.onButtonPressHandler} />
      </View>
      <Calendar
        style={styles.calendar}
        minDate={moment(new Date())
          .add(3, "days")
          .toDate()}
        maxDate={moment(new Date())
          .add(10, "days")
          .toDate()}
        onDayPress={date => onDayPress(moment(date.dateString).toDate())}
        markedDates={selection}
        ref={ref => (this.calendar = ref)}
        hideArrows={true}
        theme={{
          "stylesheet.calendar.header": {
            header: {
              height: 0
            }
          }
        }}
      />
      <View style={styles.footer}>
        <TouchableOpacity>
          <View style={styles.doneButton}>
            <Text style={styles.doneButtonText}>Done</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  </View>
);

}
}`

Observed Behavior

After pressing on the custom button with reference to calendar it shows me an error:

day.clone is not a function

Calendar.updateMonth
    d6ae6b80-b3d0-44a7-80a4-491b1107edf4:161750:29
Calendar.proxiedMethod
    d6ae6b80-b3d0-44a7-80a4-491b1107edf4:42639:32
CalendarModal.onButtonPressHandler
    d6ae6b80-b3d0-44a7-80a4-491b1107edf4:161389:23
CalendarModal.proxiedMethod
    d6ae6b80-b3d0-44a7-80a4-491b1107edf4:42639:32
Object.touchableHandlePress
    d6ae6b80-b3d0-44a7-80a4-491b1107edf4:46634:40
Object._performSideEffectsForTransition
    d6ae6b80-b3d0-44a7-80a4-491b1107edf4:46155:16
Object._receiveSignal
    d6ae6b80-b3d0-44a7-80a4-491b1107edf4:46084:14
Object.touchableHandleResponderRelease
    d6ae6b80-b3d0-44a7-80a4-491b1107edf4:45963:12
Object.invokeGuardedCallbackImpl
    d6ae6b80-b3d0-44a7-80a4-491b1107edf4:9205:16
invokeGuardedCallback
    d6ae6b80-b3d0-44a7-80a4-491b1107edf4:9296:37

Environment

npm ls react-native-calendars: [email protected]
npm ls react-native: [email protected]

Also specify:

Phone/emulator/simulator & version:

Reproducible Demo

class CustomCalendar extends Component{ render(){ return ( <View> <TouchableOpacity onPress={()=>this.calendar.addMonth()}><Text>Next Month</Text></TouchableOpacity> <Calendar ref={ref=>this.calendar=ref}/> </View> ) } }

Source