React-native-snap-carousel: Make the plugin compatible with `react-native-web`?

[geminiyellow]

Is this a bug report, a feature request, or a question?

A QUESTION

Have you followed the required steps before opening a bug report?

(Check the step you've followed - replace the space character between the square brackets ([]) by an x.)

• [x] I have read the guidelines regarding bug report.
• [x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
• [x] I have searched for existing issues and made sure that the problem hasn't already been reported.
• [x] I am using the latest plugin version.
• [x] I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn't a React Native bug?

yep, on ios it is very good.

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

not test on Android. i want to use this lib on web app.

Is the bug reproductible in a production environment (not a debug one)?

yep, just copy the example to a react-native-web project, you can create a new one by https://github.com/VISI-ONE/create-react-native-web-app

Environment

Environment:
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-web": "0.8.4",
"react-native-snap-carousel": "^3.7.2",

Target Platform:
Chrome (68.0.3440.106)

Expected Behavior

onSnapToItem not working, so it cannot loop

Actual Behavior

(Write what happened. Add screencasts/screenshots!)

Reproducible Demo

(Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)

Steps to Reproduce

(Write your steps so that anyone can reproduce the issue in the Snack demo you provided.)

[bd-arc]

Hi @geminiyellow,

The plugin has never been designed to be used with react-native-web.

I'm pretty sure that a lot of work is required to make it play well. I've got too much on my plate at the moment, but if someone is willing to take a stab at it, a PR is most welcome :-)

[bd-arc]

For those who want to work on this feature, leveraging the CSS scroll-snap property seems like the simplest and best way to make the carousel compatible with recent browsers.

For more info, start here: https://developers.google.com/web/updates/2018/07/css-scroll-snap

[srameshr]

Anybody picking this up?

[geminiyellow]

opps, maybe nobody

[geminiyellow]

@srameshr 1 month later, i check the code again, and i found that react-native-web not support the scroll props. here -> fix(ScrollView): support scroll props #1091

so, this package cannot exec onSnap and this issue come.
am i right ?

and @bd-arc can you give some more detail about the lifecycle about the state change ?
i not really understand it so cannot do anything about it.

[srameshr]

I am currently using full-screen slides, so I don't need the support for snap function.
I am using this plugin by transpiling and it works on web.

[geminiyellow]

@srameshr why? i don't think so, when you release at half slider, it will not auto snap to item, that is not right behavior for this package. but, could you give some code about you how to use it on web?

[srameshr]

Just npm install it and import. I use it with react-native-web

[geminiyellow]

@srameshr ok, got it, so, i should wait react-native-web fix this or give up .

[kristerkari]

I contributed some code to react-native-web that might make it a bit easier to make this library compatible with Web.

The first one is a fix to ScrollView's smooth scrolling, fixing a bug and making it possible to polyfill smooth scrolling for browsers that do not support it:
https://github.com/necolas/react-native-web/commit/30d7c31b65ef86d5047f51c6195f464f726f6357

The second one is to add support for for ScrollView's pagingEnabled property using CSS Scroll Snap. Looking at the code it seems to me that this library is not using the pagingEnabled prop, but it is possible to do a similar code change inside this library:
https://github.com/necolas/react-native-web/commit/1e202b6bd5e2da6dde6834c808dd47f82691c7ce

As already mentioned in this thread, the big missing feature is the support for the scroll end events of ScrollView. There is however an idea of how to implement it:
https://github.com/necolas/react-native-web/issues/1021#issuecomment-447987944

[pnkapadia6]

Hey @kristerkari, have you found a library which we could possibly use with react-native-web for carousels? Or we have to wait for the support as mentioned in the issues you tagged?

[kristerkari]

Or we have to wait for the support as mentioned in the issues you tagged?

Yeah, the scroll events for ScrollView are still not supported. I'm not sure what the situation is for FlatList.

[kopax]

Hi, I found this by googling react native carousel on google, I read the doc, I was in love, I saw it doesn't work on web, I had to abandon. Does anybody know a lib I could use for ios/native and web? I need a simple horizontal carousel.

Thanks a lot for sharing this.

[elan]

If you just set pagingEnabled on <Carousel> that works.

[RoshanRoyal]

is this plugin going to support react-native-web?

[srameshr]

@RoshanRoyal @elan @kopax
We are using it on the web here: https://frills.app/f?fid=t4eS4fdqJl
With some modifications to suit our requirements.

[justindi15]

@kopax found this and it seems to be working for me https://www.npmjs.com/package/react-native-web-swiper