react-native-video: method onBuffer is not exist?

In usage example:

<Video source={{uri: "background"}}   // Can be a URL or a local file.
       ref={(ref) => {
         this.player = ref
       }}                                      // Store reference
       onBuffer={this.onBuffer}                // Callback when remote video is buffering
       onError={this.videoError}               // Callback when video cannot be loaded
       style={styles.backgroundVideo} />

But in Event props onBuffer prop is not exist. And in code is same too. Please delete this from docs or fix onBuffer method work.

P.S. issue#1872

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 27

Most upvoted comments

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 tutorial
clean using gradlew clean and rebuild to make it work

sayem314 on Mar 26, 2020

Try using

onPlaybackStalled={this.handleBuffer.bind(this, { isBuffering: true })} and onPlaybackResume={this.handleBuffer.bind(this, { isBuffering: false })}

We explored the code and found these to be working on version ^4.4.4

teamtechalpha on Apr 10, 2020

Instead of creating react-native.config.js you can use solution from lib readme:

android/settings.gradle

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

max-kim on Jun 18, 2020

// use onLoad , onLoadStart and onProgress to show buffering image

// Please use your own style, this is only an example of buffering functionality not complete screen code

const [duration, setDuration] = useState(0.001)
const [currentTime, setCurrentTime] = useState(0.001)
const [seekValue, setSeekValue] = useState(0)
const [buffering, setBuffering] = useState(false)

const onProgress = (progress) => { if(currentTime == progress?.currentTime) { setBuffering(true) } else{ setBuffering(false) } setCurrentTime(progress?.currentTime) setSeekValue(progress?.playableDuration) }

const onLoad = ({ duration }) => { setDuration(duration) setBuffering(false) } return ( <Video source={{ uri: videoItem ? videoItem?.media_url : video?.media_url }} ref={ref => videoRef = ref} onLoad={onLoad} onLoadStart={()=>setBuffering(true)} onProgress={onProgress} /> {buffering && <Image source={your buffering gif}/> )

mayankgahlot on Mar 27, 2023

              onReadyForDisplay={() => {
                console.log('onReadyForDisplay');
                this.setState({
                  loading: false,
                });
                addVideoView(item);
              }}
              onBuffer={() => {
                console.log('onBuffer');
                this.setState({
                  loading: true,
                });
              }}
              onLoad={() => {
                this.setState({
                  paused: false,
                });
              }}
              onProgress={() => {
                // console.log('onProgress ==' + index);
              }}
              onError={(err) => {
                console.log(err);
                alert('Error occured');
              }}

prisar on Feb 10, 2021

I found out that by default this uses MediaPlayer which doesn’t have onBuffer support but after switching to ExoPlayer it’s working!

sayem314 on Mar 26, 2020