import * as React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Video, AVPlaybackStatus } from 'expo-av';

export default function App() {
  const video = React.useRef(null);
  const [status, setStatus] = React.useState({});
  return (
    <View style={styles.container}>
      <Video
        ref={video}
        style={styles.video}
        source={{
          uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
        }}
        useNativeControls
        resizeMode="contain"
        isLooping
        onPlaybackStatusUpdate={status => setStatus(() => status)}
      />
      <View style={styles.buttons}>
        <Button
          title={status.isPlaying ? 'Pause' : 'Play'}
          onPress={() =>
            status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
          }
        />
      </View>
    </View>
  );
}

%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  video: {
    alignSelf: 'center',
    width: 320,
    height: 200,
  },
  buttons: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

• isLooping

  Optional • Type: boolean

  A boolean describing if the media should play once (false) or loop indefinitely (true). See the AV documentation for more information.

  ---

• isMuted

  Optional • Type: boolean

  A boolean describing if the audio of this media should be muted. See the AV documentation for more information.

  ---

• positionMillis

  Optional • Type: number

  The desired position of playback in milliseconds. See the AV documentation for more information.

  ---

• posterSource

  Optional • Type: ImageProps['source']

  The source of an optional image to display over the video while it is loading. The following forms are supported:

  • A dictionary of the form { uri: 'http://path/to/file' } with a network URL pointing to an image file on the web.
  • require('path/to/file') for an image file asset in the source code directory.

  ---

• posterStyle

  Optional • Type: ImageProps['style']

  An optional property to pass custom styles to the poster image.

  ---

• progressUpdateIntervalMillis

  Optional • Type: number

  A number describing the new minimum interval in milliseconds between calls of onPlaybackStatusUpdate. See the AV documentation for more information.

  ---

• rate

  Optional • Type: number

  The desired playback rate of the media. This value must be between 0.0 and 32.0. Only available on Android API version 23 and later and iOS. See the AV documentation for more information.

  ---

• resizeMode

  Optional • Type: ResizeMode

  A string describing how the video should be scaled for display in the component view bounds. Must be one of the ResizeMode enum values.

  ---

• shouldCorrectPitch

  Optional • Type: boolean

  A boolean describing if we should correct the pitch for a changed rate. If set to true, the pitch of the audio will be corrected (so a rate different than 1.0 will timestretch the audio). See the AV documentation for more information.

  ---

• shouldPlay

  Optional • Type: boolean

  A boolean describing if the media is supposed to play. Playback may not start immediately after setting this value for reasons such as buffering. Make sure to update your UI based on the isPlaying and isBuffering properties of the AVPlaybackStatus. See the AV documentation for more information.

  ---

• source

  Optional • Type: AVPlaybackSource

  The source of the video data to display. If this prop is null, or left blank, the video component will display nothing. Note that this can also be set on the ref via loadAsync(). See below or the AV documentation for further information.

  The following forms for the source are supported:

  • A dictionary of the form { uri: string, headers?: { [string]: string }, overrideFileExtensionAndroid?: string } with a network URL pointing to a video file on the web, an optional headers object passed in a network request to the uri and an optional Android-specific overrideFileExtensionAndroid string overriding extension inferred from the URL. The overrideFileExtensionAndroid property may come in handy if the player receives an URL like example.com/play which redirects to example.com/player.m3u8. Setting this property to m3u8 would allow the Android player to properly infer the content type of the media and use proper media file reader.
  • require('path/to/file') for a video file asset in the source code directory.
  • An Asset object for a video file asset.

  See:

  • The Android developer documentation lists of the video formats supported on Android.
  • The iOS developer documentation lists of the video formats supported on iOS.

  ---

• status

  Optional • Type: AVPlaybackStatusToSet

  A dictionary setting a new AVPlaybackStatusToSet on the video. See the AV documentation for more information on AVPlaybackStatusToSet.

  ---

• useNativeControls

  Optional • Type: boolean

  A boolean which, if set to true, will display native playback controls (such as play and pause) within the Video component. If you'd prefer to use custom controls, you can write them yourself, and/or check out the VideoPlayer component.

  ---

• usePoster

  Optional • Type: boolean

  A boolean which, if set to true, will display an image (whose source is set via the prop posterSource) while the video is loading.

  ---

• volume

  Optional • Type: number

  The desired volume of the audio for this media. This value must be between 0.0 (silence) and 1.0 (maximum volume). See the AV documentation for more information.

  ---

• onError

  Optional • Type: (error: string) => void

  A function to be called if load or playback have encountered a fatal error. The function is passed a single error message string as a parameter. Errors sent here are also set on playbackStatus.error that are passed into the onPlaybackStatusUpdate callback.

  ---

• onFullscreenUpdate

  Optional • Type: (event: VideoFullscreenUpdateEvent) => void

  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).

  ---

• onLoad

  Optional • Type: (status: AVPlaybackStatus) => void

  A function to be called once the video has been loaded. The data is streamed so all of it may not have been fetched yet, just enough to render the first frame. The function is called with the AVPlaybackStatus of the video as its parameter. See the AV documentation for further information.

  ---

• onLoadStart

  Optional • Type: () => void

  A function to be called when the video begins to be loaded into memory. Called without any arguments.

  ---

• onPlaybackStatusUpdate

  Optional • Type: (status: AVPlaybackStatus) => void

  A function to be called regularly with the AVPlaybackStatus of the video. You will likely be using this a lot. See the AV documentation for further information on onPlaybackStatusUpdate, and the interval at which it is called.

  ---

• onReadyForDisplay

  Optional • Type: (event: VideoReadyForDisplayEvent) => void

  A function to be called when the video is ready for display. Note that this function gets called whenever the video's natural size changes.

  ---

Inherited Props

• ViewProps