How to change orientation of video player on a mobile device using react native expo

Question

I want to be able to change the orientation of my video player in react native using expo. But I'm not able to find out how.

This is what I've done so far:

import { Video } from "expo-av";
import React, { useState, useRef } from "react";
import { Button, StyleSheet, View } from "react-native";

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: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
        }}
        useNativeControls
        resizeMode="contain"
        isLooping
        onPlaybackStatusUpdate={setStatus}
      />
    </View>
  );
}

Could anyone help me out on how to proceed?

Answer 1

You can use the ScreenOrientation API provided by Expo and then conditionally render your component.