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>
)};
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>
)};