React Native Expo Video av-expo

Question

I'm trying to do this in react native using av-expo.

1. When the button is pressed, a video component is rendered in fullscreen mode, portrait orientation.

2. When exiting from fullscreen, the video component is hidden.

I'm not able to:

• show it in fullscreen mode

• detect the exiting event from the fullscreen mode.

 function showVideo(){
    <Video
      source={{ uri:'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
      resizeMode="cover"
      useNativeControls
      style={{ width: 300, height: 300 }}/>
    }

  export default function App(){
    const[state,setState]=useState(0)
    return(
      <View>
        {state ? showVideo() : null}
        <Button onPress={=>(setState(1)}/>
        <View>
      )
  }

Would anyone please help me?

Answer 1

Since you use av-expo; there are FullScreen APIs for you.

The following methods are available on the component's ref:

• videoRef.presentFullscreenPlayer(); use this to present Video in the fullscreen mode.
• videoRef.dismissFullscreenPlayer()

and use onPlaybackStatusUpdate, a function to be called regularly with the onFullscreenUpdate, a function to be called when the state of the native iOS fullscreen view changes (controlled via the presentFullscreenPlayer() and dismissFullscreenPlayer() methods on the Video's ref.

export default class App extends React. Component{
  _videoRef;

  showVideoInFullscreen = async () => {
    // PlaybackStatus https://docs.expo.io/versions/latest/sdk/av/
    const status = await this._videoRef.presentFullscreenPlayer();
    console.log(status)
  }

  dismissVideoFromFullscreen = async () => {
    const status = await this._videoRef.dismissFullscreenPlayer();
    console.log(status);
  }

  onFullscreenUpdate = ({fullscreenUpdate, status}) => {
    console.log(fullscreenUpdate, status)
    switch (fullscreenUpdate) {
      case Video.FULLSCREEN_UPDATE_PLAYER_WILL_PRESENT: 
        console.log(' the fullscreen player is about to present');
        break;
      case Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT: 
        console.log('the fullscreen player just finished presenting');
        break;
      case Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS: 
        console.log('the fullscreen player is about to dismiss');
        break;
      case Video.FULLSCREEN_UPDATE_PLAYER_DID_DISMISS: 
        console.log('the fullscreen player just finished dismissing');
    }
  }

  render () {
   return (
       <View style={styles.container}>
           <Video
               ref={(ref) => (this._videoRef = ref)}
               source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
               resizeMode="cover"
               useNativeControls
               onFullscreenUpdate={this.onFullscreenUpdate}
               style={{ width: 300, height: 300 }}
           />
           <Button
               title={'show video'}
               onPress={() => {
                   this.showVideoInFullscreen();
               }}
           />
       </View>
   );
  }
}

output

the fullscreen player is about to present
the fullscreen player just finished presenting
the fullscreen player is about to dismiss
the fullscreen player just finished dismissing