react-native-week-view: React Native on macOS or on web - broken width and month not changing

The current workaround is to add navigation button to navigate to previous or next week.

How can we get this issue moving forward?

PR #201 will fix up to 4.1.

As to 4.2, I’m afraid without scroll events in web there is not much more we can do. I see a lot of attention in rn-web, (e.g. https://github.com/necolas/react-native-web/issues/2249, https://github.com/necolas/react-native-web/pull/2241), hopefully they will have a fix soon

On the side, I’m implementing some performance improvements, and that might include migrating to recycler-list-view, which should support rn-web scroll events. Although these changes are taking me a bit longer. (I’ll probably open a separate issue regarding this soon). UPDATE: See #209, we are not migrating to another library for now.

So our best bet might be to wait for react-native-web to support onMomentumScrollEnd.

Maybe this comment is related to our issue: https://github.com/expo/expo/issues/16822#issuecomment-1099169366 ?

TL;DR: I fixed some things, but is still not working 100%, probably due to an upstream bug from react-native-web VirtualizedList. Demo:

(btw the cursor is not moving because I was scrolling with the wheel)

---

Details:

There are multiple things in the initial example that were wrong:

1. Header does not have the appropriate width
2. All the grey horizontal grid lines are rendered at 00:00hrs
3. Vertical scrolling works, but the initial scroll to the startHour is not performed (i.e. you cannot call scrollTo() for the ScrollView ref)
4. Horizontal scrolling is broken 4.1 The initial position should be today (in my example would be May 6), but the initial position shows April 21 4.2 You cannot scroll past certain dates to the right or left
5. When scrolling the grid horizontally, the header does not follow the grid smoothly (i.e. animated)

What I did:

1. 👍 Compute the header width using the size of the window
   • required working on top of this recent PR https://github.com/hoangnm/react-native-week-view/pull/189
2. 👍 Grey gridlines are now properly rendered throughout the grid (was a simple flex issue)
3. 👍 The initial vertical position is fixed, and the vertical scroll works properly
   • Note: this required constraining the ScrollView’s height to height: '100vh' (100 viewport’s height, web only)
4. VirtualizedList and FlatList have shown issues in react-native-web (for example see a list of issues here: https://github.com/necolas/react-native-web/pull/2241#issuecomment-1055824946)
   • 4.1. 👍 The initialScrollIndex behavior was fixed --> the week starts pointing to today (see gif)
     • I needed to install the 0.18 preview version of react-native-web (yarn add react-native-web@0.0.0-b2a3e86d, see preview here: https://github.com/necolas/react-native-web/pull/2248)
   • 4.2 👎 👎 The scrolling is still constrained to 5 pages (weeks), from April 18 to May 22 (see gif)
     • Culprit: the onMomentumScrollEnd event from the horizontal VirtualizedList is not being triggered
     • We need that event to add pages (weeks) dynamically to the left and right
     • In the first render, we show 5 pages (those are the only pages shown in the gif)
     • I tested a small VirtualizedList example, and I think this is an issue from react-native-web (I can provide more details for a small repro)
5. 👎 Could not make the animation smoother (though, the horizontal scrolling should be resolved first anyway)

4.2 is probably a dealbreaker for most apps. We should corroborate if it is a bug from react-native-web; hopefully they will have a workaround soon

I haven’t added meets on the first test I did. Let me give it a try and get back to u