necolas/react-native-web

ScrollView: support for pagingEnabled prop

nazarireza opened this issue · 5 comments

nazarireza commented

Hi, I'm using the version '0.8.9' of 'react-native-web' and 'pagingEnabled' prop in 'ScrollView' not work.
Any Idea?

Thank you

brunolemos commented

Neither pagingEnabled nor stick headers is currently working out of the box, it seems #434 was not completed.

For now you can do something like this:

<ScrollView className="snap-container" horizontal pagingEnabled>
  <View className="snap-item-start">{/* ... */}</View>
  <View className="snap-item-start">{/* ... */}</View>
</ScrollView>

index.css

.snap-container {
  scroll-snap-type: x mandatory;
}

.snap-item-start {
  scroll-snap-align: start;
}

Works on Chrome and Safari. (caniuse)

hushicai commented

Hi, all, is there any new idea for pagingEnabled?

without pagingEnabled, swiper like react-native-swiper can not work in the browser。

kristerkari commented

@necolas Would you be willing to accept a PR which adds the CSS properties from @brunolemos example when pagingEnabled is set to true?

At least it seems to me that it works exactly the same way as pagingEnabled on the native side. Of course it might be that there are some cases where it would work in a differently from the native implementation.

The browser support is only Safari, iOS Safari, Chrome and Android Chrome. Edge and Firefox only support an older version of the spec which does not have the scroll-snap-align property that is needed. There is also a polyfill for CSS scroll snap, but at least I could not get it to work with RNW.

  • 👍1
necolas commented

Yep! That covers most browsers in significant use. Edge will be moving to Blink. And Firefox will catch up eventually.

  • 👍1
kristerkari commented

Here's the PR:
#1212

  • 👍1