React native expo video view is not rotating the video.

I want to rotate a react native video view to 90deg, I am seeing only the video controllers are getting rotated but the video is still in that mode. I am building a video player for the TVs.

I have tried this:

<VideoView
  style={styles.video}
  player={player}
  source={source}
  contentFit="contain"
  allowsFullscreen
  rotation={Number(orientation)}
  onError={(error) => console.error("Video loading error:", error)}
  nativeControls={false}
/>

React native expo video view is not rotating the video.

I want to rotate a react native video view to 90deg, I am seeing only the video controllers are getting rotated but the video is still in that mode. I am building a video player for the TVs.

I have tried this:

<VideoView
  style={styles.video}
  player={player}
  source={source}
  contentFit="contain"
  allowsFullscreen
  rotation={Number(orientation)}
  onError={(error) => console.error("Video loading error:", error)}
  nativeControls={false}
/>

• android
• react-native
• expo
• react-native-video

1 Answer 1

You are directly trying to rotate videoView which might not rotate in some cases, instead you could try to rotate the container like this.

<View style={[styles.container, { transform: [{ rotate: orientation ? `${orientation}deg` : '0deg'}] }]}>
   <VideoView
      style={styles.video}
      source={source}
      resizeMode="contain" //or "cover" according to your preference
      shouldPlay
      isLooping
      useNativeControls={false}
      />
   </View>
  );
};