Android Fullscreen doesn't work in portrait

[jwktje]

Running Expo Go on a physical Android device, the Fullscreen behaviour seems broken.
When I press play inline, it all works well. When I then press fullscreen, it shows the player in a large white webview.

Here is the strange thing. When I minimize the app (as in; navigate away but don't kill Expo go) and come back, it shows correctly in a portrait fullscreen view. Also if I press the Android rotate button on the bottom right (which I don't know if all versions have) it works fine in landscape.

On iOS I also have no problems. So it really boils down to Android in Portrait upon first pressing the fullscreen button.

Check out this screenshot that shows my issue.

I really want to solve this. What can I do to get this issue resolved?

[7assenTlili]

I am having the same issue. I don't have a fix yet but what I noticed is that if I give the view wrapping the player more height (i.e 800), it works.

This is most likely related to react-native-webview, there is a similar thread for youtube where they suggest using a custom user-agent but this didn't work for me.

[Marcoo09]

Hi @jwktje
Could you push on Github the example of the screenshot? I'll see it next week.
I've just tested on Android with the example app and it's working propertly both android and ios.

[jwktje]

@Marcoo09 @7assenTlili Here is a minimal example of when the issue occurs. This code works fine in fullscreen on iOS, but on Android it doesn't.

import {View} from 'react-native';
import {Vimeo} from "react-native-vimeo-iframe";

export default function App() {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <View style={{height: 170, width: 300}}>
                <Vimeo videoId={'226053498'}/>
            </View>
        </View>
    );
}

For me at least, when running this on an Android device the "fullscreen" opens in a huge white page like in my earlier screenshot. This only goes away if you do any of the following;

• Force rotation to landscape and back to portrait
• Blur/focus the app. So either leaving and coming back to it, or swipe up and hold the app in the overview of open apps for a while
• Give the wrapping view a large height (which I can't do for layout purposes)

It seems that basically the app needs to be triggered to reconsider the Webview height after going full screen. And when it does that, it fixes itself. But upon initial pressing of fullscreen, the layout is broken.

[Marcoo09]

@jwktje thanks for the information. I've tried this on a couple of physical Android devices with different OS versions, but it works for me.
Could you tell me which version of React Native, Android and React Native WebView are you using? Also let me know what model of device you are using and if you have Chrome or what browser as default.

[nupurpurohit]

I am facing same issue in samsung galaxy m52

[nupurpurohit]

Can we manually remove fullscreen option?
@Marcoo09

[nupurpurohit]

why does in iOS when play button is clicked video plays in fullscreen? @Marcoo09

[hryhoriiK97]

@nupurpurohit In your Vimeo account settings, you can hide the fullscreen button for your videos.

[hryhoriiK97]

why does in iOS when play button is clicked video plays in fullscreen? @Marcoo09
Add this line of code allowsInlineMediaPlayback={true}, it should prevent opening Vimeo player in full-screen.

          <Vimeo
                videoId={yourVideoId}
                containerStyle={styles.vimeoPlayerContainer}
                allowsInlineMediaPlayback={true}
            />