react-native-video black screen on Android









up vote
0
down vote

favorite












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:



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';



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 Github here, but sometimes I only get responses on SO: https://github.com/react-native-community/react-native-video/issues/1318 )



Thank you!










share|improve this question



























    up vote
    0
    down vote

    favorite












    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:



    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';



    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 Github here, but sometimes I only get responses on SO: https://github.com/react-native-community/react-native-video/issues/1318 )



    Thank you!










    share|improve this question

























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      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:



      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';



      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 Github here, but sometimes I only get responses on SO: https://github.com/react-native-community/react-native-video/issues/1318 )



      Thank you!










      share|improve this question















      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:



      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';



      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 Github here, but sometimes I only get responses on SO: https://github.com/react-native-community/react-native-video/issues/1318 )



      Thank you!







      react-native react-native-video






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 9 at 14:24

























      asked Nov 9 at 12:45









      Nicoara Talpes

      194116




      194116



























          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













           

          draft saved


          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53225969%2freact-native-video-black-screen-on-android%23new-answer', 'question_page');

          );

          Post as a guest



































          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes















           

          draft saved


          draft discarded















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53225969%2freact-native-video-black-screen-on-android%23new-answer', 'question_page');

          );

          Post as a guest














































































          Popular posts from this blog

          Use pre created SQLite database for Android project in kotlin

          Darth Vader #20

          Ondo