On android video not rotating to landscape while using expo-av

[nitingupta220]

I am using expo-av to play a video. But I'm experiencing an issue when I tried to fullscreen the video it works perfectly fine on IOS the video rotated to landscape mode and running perfectly fine.
But when I tried the same thing on Android nothing happens at that time. Really a big issue I think. Can anyone help? @cruzach

[nitingupta220]

If you need the code for the Video component to understand better here it is.

<Video
              source={{
                uri: this.state.video
              }}
              rate={1.0}
              volume={1.0}
              isMuted={false}
              resizeMode="cover"
              isLooping
              // shouldPlay
              useNativeControls={true}
              onReadyForDisplay={params => {
                params.naturalSize.orientation = "landscape";
                console.log("params---->", params.naturalSize.orientation);
              }}
              style={{ height: 300, margin: 10 }}
            />

I'm even setting the orientation to landscape when video is ready to display but still nothing happen. Please help @cruzach

[cruzach]

Hi @nitingupta220 , no need to @-mention people in your github issues, we do our best to work through them as fast as we can.

The best way to get your issue handled as quickly as possible is to fill out the entire issue template, be as clear and concise as possible, and provide a snack that reproduces the issue. It also doesn't hurt to do some digging and debugging into the source code to try and find out what the root cause might be!

[nitingupta220]

Hello, @cruzach thanks for letting me know that you are doing your work well. Also, I think I have explained my concern and issue above clearly. But if you need any more details. Please let me know.

[cruzach]

The bug report template specifies all the details we need, so if you fill that out you should be good to go

[nitingupta220]

Link to Snack

Hey, I have created a snack for my issue. The problem here is when I tried to do fullscreen and tilted the phone the video changes to landscape mode in Ios but the same thing is not happening on android.

Let me know if you need any more details regarding my issue.

In order to reproduce just run the snack on your phone and add a video by clicking on the button and then press the fullscreen button and tilt your phone to landscape.

P.S: - It works perfectly fine on IOS but the main issue is on Android.

Please help @cruzach

[bapjiws]

Having the same issue with Android, works fine on iOS.

@nitingupta220 For the time being, I went with

import {ScreenOrientation} from 'expo';

...then inside the component

const [orientationIsLandscape, setOrientationIsLandscape] = useState(false);

...and then later in the code

<Video
  onFullscreenUpdate={async () => {
    await ScreenOrientation.lockAsync(
      orientationIsLandscape ? ScreenOrientation.OrientationLock.PORTRAIT : 
      ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
  );
  setOrientationIsLandscape(!orientationIsLandscape);
}}>

seems to do the job :)

[nitingupta220]

Hey, @bapjiws Thanks for the help. Works with this approach. But I just wonder why we won't be able to do it as mentioned in the document. It works perfectly fine on IOS but having problems with Android.

Btw thanks for the help.

[bapjiws]

Hey @nitingupta220, you're very welcome. However, I just had a colleague test this on another version of Android than mine (I'm running 9, he's running 10), and my solution didn't work for him :) So yes, let's hope it's fixed soon, it's a pretty big deal.

[nitingupta220]

Yes @bapjiws Yes, it's a pretty big deal if we are seeing how Expo is developing very fast. Also, do you know any workflow so that I can use any react-native dependency in the Expo project? Like there is one dependency named react-native-camera-roll. I want to use it in my project which is running with Expo but I can't always getting this error [Unhandled promise rejection: TypeError: null is not an object (evaluating '_nativeInterface.default.getPhotos')]
Let me know if you know any workaround. Also, I tried linking the dependency by running react-native link but still getting the same error.

Let me know if you can help.
Thanks

[bapjiws]

@nitingupta220 You mean, using native code with Expo? As far as I understand, you'd have to eject from a managed Expo app so you can link such libraries (and essentially be able to use any libraries from then on), but I haven't tried it yet, so can't advice. But if it helps, I use JS.coach and Native Directory to find libraries and check if they are available for Expo.
@cruzach Any updates on this issue? Thanks!

[cruzach]

I updated the Snack because it wasn't clear what to do to replicate the problem- this new snack has just a video component in it. It is rotating the same for me on both iOS and Android, so it's not clear to me what the bug is. If you can provide a clearer explanation of the problem, that would be a big help 🙂

[nitingupta220]

Hey, @bapjiws I have one question if you can answer it that would be great.
There is an app called firework which is a storytelling app. You can check it on the website for more info: Firework
In this app what happens is when you rotate the phone the video rotates too.

My question is how can we achieve that functionality. It is pretty cool. If you can help me in this that would be great.

Hey, @cruzach if you know how to achieve this please tell me.

[techdiary]

@nitingupta220 I hope charile update on snack has your answer to original question, for transforming and scaling video on rotating screen this link should help.
I think this ticket can be closed as its' title was giving me idea that enpo-av do not support android landscape mode.
@cruzach

[mleister97]

New working version inspired by @bapjiws (typescript):

import * as ScreenOrientation from 'expo-screen-orientation';

const videoRef = useRef<any>() // Note: No idea which type i should use here

const onFullscreenUpdate = async ({fullscreenUpdate}: VideoFullscreenUpdateEvent) => {
    switch (fullscreenUpdate) {
        case Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT:
            await ScreenOrientation.unlockAsync() // only on Android required
            break;
        case Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS:
            await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT) // only on Android required
            break;
    }
}

const showVideoInFullscreen = async () => { await videoRef.current.presentFullscreenPlayer() }

<Button title="Play video" onPress={showVideoInFullscreen} />

<Video
    ref={videoRef}
    source={{uri: videoSource}}
    resizeMode={ResizeMode.CONTAIN}
    useNativeControls={true}
    onFullscreenUpdate={onFullscreenUpdate}
/>

Anyways, I think this is a bug and should be fixed.

[joranb]

We are on the latest version now and the problem still persists. Here is an update to @mleister97 fix:

  const onFullscreenUpdate = async ({ fullscreenUpdate }: VideoFullscreenUpdateEvent) => {
    if (fullscreenUpdate === VideoFullscreenUpdate.PLAYER_DID_PRESENT) {
      await ScreenOrientation.unlockAsync();
    } else if (fullscreenUpdate === VideoFullscreenUpdate.PLAYER_WILL_DISMISS) {
      await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
    }
  };

They have moved the enums, this change did the trick for us. Now the video rotates in landscape on Android as expected.