react-native-video-player How to show activity indicator when video is buffering?

I have to show an activity indicator when video is buffering.

Jun 12 '17 07:06 imbudhiraja

That is currently not possible, I'll try to add it soon.

Jun 12 '17 08:06 cornedor

+1

Aug 01 '17 05:08 isAlmogK

Same issue

Dec 02 '17 11:12 bisht2ankit

+1

Feb 20 '18 23:02 miladnit

I achieve it with this code, hope it helps:

import {ActivityIndicator} from 'react-native';

constructor(props) {
    super(props);
    this.state = {opacity: 0};
}

 onLoadStart = () => {
    this.setState({opacity: 1});
}

onLoad = () => {
    this.setState({opacity: 0});
}

onBuffer = ({isBuffering}) => {
    this.setState({opacity: isBuffering ? 1 : 0});
}

render() {
    return (
        <View style={styles.container}>
            <Video
                onBuffer={this.onBuffer}
                onLoadStart={this.onLoadStart}
                onLoad={this.onLoad}
            />
              <ActivityIndicator
                animating
                size="large"
                color={Colors.Pink}
                style={[styles.activityIndicator, {opacity: this.state.opacity}]}
            />
        </View>
    );
}

styles.activityIndicator: {
        position: 'absolute',
        top: 70,
        left: 70,
        right: 70,
        height: 50,
    },

opacity is used instead of isLoading state due to react native bug see: https://stackoverflow.com/questions/38579665/reactnative-activityindicator-not-showing-when-animating-property-initiate-false