react-nativereact-native-calendars

react-native-calendars jump to a selected month


I'm using react-native-calendars. I have a <Calendar/> component.

I've read the docs about dozen times, and couldn't find any better prop for changing month than the current prop, which initializes the view of the calendar. For example, if I set current={"2014-01-01"}, I will see calendar of 2014, 1st of Jan. The problem is I can't re-render this prop.

I also tried to use key prop, but it doesn't change date. Ref is not an option either, I've got custom <CalendarHeader/>

package.json

 "react": "17.0.2",
 "react-native": "0.66.4",
 "react-native-calendars": "1.1274.0"

Calendar.tsx

const CalendarScreen = () => {
  const [current, setCurrent] = useState('2020-01-01');

return (
        <Calendar
          current={current}
          customHeader={CalendarHeaderHandler}
          style={styles.calendar}
        />
        <TouchableOpacity onPress={() => setCurrent('2021-01-01')}>
            <Text>2021</Text>
        </TouchableOpacity>
 )};

Solution

  • Solved this issue by adding both props key and current

    Prop key triggers re-rendering

      const CalendarScreen = () => {
          const [current, setCurrent] = useState('2020-01-01');
    
      return(
            <Calendar
              current={current}
              key={current}
              customHeader={CalendarHeaderHandler}
              style={styles.calendar}
            />
            <TouchableOpacity onPress={() => setCurrent('2021-01-01')}>
                <Text>2021</Text>
            </TouchableOpacity>
       )};