search

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.7k stars 313 forks source link

Support FlashList/RecyclerListView #425

Open VictorioMolina opened 1 year ago

VictorioMolina commented 1 year ago

Describe the bug I am rendering a Carousel with dynamic length inside a FlashList componente.

When I scroll the 1st carousel to the 5th slide, and then scroll down my FlashList to the Nth component, as it is being recycled, the active slide in the first render is the same of the 1st carousel, but this component only has 3 slides.

How can we reset the active slide before render? Any recycled prop?

Versions (please complete the following information):

Smartphone (please complete the following information):

VictorioMolina commented 1 year ago

My current solution:

    const prevAlbumDataRef = useRef(data);

    if (
      recycled &&
      prevAlbumDataRef.current?.[0].uri !== data[0].uri
    ) {
      setActiveSlide(0);

      carouselRef.current?.scrollTo({
        index: 0,
        animated: 0,
      });

      prevAlbumDataRef.current = data;
    }

   return <Carousel ref={carouselRef} ...

Could be nice to get it automatically done by the library.

Notice: react will not re-render if we update the state in the component's body, before the render. Look at getDerivedStateFromProps for more info.

dohooo commented 1 year ago

Hi, Can you tell me how to reproduce this issue? I can't imagine this situation.

VictorioMolina commented 1 year ago

@dohooo Just use react-native-reanimated-carousel inside a FlashList. Check this resource: https://shopify.github.io/flash-list/docs/recycling

Other resource which might be helpful: https://github.com/Flipkart/recyclerlistview#why https://legacy.reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops