Scrollable no right arrow

majugurci commented 4 years ago

In some cases right arrow is missing and by clicking right arrow you cannot go to the last date. I hope these images make it clearer:

Scrolled to the last date:
Scrolled just so last day is not visible = no right arrow
And finally scrolled one more day (so 2 days at the end are not visible) = right arrow is visible but pressing it will move just one day, not 2 days as expected

Reproducible example: Expo snack

dl-husky73 commented 4 years ago

I am having the same issue with the left arrow on the original screen, once I scroll (scrollable true) the arrow appears.

peacechen commented 4 years ago

RNCS uses RecyclerListView which returns inconsistent information to the scrolling callback. I'll try to investigate as time permits. I could use some help debugging this. Set breakpoints in onVisibleIndicesChanged() in Scroller.js to see the data it returns. Console logs are helpful to see it in real time.

Which device(s) did you test on?

peacechen commented 4 years ago

2.0.6 has been published which contains another bug fix that could be related.

dl-husky73 commented 4 years ago

I just upgraded 2.0.6 and tested on Android, will get an iPhone build later. Interesting result, I can try and debug in a bit. But what I see, the RNCS draws correctly and all seems good, then it rerenders with a different font and the text gets smaller (assuming resizing for screen) and lose the arrow. 2.0.5 still has some jitter on my iPhone 11.

dl-husky73 commented 4 years ago

Oh and most importantly; had an arrow before pretender, then no arrow until I touch the screen to start scrolling. Once I start scrolling the left arrow appears.

peacechen commented 4 years ago

I suspect onVisibleIndicesChanged() is giving unexpected results. Was your project created with create-react-native-app or react-native init ? It would help speed up debugging this if you could upload a minimal repo which exhibits that behavior.

peacechen commented 4 years ago

@majugurci After updating to 2.0.6, the arrows remain visible at the ends, which is different than before. Better but still not fully correct. I tested both your Snack and the example app in this repo. You may need to update the package.json because it doesn't allow me to save to your project.

majugurci commented 4 years ago

After upgrading to v2.0.6 there are no arrow at all. I tried it with snack's virtual device and on actual device. If I downgrade to v2.0.5 then arrows are visible. So I could not test the original use case. Has there been any change with icons that I have missed?

As i see it:

Here is a link: snack

peacechen commented 4 years ago

I tested your snack in an Android simulator as well as in the Snack's web player. They're both showing the navigation arrows. What device(s) are you testing on?

Try clearing the npm cache in case it's using stale code:

Delete node_modules.
npm install
npm start -- --reset-cache
Break out of that after it starts the packager: Ctrl-C.
Start the app with npm start (or react-native run-... for native projects).

The --reset-cache flag requires @react-native-community/cli-tools:

npm install @react-native-community/cli-tools --global

peacechen commented 4 years ago

I pushed a fix for the scrollable nav arrow logic. It shows/hides correctly at the ends. Scrolling right near the end of the dates works better.

You can use the updated code by pointing to this repo directly in package.json. Run npm install after changing it.

  "dependencies": {
    "react-native-calendar-strip": "https://github.com/BugiDev/react-native-calendar-strip",
    ...
  }

majugurci commented 4 years ago

I have tried again and it seems it was some kind of a cache issue. I'm testing it only through snack (once I return to my project I can test it on dev machine). Expo snack does not allow this: "react-native-calendar-strip": "https://github.com/BugiDev/react-native-calendar-strip" so I cannot test it currently (it only allows sem ver). But after cache has been cleared arrows are shown, it is working better. But there are still some issues (I don't know if they are fixed in newer version).

Left arrow is always present (even when you cant scroll left anymore)
Right arrow is always present. But here is you have 31 days and scroll to the end and click on an arrow it will scroll one day to the left (to 30th day).

peacechen commented 4 years ago

The fix has been published in 2.0.7

majugurci commented 4 years ago

It seems to work perfectly this time. Thank you for your efforts.

BugiDev / react-native-calendar-strip

Scrollable no right arrow #202