Numbers of Days issue

[Salmankhan033]

when swipe to next or previous then first it takes one-week difference after that it takes the correct date.
number of days are 3
How to solve it?

WhatsApp.Video.2022-02-07.at.9.03.34.PM.mp4

[pdpino]

Hi, what version of react-native-week-view are you using?

• If you are using an old version, it may have to do with this bug Flicker issue in Android while scrolling #39 (we are waiting on a fix from react-native)
• If you are using the latest version, could you show the code in your callback for onSwipeNext please (and/or onSwipePrev). Is it a time-consuming call?

[Salmankhan033]

version : "react-native-week-view": "^0.8.1",
<WeekView
showTitle={false}
events={myEvents}
onSwipeNext={date => props.changeDate(date)}
onSwipePrev={date => props.changeDate(date)}
onEventPress={data => props.onBodyClick(data.id)}
style={styles.body}
selectedDate={new Date(props.date)}
onGridClick={() => props.onBodyClick()}

   numberOfDays={props.day}

  numberOfDaysJump={3}
  jumpOnlyOneDay={3}
  headerStyle={styles.header}
  onDragEvent={(event, newStartDate, newEndDate) => {

                   doUpdateEventData(event,newStartDate,newEndDate)

  }
  }
/>

I sent data to the parent component and stored it in the state 
The function which sets the state value.
  const SelectedDate = text => {
setDate(new Date(text));

};
The component that i called in parent

[pdpino]

"react-native-week-view": "^0.8.1"

The old version problem is discarded then.

---

1. Could you try removing your onSwipeNext and onSwipePrev callbacks to see if the problem still occurs?
2. Is the setDate(...) method time-consuming? e.g. does it call a remote API via internet?

(Also, notice the selectedDate prop does not need to be changed after each swipe --> you can provide a constant value as the prop only determines the initial date shown. Example: selectedDate={new Date()} should be enough)

[Salmankhan033]

"react-native-week-view": "^0.8.1"

The old version problem is discarded then.

1. Could you try removing your onSwipeNext and onSwipePrev callbacks to see if the problem still occurs?
2. Is the setDate(...) method time-consuming? e.g. does it call a remote API via internet?

(Also, notice the selectedDate prop does not need to be changed after each swipe --> you can provide a constant value as the prop only determines the initial date shown. Example: selectedDate={new Date()} should be enough)

1. When removing the onSwipeNext and onSwipePrev then there is no problem.
2. I Think setDate() is time-consuming because I use it in many places.
3. when I store onSwipePre value in another variable then there is no problem that occurs.

[pdpino]

I see, thanks for providing all these details! Anything else just lmk

I'll try to reproduce it and fix it soon

[Salmankhan033]

Thanks dear
OnSwipePre Problem I solved from the node_Modules.

[Salmankhan033]

Hi,
Did you find any solution?

[pdpino]

I am still not able to fully reproduce this issue. For now, I suggest:

1. Do not change the date in the prop selectedDate, since it only sets the initial date shown in the week-view. For example use selectedDate={new Date()} or:

const today = new Date(); // outside of render
// ...
<WeekView
  selectedDate={today}
  // ...
/>

2. Try to avoid creating new functions in the render method, for example, instead of:

  onSwipeNext={date => props.changeDate(date)}
  onSwipePrev={date => props.changeDate(date)}
  onDragEvent={(event, newStartDate, newEndDate) => {
    doUpdateEventData(event,newStartDate,newEndDate);
  }}

use:

  onSwipeNext={props.changeDate}
  onSwipePrev={props.changeDate}
  onDragEvent={doUpdateEventData}

Both 1 and 2 problems may trigger a re-render of the WeekView component, which may be causing your problem

[Salmankhan033]

Thanks for your quick response.
I solved my problem.
The problem is that I pass the date state in useEffect dependency when changing the date then call API for that it gives problem.
now I remove it from useEffect and now it's working well.