Changing date prop of Calendar component not updating the Calendar UI

[VinitSarvade]

I've added a custom header to the calendar, where I'm allowing the change of date with prev and next buttons. Clicking these buttons, the date is being updated and passed on to the Calendar component. But the Calendar UI remains the same. It does not change to the date. Swipping on the calendar works, but not via an external state.

Here is my code

import React, { useState } from 'react';
import { Calendar as BigCalendar } from 'react-native-big-calendar';

import CalendarHeader from './CalenderHeader';

export default function Calendar() {
  const [date, setDate] = useState<Date>(new Date());

  const handleDateChange = (updatedDate: Date) => {
    setDate(() => new Date(updatedDate));
  };

  return (
    <>
      <CalendarHeader date={date} onDateChange={handleDateChange} />
      <BigCalendar
        ampm
        mode="day"
        date={date}
        events={[
          {
            title: 'Meeting 0',
            start: new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1, 3, 0),
            end: new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1, 5, 0),
          },
          {
            title: 'Meeting',
            start: new Date(date.getFullYear(), date.getMonth(), date.getDate(), 10, 0),
            end: new Date(date.getFullYear(), date.getMonth(), date.getDate(), 11, 0),
          },
          {
            title: 'Coffee break',
            start: new Date(date.getFullYear(), date.getMonth(), date.getDate(), 4 + 12, 15),
            end: new Date(date.getFullYear(), date.getMonth(), date.getDate(), 4 + 12, 40),
          },
        ]}
        overlapOffset={100}
        height={680}
        renderHeader={() => null}
      />
    </>
  );
}

Here is the CalenderHeader

import React from 'react';
import { add as addDuration } from 'date-fns';

import { Text, Wrapper, Button } from '@flurn/pandora/components';
import { DateFormats, formatDate } from '@flurn/pandora/utils';

interface CalendarHeaderProps {
  date: Date;
  onDateChange: (date: Date) => void;
}

export default function CalendarHeader(props: CalendarHeaderProps): JSX.Element {
  const { date, onDateChange } = props;

  const handleDateChange = (change: number) => () => {
    onDateChange(addDuration(date, { days: change }));
  };

  return (
    <Wrapper justifyContent="space-evenly" flexDirection="row" alignItems="center" my={12}>
      <Button fullWidth={false} primary={false} label="< Prev" onPress={handleDateChange(-1)} />
      <Text bold>{formatDate({ date1: date.toString(), option: DateFormats.Day })}</Text>
      <Button fullWidth={false} primary={false} label="Next >" onPress={handleDateChange(+1)} />
    </Wrapper>
  );
}

This is happening on both Android and iOS. Tested on android device and iOS simulator.

Here is the behavior - https://user-images.githubusercontent.com/12946926/127954631-3765fb86-8eb5-47f5-869b-8df198b2feea.mp4

In the above video, you can see that initially swiping on the screen takes me to the previous date. But when I try to click on the header buttons, I see a flicker but the current day calendar does not change.

[acro5piano]

Thanks for reporting.

Which platform are you trouble in? and how your CalendarHeader looks like?

It does not happen when I tried on the web - please check it the following files.

• src: https://github.com/acro5piano/react-native-big-calendar/blob/master/stories/full-customization.stories.tsx
• story: https://react-native-big-calendar.netlify.app/?path=/story/full-customization--main

Thanks

[VinitSarvade]

Thanks for reporting.

Which platform are you trouble in? and how your CalendarHeader looks like?

It does not happen when I tried on the web - please check it the following files.

• src: https://github.com/acro5piano/react-native-big-calendar/blob/master/stories/full-customization.stories.tsx
• story: https://react-native-big-calendar.netlify.app/?path=/story/full-customization--main

Thanks

I've tried it on both android and ios. I've also updated the issues with the CalenderHeader code and the correct video that shows the issue.

[acro5piano]

It's strange.

[kevinshibuya]

Just runned into this issue too, the date state coming from the context updates the Header component but not the Calendar component, any news?

[kevinshibuya]

It's the same thing with the mode prop, when I try to change its value with a variable, nothing changes, and the component defaults to the "week" mode.

[kevinshibuya]

Found out what I was doing wrong, I was trying to use the context on the component that was using the provider, that is why it was all undefined, the mode and date props are working properly on my android.