3

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>
 )};
glushkina1
  • 164
  • 2
  • 15

1 Answers1

7

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>
   )};
glushkina1
  • 164
  • 2
  • 15
  • Is there an explanation for why key is the property that triggers a re-render? Is key from the reac-native side or is it from the library? – patataskr Jun 02 '23 at 02:56