I want to disable horizontal and vertical scrolling when dragging an event somehow

[regina-rombangok]

Whenever trying to drag the event, calendar view swipe behavior and vertical scrolling behavior work at the same time. It looks like so uncomfortable to drag the event.
Is there any way to disable horizontal and vertical scrolling when dragging the event?
Thanks.

[pdpino]

Thanks for trying the drag and drop feature!

We have seen similar issues in some devices. To help u faster, could you please:

• say which device are you using (emulator/physical, android/ios) and packages versions (react, react-native, react-native-week-view)
• ideally provide a screen recording

In some devices it works well, for example android 8.1.0 emulator, react-native v0.64.2, react v17.0.1:

[regina-rombangok]

Thanks for quick reply. I'm testing on Android emulator Pixel 2 device (API 30).
"react": "17.0.1",
"react-native": "0.64.3",
"react-native-week-view": "^0.7.0"

Here is the video I recorded

bandicam.2021-12-01.01-28-46-332.mp4

[KodyKendall]

I'm also seeing this when running expo, device is an iPhone 8 Plus, iOS 15.1

[pdpino]

Thanks both for the feedback. I will try disabling other scrollings while the event is being dragged, will let you know how it goes.

I also have been thinking of providing small feedback when the event is first pressed to be dragged, for example a little device vibration (like the android calendar does), could be helpful

[KodyKendall]

I think adding a little phone vibration is a great idea!

…

On Wed, Dec 1, 2021 at 11:48 AM pdpino ***@***.***> wrote: Thanks both for the feedback. I will try disabling other scrollings while the event is being dragged, will let you know how it goes. I also have been think of providing small feedback when the event is first pressed to be dragged, for example a little phone vibration (like the android calendar does), could be helpful — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#154 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFRUYVBKMG5RL6WVOGVCFQLUOZUWHANCNFSM5JARZKZA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[KodyKendall]

@pdpino have you had a chance to experiment with disabling scrollings when an event is being dragged?

[pdpino]

@KodyKendall sorry, not yet 🙁, I have been very busy last weeks.
I will try to make some time for this in 1-2 weeks, but I can't make any promises

[pdpino]

Update (sorry for the late response!):

I created this experimental branch with 2 changes:

• Use onShouldBlockNativeResponder: () => false in the PanResponder. This might fix the problem in some cases, though it only applies to android
• Disable the (vertical and horizontal) scrolling when an event is being dragged. Activate this behavior by providing the (experimental) prop debugLockScrollOnDrag={true}

I'm still working on providing a small feedback when the dragging starts

@regina-rombangok @KodyKendall I'd appreciate if you could test this, lmk if it improves or not in your devices

[Spunnator]

I have same problem. Any Solution?

[pdpino]

Hi @Spunnator , could you try the fix I mentioned in my previous comment?

[Spunnator]

@pdpino i should use your fork?

[pdpino]

Yes but only this branch for testing, if possible.
I keep my fork up to date with this repo

[pdpino]

Update: I'm still debugging this

• This bug occurs in really specific cases, due to how ScrollViews in react-native work
  • Apparently, can only be fixed with native code
• If you do not provide onEventPress neither onEventLongPress callbacks, you should not see this problem. (Although probably most use-cases need those callbacks)
• I may try with the react-native-gesture-handler library
  • Pros: should be able to fix this problem, get smoother interactions, maybe even provide feedback when the dragging start
  • Cons: extra library requirement

[Salmankhan033]

When I drop the event on midline means half in one date and half of another date then it can't adjust automatically?
Is there any way that it does not drop the event on the midline (date separate line)

[pdpino]

@Salmankhan033 this seems like a question unrelated to this issue (correct me if I'm wrong 😅). Could you please open a different issue with the same question? I'll answer there

Also, the current behavior when you drop the event in your example is that will go to March 5 or March 6, depending on the exact pixel where you drop it. What are you expecting? I'm not sure I understand.

[Salmankhan033]

let's discuss on #165

[Salmankhan033]

I want, when I drag event then off the horizontal scroll and enable vertical scroll?

[pdpino]

I want, when I drag event then off the horizontal scroll and enable vertical scroll?

Answering in #174

[pdpino]

I fixed this 😄. I had to add the libraries react-native-gesture-handler and react-native-reanimated as dependencies (they work much better than bare react-native APIs). @hoangnm let me know if you agree with this requirement

I'll be sending a PR

Note: the event gets the opacity lowered to 0.5 while dragging, but we could customize this in the future (is feasible with the new libs)