React-native-calendars: Swipe to next/previous month is not possible

[akhilsanker]

Description

Now it is not possible to swipe left/right to go to next/previous months. Only possible way is to click the left/right arrow buttons.

Expected Behavior

Currently swipe action is not yet implemented. Not able to switch the month simply swiping.

Observed Behavior

Needs to change the displayed month while swiping.

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars: 1.82.0
• npm ls react-native: 0.59.5

Also specify:

1. Phone/emulator/simulator & version:
   Pixel 2 API 28/ Android 9.0

[Grohden]

Did you used the <CalendarList /> component with horizontal/vertical props?

[Inbal-Tish]

@akhilsanker Please see @Grohden question. I don't see any issue with the swip in horizontal CalendarList.

[BossBele]

I'm also not so pleased with the <CalendarList /> component with horizontal/vertical props so I'm using react-native-gesture-handler module wrapping the day components with FlingGestureHandler:

<Calendar
            ref={ref=>this.calendar=ref}
            hideExtraDays={false}
            dayComponent={({date, state}) => {
              return (
                <FlingGestureHandler
                  ref={ref=>this.leftFlinger=ref}
                  direction={Directions.LEFT}
                  onHandlerStateChange={ev =>
                    this._onLeftFlingHandlerStateChange(ev)
                  }>
                <FlingGestureHandler
                  ref={ref=>this.rightFlinger=ref}
                  direction={Directions.RIGHT}
                  onHandlerStateChange={ev =>
                    this._onRightFlingHandlerStateChange(ev)
                  }>
                    <View style={{height:87,width:"100%",backgroundColor:"#fefcfb",paddingHorizontal:1,borderWidth:1,borderStyle:"solid",borderColor:"#ededed"}}>
                      <Text style={{height:15,paddingLeft:2,fontSize:11,alignItems:"center",justifyContent:"center", color: state === 'disabled' ? 'gray' : 'black'}}>{date.day}</Text>
                    </View>
                </FlingGestureHandler>
                </FlingGestureHandler>
              );
            }}
          />

Due to the nature of the module, you have to account for left and right swipes as so.
Then my left and right handler functions:

_onLeftFlingHandlerStateChange = ({ nativeEvent }) => {
    if (nativeEvent.oldState === State.ACTIVE) {
      this.calendar.addMonth(1);
    }
  }

  _onRightFlingHandlerStateChange = ({ nativeEvent }) => {
    if (nativeEvent.oldState === State.ACTIVE) {
      this.calendar.addMonth(-1);
    }
  }

DONE!
You may try another implementation; However, wrapping the Calendar component did not work for me. It is also useful to get into the module's code and modify while you can.

[yousefatwork]

@akhilsanker Please see @Grohden question. I don't see any issue with the swip in horizontal CalendarList.

The bug occurs when using rtl force ( I18nManager.forceRTL(true); ) on Android.

[ReallyLiri]

The following wrapper is simpler and works fine for me:

import React, {useRef} from 'react';
import {Calendar} from "react-native-calendars";
import GestureRecognizer from 'react-native-swipe-gestures';

export default (props) => {
    const calendarRef = useRef(null);
    return (
        <GestureRecognizer
        onSwipe={(gestureName, gestureState) => {
            const {dx} = gestureState;
            if (dx > 20) {
                calendarRef.current.addMonth(-1);
            }
            else if (dx < 20) {
                calendarRef.current.addMonth(1);
            }
        }}
        >
            <Calendar
                ref={calendarRef}
                {...props}
            />
        </GestureRecognizer>
    );
}

[chenei]

Hi,
I added the option to swipe in <Calendar/>. please install 1.282.0.

You also have the option to use <ExpandableCalendar/> with hideKnob and initialPosition={ExpandableCalendar.positions.OPEN}.
The latter also supports animation.