dohooo / react-native-reanimated-carousel

🎠 React Native swiper/carousel component, fully implemented using reanimated v2, support to iOS/Android/Web. (Swiper/Carousel)
https://react-native-reanimated-carousel.vercel.app
MIT License
2.81k stars 324 forks source link

Not work on web side #509

Open BANG88 opened 10 months ago

BANG88 commented 10 months ago

the latest alpha version.

dohooo commented 10 months ago

Thanks for your feedback, I'll fix it ASAP.

BANG88 commented 10 months ago

Hi @dohooo do you have any updates on this. Thanks ? :smile

quicksilverr commented 10 months ago

Hey @dohooo Facing the same issue, on web it's not scrolling. Any reasons why this must be happening?

quicksilverr commented 10 months ago

@dohooo Do you think it's an issue with maybe the gesturedetector? I saw some issues in react-native-gesture-handler regarding it's not being supported on web. Sorry for the trouble, but we are stuck on this on our project and your library seems to be the best among all others.

raienko commented 10 months ago

Looks like issue with react-native-reanimated versioning. Carousel works fine on the web with react-native-reanimated 3.3.x - 3.4.x

But if you're using react-native 0.73+, it requires at least react-native-reanimated 3.6.x to compile. And carousel doesn't work on the web starting with 3.5.x versions

@BANG88 , @quicksilverr if you're using RN 0.72 or below, just downgrade to react-native-reanimated 3.4.x If you're on RN 0.73 - upgrade react-native-reanimated-carousel to 4.0.0-alpha.8 - works fine for me

@dohooo thnx for your help a lot!

dohooo commented 10 months ago

@BANG88 @quicksilverr https://dohooo.github.io/react-native-reanimated-carousel/

Does it work normally in your browser?

BANG88 commented 10 months ago

Yes it is working fine

dohooo commented 10 months ago

Yes it is working fine

Could you update your dependencies' version as that example project? Maybe It could be fixed.

A new major version(4.x-beta) will be released recently but it is still in the alpha phase now.

Lurtroxx commented 10 months ago

@dohooo Any ideas on this? I am limited to the "web support without babel plugin" https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support#web-without-the-babel-plugin this is because I am using Native-Base, and there is no support for babel as far as I can tell, so this is normally how I use react native, I cannot get reanimated carousel to work on web (with nativebase) because of this reason I think... Any ideas?

dohooo commented 9 months ago

@Lurtroxx Could you provide a reproduction for this scenario? @BANG88 Did you solve this problem? Could you provide more information about this?

BANG88 commented 9 months ago

@dohooo Sorry. I am not using it right now. too busy 😭

straifer2008 commented 9 months ago

"react-native-reanimated-carousel": "^3.5.1", "react-native-reanimated": "~3.3.0", "react-native": "0.72.6", "expo": "^49.0.21",

Autoplay works for Mobile and web. But swipes don't work for the web. On the Web, slides disappear after a swipe. it's strange that click does nothing. But swiping (on the web version) hides the slides. Еhere are no console errors. I thought that the problem might be with the styles (size of the container), so I set the static height and width, but it did not help. I cannot install another version of react-native-reanimate, because this version is used by other libraries used in the project. But according to what you described above it should work. I will try the alpha version now "react-native-reanimated-carousel": "^4.0.0-alpha.9",

P.S. in the screenshots on the left side the emulator on the right side is the web version image image

straifer2008 commented 9 months ago

"react-native-reanimated-carousel": "^4.0.0-alpha.9" - works for me. When do you plan to release it?

"react-native-reanimated-carousel": "^3.5.1", "react-native-reanimated": "~3.3.0", "react-native": "0.72.6", "expo": "^49.0.21",

Autoplay works for Mobile and web. But swipes don't work for the web. On the Web, slides disappear after a swipe. it's strange that click does nothing. But swiping (on the web version) hides the slides. Еhere are no console errors. I thought that the problem might be with the styles (size of the container), so I set the static height and width, but it did not help. I cannot install another version of react-native-reanimate, because this version is used by other libraries used in the project. But according to what you described above it should work. I will try the alpha version now "react-native-reanimated-carousel": "^4.0.0-alpha.9",

P.S. in the screenshots on the left side the emulator on the right side is the web version image image

MejowArtem commented 6 months ago

Updated to the most recent "react-native-reanimated-carousel": "^4.0.0-alpha.10" - finally worked.

"react-native": "0.73.6" "react-native-gesture-handler": "^2.16.0" "react-native-reanimated": "^3.8.1" "react-native-reanimated-carousel": "^3.5.1"

Could not manually swipe anything while other things like autoPlay were working. Thought the problem was with either react-native-reanimated or react-native-gesture-handler but no, they were working fine (except a bug with GestureDetector crashing the app on both ios and android). After upgrading to the latest 4.0.0-alpha.* everything finally worked.

tcloudAce commented 6 months ago

Updated to "react-native-reanimated-carousel": "^4.0.0-alpha.10" is work !

mal9adiq commented 6 months ago

i am using bare react-native v-0.73.6 (without expo) in addition to react-native-web v-0.19.10 i have the same issue and i tried to match versions has been mentioned above but still not working...

zeallat commented 1 month ago

thanks for @raienko and https://github.com/dohooo/react-native-reanimated-carousel/issues/509#issuecomment-1869612145

this is worked for me.

"react-native": "0.74.5",
"react-native-reanimated": "3.14.0",
"react-native-gesture-handler": "2.16.1",
"react-native-reanimated-carousel": "4.0.0-alpha.8",