React-native-calendars: The calendar jumps to the current month when a date is clicked

[igibliss00]

Description
When the date is selected, the calendar jumps to the current month.

Expected Behavior
When a date is selected, the calendar is expected to stay at the selected month without reverting back to the current Month. For example, if the current month is November, when a user clicks on December 12th, the calendar should stay at December.

Observed Behavior
When a date in December is clicked, the calendar reverts to the current month, which is November in this example. This makes it especially difficult for a user to select a range of dates.

   const [selected, setSelected] = useState()    

    const select = day => {
        // const markedDay = {[day.dateString]:{selected: true, marked: true}}
        setSelected(day.dateString)
    }

    return (
        <View style={styles.container}> 
            <CalendarList 
                theme={{
                    dayTextColor: 'black',  
                    todayTextColor: 'black',  
                    selectedDayTextColor: 'black', 
                    selectedDayBackgroundColor: '#FF5D4E',
                    arrowColor: 'black',                    
                }}
                style={styles.calendarStyle}
                markedDates={{[selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}}}
                // Initially visible month. Default = Date()
                current={new Date()}
                // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
                minDate={new Date()}
                // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
                maxDate={addMonths(6)}
                // Handler which gets executed on day press. Default = undefined
                onDayPress={select}
                // Handler which gets executed on day long press. Default = undefined
                onDayLongPress={(day) => {console.log('selected day', day)}}
                // Month format in Style title. Formatting values: http://arshaw.com/xdate/#Formatting
                monthFormat={'MMM yyyy'}
                // Handler which gets executed when visible month changes in calendar. Default = undefined
                onMonthChange={(month) => {console.log('month changed', month)}}
                // Hide month navigation arrows. Default = false
                hideArrows={false}
                // Replace default arrows with custom ones (direction can be 'left' or 'right')
                // renderArrow={(direction) => (<View style={{ backgroundColor: 'black', width: 40, height: 50 }} />)}
                // Do not show days of other months in month page. Default = false
                hideExtraDays={true}
                // If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
                // day from another month that is visible in calendar page. Default = false
                disableMonthChange={true}
                // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
                firstDay={1}
                // Hide day names. Default = false
                hideDayNames={false}
                // Show week numbers to the left. Default = false
                showWeekNumbers={false}
                // Handler which gets executed when press arrow icon left. It receive a callback can go back month
                onPressArrowLeft={substractMonth => substractMonth()}
                // Handler which gets executed when press arrow icon left. It receive a callback can go next month
                onPressArrowRight={addMonth => addMonth()}
                // Enable horizontal scrolling, default = false
                horizontal={true}
                // Enable paging on horizontal, default = false
                pagingEnabled={true}
            />
        </View>
    )

[akarsh0807]

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

[hueyAtFetchly]

I would suggest closing unless @akarsh0807 's solution does not work for @igibliss00 or others.

[Inbal-Tish]

@igibliss00 Is the solution offered by @akarsh0807 works for you?

[Kleinhummel]

I have a similar issue: As long as I don't use the arrows, everythink works fine. But after changing the month by tapping an arrow, the calendar jumps to the previously displayed month, when a date is selected...
The answer of @akarsh0807 causes a flicker effect because the month changes very quickly twice in a row! (When updating the current prop in the onDayPress handler by using state)

[XeeshanAnsari]

I just remove current prop and issue seems resolve for me.

[Kleinhummel]

I just remove current prop and issue seems resolve for me.

The current prop is not set in my calendar...

[Kleinhummel]

Here is my code for reproducing the issue:

import React, { useState } from 'react';
import { StyleSheet, ScrollView } from 'react-native';
import { CalendarList } from 'react-native-calendars';
import { Icon } from 'react-native-elements';

export default function App() {

  const [markedDates, setMarkedDates] = useState({});

  function handleDayPress(day) {
    const selectedDate = { startingDay: true, endingDay: true, color: 'white', selected: true };
    setMarkedDates({ [day.dateString]: selectedDate });
  }
  return (
    <ScrollView>
      <CalendarList
        scrollEnabled={true}
        horizontal={true}
        pagingEnabled={true}
        markedDates={markedDates}
        theme={{
          textDisabledColor: '#2394f4',
          calendarBackground: '#017aea',
          dayTextColor: 'white',
          monthTextColor: 'white',
          textSectionTitleColor: '#7fbdf2',
          arrowColor: 'white',
          'stylesheet.day.period': {
            base: {
              overflow: 'hidden',
              height: 34,
              alignItems: 'center',
              width: 38
            }
          },
          'stylesheet.calendar.header': {
            week: {
              marginTop: 0,
              flexDirection: 'row',
              justifyContent: 'space-between'
            }
          },
          selectedDayTextColor: '#017aea'
        }}
        renderArrow={direction => (
          <Icon
            name={
              direction === 'left' ? 'chevron-left' : 'chevron-right'
            }
            size={30}
            color="white"
          />
        )}
        hideArrows={false}
        markingType={'period'}
        minDate={'2012-05-10'}
        maxDate={'2070-05-30'}
        onDayPress={handleDayPress}
        onDayLongPress={day => { }}
        monthFormat={'MMMM yyyy'}
        onMonthChange={month => { }}
        hideExtraDays={true}
        firstDay={1}
        onPressArrowLeft={substractMonth => substractMonth()}
        onPressArrowRight={addMonth => addMonth()}
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[Inbal-Tish]

@igibliss00 In your case current={new Date()} means you keep setting the current prop with a new object thus it keeps jumping back to that date/month. Make sure you set it once.
@Kleinhummel I can't tell from you code snippet what you're doing in the arrows onPress methods and how you manage your state. Try to remove them and see if the issue persists.

[Kleinhummel]

@igibliss00 In your case current={new Date()} means you keep setting the current prop with a new object thus it keeps jumping back to that date/month. Make sure you set it once.
@Kleinhummel I can't tell from you code snippet what you're doing in the arrows onPress methods and how you manage your state. Try to remove them and see if the issue persists.

Removing the onPress methods resolved the issue for me! Thank you very much :)