netceteragroup / skele

Architectural framework that assists building data-driven apps with React or React Native.
MIT License
163 stars 32 forks source link

Inconsistence item rendering when FlatList is wrapped with Viewport.Tracker #154

Closed malhotrachetan closed 4 years ago

malhotrachetan commented 4 years ago

I am using this RN library called react-native-snap-carousal that is basically an animated FlatList. The item that is rendered with this carousal is a component containing a video(expo av video) and some text. With the help of viewport from @skele/components i am trying to play the video when it enters the viewport and pause the video when it leaves the viewport. All videos do render, it's just that i cannot see some of the videos but can only hear them. If i remove the from the RN-snap-carousal component, all videos render perfectly with both audios and visuals. Here is some starter code:

<Viewport.Tracker>
<Carousel
      ref={(carouselRef) => {
        carouselRef;
      }}
      vertical
      useScrollView={false}
      firstItem={0}
      initialNumToRender={1}
        maxToRenderPerBatch={3}
      onViewableItemsChanged={onViewableItemsChanged.current}
      data={byteData}
      renderItem={({ item, index }) => (
         <Byte {...item} inView={currentInView} index={index} {...props} />
      )}
      sliderHeight={props.carouselHeight}
      triggerRenderingHack
      itemHeight={props.carouselHeight}
    />
</Viewport.Tracker>

This happens on both ios and android but ios one is a frequent occurrence. Also on ios, the first video always skips out on visual part i.e. first video is always just audio. I am happy to answer any more questions you folks have if this isn't enough. I would really really appreciate some assistance with this as this is a blocking one for me. Kudos! Thanks in advance.

bevkoski commented 4 years ago

Hey @debuggermalhotra. 👋 I can see from the starter code that you are already utilizing onViewableItemsChanged. I would suggest you to try playing/pausing videos using that functionality. There is no need to use both Viewport.Tracker and onViewableItemsChanged for the same FlatList. The Skele tracker is very useful for ScrollView, but for FlatList, onViewableItemsChanged can work better in some cases.

malhotrachetan commented 4 years ago

I see. Yeah on the events of viewport.tracker not responding correctly to flatlist i was experimenting with onViewableItemsChanged. I think i will have to move ahead with that only. Thanks for the help @bevkoski Cheers!