OnBuffer props in react-native-video is not working

I am using react-native-video for playing videos from url. I am using onBuffer prop to show loader if the video is buffering. But in my case onBuffer is not working. If the video size is large then in case of a slow network or unstable network video is taking time to play, so I want to show loader if the video is not playing but in buffering mode.

Solution 1:

I had same issue and i was able to fix this in android by following this suggestion: https://github.com/react-native-community/react-native-video/issues/1920#issuecomment-604545238

From what i understand, by default android uses android player which dont have these features. But ExoPlayer has lots features like buffering, adaptive bitrate etc.. So, we have to explicitly specify to use ExoPlayer. Important part is to enable multiDex.

This is what the fix suggested and it worked fine:

If you are curois how to enable exoplayer then follow these steps:

create react-native.config.js with following content:

module.exports = {
  dependencies: {
    'react-native-video': {
      platforms: {
        android: {
          sourceDir: '../node_modules/react-native-video/android-exoplayer',
        },
      },
    },
  },
};

now enable multidex following this https://developer.android.com/studio/build/multidex

clean using gradlew clean and rebuild to make it work