CODEWITHSUNDEEP
reactjsreact-nativereact-hooksreact-native-calendars
Kevvv
Kevvv

Reputation: 4023

react-native-calendar re-renders to the current month every time I invoke OnDayPress

I'm using react-native-calendar and when I invoke onDayPress by clicking on a date, the calendar jumps to the current month.

What I mean is let's say I click on November 12th, the calendar jumps to October, which is the current month.

export default BookingCalendar = () => {
    const [selected, setSelected] = useState()
    return (
        <View>
            <CalendarList 
                theme={{
                    dayTextColor: 'black',  
                    todayTextColor: 'black',  
                    selectedDayTextColor: 'black', 
                    selectedDayBackgroundColor: '#FF5D4E',
                    arrowColor: 'black',                    
                }}
                style={styles.calendarStyle}
                markedDates={{[selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}}}
                current={new Date()}
                minDate={new Date()}
                maxDate={addMonths(6)}
                onDayPress={day => setSelected(day.dateString)}
                onDayLongPress={(day) => {console.log('selected day', day)}}
                monthFormat={'MMM yyyy'}
                onMonthChange={(month) => {console.log('month changed', month)}}
                horizontal={true}
                pagingEnabled={true}
            />
        </View>
    )
}

My thinking was that every time the onDayPress is invoked, the calendar get re-rendered and it re-orients itself to the current date so I tried to set today's date within useEffect so it only renders once when the component mounts, but didn't make a difference.

Upvotes: 2

Views: 2805

Answers (1)

Akarsh Srivastava
Akarsh Srivastava

Reputation: 47

setting current prop to the selected date fixes the issue for me

Upvotes: 0

Related Questions