How to show activity indicator when video is buffering?

[cornedor]

How to show activity indicator when video is buffering?

[uribro]

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

It's been more than 2 years.
Any update on this?

[cornedor]

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

[isAlmogK]

+1

[bisht2ankit]

Same issue

[miladnit]

+1

[JP6720]

How to show when video is in List. I want to show buffering on every video.

[JP6720]

How to use this all methods for all videos when videos in Flatlist.
Because mostly state can use for single component only.

[max-kim]

How to use this all methods for all videos when videos in Flatlist.
Because mostly state can use for single component only.

You can isolate all of items to dedicated component with its own state

[mallikarjuna-sharma]

+1

[AtaMuhiuldin]

@uribro thanks, you solution worked for me as well!

[fukemy]

@uribro I can click to play video after set position 'absolute' of indicator

[sumitmitra255]

Hello thank you all for this post and the replies. I have achecived a really good buffering indicator.

[tanzeel-abdulWahid]

There is a default loader when video is played. How can we hide that?