React-native-video: black screen on Android

[nicoara]

Current behavior

I have a list a social networking app that has videos and images (under 10 Mb each).
There is a screen with the user's feed, organized in a FlatList, in which i am loading for now only (!) two videos and one image. The app shows black screen in the place of the Video component, only on Android. The black screen problem does not happen in iOS! (I presume because the way memory management and how scroll lists are done in iOS)

Reproduction steps

This is my code for Video:

              <Video
                source={{ uri: this.state.uri }}
                 ref={(ref) => {
                   this.player = ref
                 }}
                 paused={this.state.paused}
                 resizeMode={this.state.resizeMode}

                 onLoad={this.handleLoad}
                 onEnd={this.handleEnd.bind(this)}
                 style={[this.state.style, { backgroundColor: '#3d3d3d' }]}
              />

also, if I add in AndroidManifest:
android:largeHeap="true"
to avoid the crashes, the video is a black.

The memory consumed by the app as seen in Android Studio is somewhere at 170Mb, and growing.

Expected behavior

I expected to show the video.

Platform

Environment:
OS: macOS High Sierra 10.13.6
Node: 8.10.0
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.1 AI-173.4670197

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.54.4 => 0.54.4

Which player are you experiencing the problem on:
I am using the Video tag from : import Video from 'react-native-video';

• iOS
• Android ExoPlayer
• Android MediaPlayer
• Windows UWP
• Windows WPF

Video sample

https://www.dropbox.com/s/o7q9kejiabs7y88/CrashVideo.mp4?dl=0

Questions
1) what is the solution to this?
2) Is this related to memory issues? When I load 10 more videos, the app crashes because of an error (as I see in Crashlytics) called 'Fatal Exception: java.lang.OutOfMemoryError'.
Does the library react-native-video not load when there is high memory used?
3) does the FlatList on Android unload from memory the images/videos when I scroll them outside of view? Otherwise, If I go down with scrolling , do I continually add images / videos to the app memory and it will eventually crash?
4) Is another solution for performance for video? I am thinking react-native-thumbnail to show initially the thumbnail to not download the whole video. I am having trouble installing the library (issue #35 on https://github.com/phuochau/react-native-thumbnail/issues/35 ) , do you know of a better way to get the video thumbnail? (so that instead of showing videos in feed, i show them on thumbnail touch in a different screen).
5) does the Exoplayer eliminate this problem?

This is I believe the greatest challenge with this app so far. Please contribute what solutions you have found to apps with feeds with videos.
(I have posted the question on SO here: https://stackoverflow.com/questions/53225969/react-native-video-black-screen-on-android )

Thank you!

[n1ru4l]

1. A reproduction repository would be beneficial.
2. High memory consumption is a problem I was experiencing when working with react-native on android in general.
3. You have to take care of unmounting off screen videos yourself. I created https://github.com/n1ru4l/react-in-center-of-screen to solve this issue. While it works perfectly on ios the performance on android is just poor which forced us to only show the image in the FlatList view.
4. Like I described in the previous step: Only show image (created with react-native-thumbnail) (the issze of react-native-thumbnail is out of scope of this issue sorry) and when user stops scrolling check which elements are in the center of the screen and start mounting the video component instead.
5. Exoplayer does not solve the performance problems.

[nicoara]

Thanks for the response, it is a good idea to unmount.

It seems to me that building a social network in which you upload videos to a database, and as a developer optimizing for performance and money, should be a really common thing. I am requesting this from your library.
Thank you

[luongs3]

@nicoara but for now, what's the solution?
I got the same problem, react-native-video just shows a black screen

[n1ru4l]

@nicoara Feel free to send in pull requests to react-native and/or react-native-video that improve the android performance.

[nicoara]

@luongs3 I solved the issue of the black screen, for the moment, by using the react-native-thumbnail library, as per the initial comment in this thread (I got around the issue here https://github.com/phuochau/react-native-thumbnail/issues/35 ).

[romainbraun]

In my case I fixed it by using the old Android Media Player, replacing:

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

with

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')

[amelisoft]

Solution from @romainbraun worked for me.

• useful info about setup can be found here - https://www.recordnotfound.com/react-native-video-react-native-community-135748

[CHaNGeTe]

try with this PR please:
https://github.com/react-native-community/react-native-video/pull/1655

[CHaNGeTe]

Please test with 4.4.4.
If still not works I will reopen the issue

[cms24us]

i just tested with 4.4.4, still same issue. black screen.

I think this need to be reopen, what do you think @CHaNGeTe?

my app is base on video player, i hope will be a fix for this bug.

[CHaNGeTe]

I reopen the issue, can you provide an example repo with the issue?

[cms24us]

as i post in #1547 my issue was with react navigation NOT with react-native-video 4.4.4

thank you @CHaNGeTe.

[mayconmesquita]

i tested 4.4.4 with exo player, but is black. Any updates (~4.4.5) is coming this month?

[JacquesLeupin]

Hi react-native-video Team,

Is there a solution to this problem, or is anyone actively working on this issue? I'm running into this issue currently and am struggling to find a workaround or fix.

[JacquesLeupin]

^ Bump on the above.

[IamMasterWayne]

+1

[IamMasterWayne]

"react-native": "0.61.5"
"react-native-video": "^5.0.2"

React Native Android Black Screen For Android

[RogerParis]

+1

[saad12150]

have anyone found the solution yet?

[8addy]

adding these lines to android/settings.gradle worked for me..

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')

after.. cd android && ./gradlew clean

[jphilipstevens]

So I believe that @8addy change would swap the underlying implementation of the video player form Google ExoPlayer to their MediaPlayer (not sure if that is considered legacy or not). We saw the same thing and had to swap react native video for expo-av on unimodules (we are a bare rn app).

expo av uses ExoPlayer as well which leads me to rule out Exoplayer for now. I have in my notes that the last time I tested this that the video played on a screen we navigated to the first time but upon subsequent navigations to the same screen, the video had the above issue.

[OmranElmasry]

i have a hacky workaround for this issue
all you have to do is

1. take a snapshot of the preview of the view and save it as an image in app local files
2. put an <Image/> component and make its source the local snapshot, with the same style as the <Video/> component and make the image
3. make use of the handy onLoad prob, and in its callback change the <Image/> visibility
   then voila! you got rid of the black screen. 😉

[Shabnam-Veranloo]

i have this issue too

[MaximoSucari]

any solution? the video shows a black screen for 1 second. Im using Video component inside a FlatList