javascripttypescriptreact-nativeexpoexpo-av

How to handle internet disconnection when loading an expo-av video component


I have a simple reactnative component, which has the expo-av video element on it.

I'm having an issue were if the network is disconnected when attempting to play the video and then when the internet connection returns, it does not resume playing the video.

any ideas? some code below (simplified)

export default function VideoView(props: any) {
  const {question} = props;
  return <Video
    videoStyle={{marginHorizontal: 10}}
    source={{uri: question.video_url}}
    rate={1.0}
    volume={1.0}
    isMuted={false}
    resizeMode={ResizeMode.CONTAIN}
    shouldPlay
    ref={videoRef}
    style={{width: windowWidth, height: windowHeight}} 
  />
}

Solution

  • I simply listened for network changes.

    also listened to onload event

    <Video
              videoStyle={{marginHorizontal: 10}}
              source={{uri: question.video_url}}
              rate={1.0}
              volume={1.0}
              isMuted={false}
              onPlaybackStatusUpdate={status => onPlaybackStatusUpdate(status)}
              resizeMode={ResizeMode.CONTAIN}
              shouldPlay
              ref={videoRef}
              onLoad={() => {
                try{
                  videoRef.current.setPositionAsync(0);
                  videoRef.current.playAsync();
                } catch(err){
                  console.log("Question Video",err);
                }
              }}
              style={{width: windowWidth, height: (windowWidth - 20) * 1.02}}
            />
    

    also I used

    
    import {useNetInfo} from '@react-native-community/netinfo';
    const netInfo = useNetInfo();
    

    i then wrapped the video element in this condition.

    return !netInfo.isConnected ? <Video
              videoStyle={{marginHorizontal: 10}}
              source={{uri: question.video_url}}
              rate={1.0}
              volume={1.0}
              isMuted={false}
              onPlaybackStatusUpdate={status => onPlaybackStatusUpdate(status)}
              resizeMode={ResizeMode.CONTAIN}
              shouldPlay
              ref={videoRef}
              onLoad={() => {
                try{
                  videoRef.current.setPositionAsync(0);
                  videoRef.current.playAsync();
                } catch(err){
                  console.log("Question Video",err);
                }
              }}
              style={{width: windowWidth, height: (windowWidth - 20) * 1.02}}
            /> : <span>Network offline</span>