FlatList Support

[hueniverse]

This issue consolidates multiple reports of problems with rendering multiple videos in a FlatList: #908, #2667, #2414, #2325,
#1636, #1318, #433, #2247

[hueniverse]

It seems to be specific to Android, but would be good to get confirmation on that.

[freeboub]

Thanks for opening this 'master ticket', i am wondering if someone tryed to change surfaceview / textureview props ?

https://github.com/react-native-video/react-native-video#usetextureview

[swikars1]

I think many other multiple issues are connected to exoplayer being outdated, I have not faced much issue with IOS but its a mess in android. I am using it with flipkart's recycler list view.

• My errors persists while using the surface view as well.
• Some time audio keeps playing but video is frozen
• Some videos simply doesn't play at all and throws this error: {"e": {"error": {"extra": -1004, "what": 1}}}

[hueniverse]

@swikars1 we have a VIP PR to upgrade to the latest version. We need help with getting it finished.

[doublex]

This worked for me:
#2384 (comment)

[swikars1]

@hueniverse I wish I could help man, I'm from Javascript world and everything here seems so alien to me.

[dancixx]

@hueniverse #2667 issue appears on ios too. I spent a lot of time investigating this issue, and I found, that the iOS AV pipeline will be full and can't detach from the memory, and if the app creates too many player instances then won't mount any new videos.

[rahulpandey]

For me following implementation working fine for flatlist. I don't find any issue so for

https://gist.github.com/rahulpandey/b7c8a6964d753bd482daea153341b465.

"react-native-video": "^5.2.0"

[siddharth-kt]

Hi @hueniverse,

Just asking, what do you think, by when this issue will be resolved? 🙂

[hueniverse]

@siddharth-kt No clue. No one has offered to work on this.

[siddharth-kt]

🙁 Sad to hear that, I wanted to contribute but can't due to no knowledge in native.
but thanks for answering.

[Lakston]

I don't have the flatlist issue rendering black in alpha 3 but the videos are choppy, the playback is long to start, it seems like the videos are not buffering properly

[mhtchawlaAntino]

@hueniverse #2667 issue appears on ios too. I spent a lot of time investigating this issue, and I found, that the iOS AV pipeline will be full and can't detach from the memory, and if the app creates too many player instances then won't mount any new videos.

found any solution yet?

[vemarav]

@hueniverse playing multiple videos at once is a hardware limitation, thats why youtube also preview one video at a time when in focus. To give better experience one can show thumbnail where video paused and resume from there by remounting video component.

#3153

If still facing avc decoder failure then replace ReactExoplayerViewManager dropViewManager instance with

    // ReactExoplayerViewManager.java
    @Override
    public void onDropViewInstance(ReactExoplayerView view) {
        view.release();
    }

then define release() method inside ReactExoplayerView.java

    // ReactExoplayerView.java
    public void release() {
        player.release()
    }

[brunolcarlos]

This package works better than FlatList but its not perfect
react-native-big-list

[vemarav]

@brunolcarlos try this https://github.com/Flipkart/recyclerlistview

[wolfxpertlab]

same issue here my report is #3251 (comment)

please tell me how can I solved it some time not play video and also check alpha version

[vemarav]

@wolfxpertlab setup a meet for [email protected], maybe I can help 🙂

[davidgvf]

any solution??

crash my app

<FlatList
ref={FlatlistRef}
data={feed}
windowSize={8}
showsVerticalScrollIndicator={false}
getItemLayout={getItemLayout}
pagingEnabled
decelerationRate={'fast'}
onViewableItemsChanged={onViewRef.current}
viewabilityConfig={viewConfigRef.current}
keyExtractor={keyExtractor}
refreshControl={refreshControl}
ListFooterComponent={
isLoading ? (
<View style={{ paddingVertical: 20 }}>
<ActivityIndicator
size={'large'}
color={colors.white.c100}
/>

) : null
}
renderItem={renderItem}
/>

                    my renderItem:
                     <Video
            paused={props.paused}
            style={[styles.backgroundVideo, props.styles]}
            resizeMode={props.resizeMode || ResizeMode.COVER}
            source={{
                uri: convertToProxyURL(internalVideo.uri),
                type: getTypeVideo(internalVideo.uri)
            }}
            repeat={props.repeat}
            playInBackground={true}
            bufferConfig={
                props.bufferConfig || {
                    minBufferMs: 125,
                    maxBufferMs: 25000,
                    bufferForPlaybackMs: 120,
                    bufferForPlaybackAfterRebufferMs: 122
                }
            }
            onBuffer={e => {
                e.isBuffering !== isBuffering && setIsBuffering(e.isBuffering);
            }}
            onError={e => {
                console.info('video error: ', e);
            }}
            onLoad={() => setIsLoading(false)}
        />

[freeboub]

For people how stuck on decoder error, Can you try following patch: #3416
It should improve behavior in case of decoder issue

[freeboub]

To be retested on beta.6

[vishalhyperspace]

Any solution?
I am getting black screen when using video inside flatlist.
Please help
Thanks in advance.

[avencat]

@vishalhyperspace which version are you using? @freeboub said v6.0.0-beta.6 should fix this issue (though you could install the latest version to date which is v6.0.0-rc.0

[longphi97]

@avencat I'm having the same problem as @vishalhyperspace

[avencat]

@longphi97 on which version?

[longphi97]

@avencat version 6.1.2

[avencat]

Ok @freeboub do you think @longphi97 should open a new issue with more information?

[avencat]

In the meantime, @longphi97 maybe you should try to open a snack where you reproduce this error! 😉

[shivnath17]

Is there any update on the blank screen thing in android?

I'm using the latest version v6.8.1 Still getting the blank screen in flatlist on scroll.

[thiennhank9]

Is there any update on the blank screen thing in android?

I'm using the latest version v6.8.1 Still getting the blank screen in flatlist on scroll.

Same here, use the latest version, still get the blank screen if the video is under the flatlist, and is not in the current viewport while scrolling