How can I render 1 index at a time in flatlist - react native

Question

I am trying to render list of videos but each video item acts as a page since I use pagingenabled in flatlist. Problem is I use windowSize = {2} and that causes 2 videos (one visible & another not visible) to render at the same. My state is paused and am guessing both videos are loading at this point. Due to that exoplayer playback is failing.

Any solutions how to solve this? Here is my Flatlist & VideoPlayer component code :

<FlatList
        data={this.state.data.product}
        index={0}
        vertical
        initialNumToRender = {1}
        maxToRenderPerBatch = {1}
        windowSize={2}
        pagingEnabled = {true}
        removeClippedSubviews = {true}
        renderItem={({ item, index}) => (

          <View style = {{alignContent: 'stretch'}} >
            {console.log(index)}

          <VideoPlayer


            ref={ref => {this.video = ref}}
            source={{ uri: item.urlVid }}
            rate={1.0}
            volume={1.0}
            paused 

            bufferConfig={{
              minBufferMs: 15000,
              maxBufferMs: 50000,
              bufferForPlaybackMs: 2500,
              bufferForPlaybackAfterRebufferMs: 5000
            }}
            disableControlsAutoHide
            isMuted={false}
           poster = {item.urlImg}
           posterResizeMode = "contain"
            resizeMode="cover"
           disableFullscreen
           disableSeekbar
           disableVolume

           disableTimer
           disableBack


            style={{ width: width, height: height }}
          />

Every 4th video actually renders an every 2rd & 3rd videos throw playback error while using exoplayer — Ruben Gregory, Mar 18 '20 at 21:09

score 1 · Answer 1 · answered Mar 18 '20 at 22:42

1

You can not use any stateful components inside FlatList. FlatList does not preserve component instances on re-renders, meaning all your visible VideoPlayer instances will unmount and re-mount every time render occurs. Use ScrollView instead that doesn't virtualize its items

answered Mar 18 '20 at 22:42

Max

4,473
1
16
18

Problem with scrollview is it render all my videos in one shot right? That would take too much memory consumption I believe. – Ruben Gregory Mar 19 '20 at 07:45
yes. For that you will want to render empty placeholders for all videos except for the one or two currently in view. You can track which item is currently in view with onScroll and onMomentumScrollEnd listeners – Max Mar 19 '20 at 07:55
should I paginate every video on my back end api and then load one by one with help on "onMomentumScrollEnd"? – Ruben Gregory Mar 22 '20 at 13:17

How can I render 1 index at a time in flatlist - react native

1 Answers1