react native video fullscreen not working in IOS

[Muizz12]

Bug

Platform

Which player are you experiencing the problem on:

• iOS
• Android Don't anticipate it working because the 'fullscreen' property is only supported on iOS

Environment info

Library version: 6.0.0-alpha.8 Device: ios simulator

Steps To Reproduce

1. import Video from 'react-native-video';
2. <Video ref={videoRef} source={{uri: url}} style={styles.video} controls={true} resizeMode="contain" onBuffer={handleBuffer} onLoad={handleLoad} fullscreen={true} fullscreenAutorotate={true} fullscreenOrientation="landscape" /> ...

Expected behaviour

1.video should goto fullscreen 2.video should be played in landscape mode in fullScreen

[freeboub]

Did you try to use presentfullscreenplayer ? https://github.com/react-native-video/react-native-video/blob/master/API.md#presentfullscreenplayer

[vinchentso-ngouen]

Hello guys,

I find it best to have the video players (when in fullscreen) opened in a separate screen (navigation.push) and poped when the player is closed. (allocates space for the video so no zIndex issues) I find this to be the best and smooth way of presenting the player on fullscreen on iOS, I call the presentFullscreenPlayer when player fires "onLoad"

• isIOS - call it only for iOS (I have separate player implementation for Android - I can provide fully working fullscreen)

• presentFullscreenPlayerOnLoad - if it is true it will open on fullscreen on playerLoad

  const onLoad = (data: OnLoadData) => { if (isIOS && presentFullscreenPlayerOnLoad) { videoRef?.current?.presentFullscreenPlayer(); // doesn't work on android yet } }

This is my player implementation:

  <View style={styles.container}>
            <Videoj
              source={{ uri: videoData.url }}
              style={[styles.video, styles.iOSHeight]}
              ref={videoRef}
              paused={paused}
              onLoad={onLoad}
              onError={onError}
              onFullscreenPlayerDidDismiss={onFullscreenPlayerDidDismiss}
              fullscreen={false}
              resizeMode="cover"
            />
        </View>

        *** styles *** 

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#000',
        opacity: 0.9,
    },
    video: {
        width: 100 * vw, // - 100% width but it is using the actual size of the device from Dimensions
        height: 320,
    },
    iOSHeight: { // used to allocate space in the container if it's needed 
        height: 0.1,
    },

[Divyanshu1098]

Hello guys,

I find it best to have the video players (when in fullscreen) opened in a separate screen (navigation.push) and poped when the player is closed. (allocates space for the video so no zIndex issues) I find this to be the best and smooth way of presenting the player on fullscreen on iOS, I call the presentFullscreenPlayer when player fires "onLoad"

• isIOS - call it only for iOS (I have separate player implementation for Android - I can provide fully working fullscreen)
• presentFullscreenPlayerOnLoad - if it is true it will open on fullscreen on playerLoad const onLoad = (data: OnLoadData) => { if (isIOS && presentFullscreenPlayerOnLoad) { videoRef?.current?.presentFullscreenPlayer(); // doesn't work on android yet } }

This is my player implementation:

  <View style={styles.container}>
            <Videoj
              source={{ uri: videoData.url }}
              style={[styles.video, styles.iOSHeight]}
              ref={videoRef}
              paused={paused}
              onLoad={onLoad}
              onError={onError}
              onFullscreenPlayerDidDismiss={onFullscreenPlayerDidDismiss}
              fullscreen={false}
              resizeMode="cover"
            />
        </View>

        *** styles *** 

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#000',
        opacity: 0.9,
    },
    video: {
        width: 100 * vw, // - 100% width but it is using the actual size of the device from Dimensions
        height: 320,
    },
    iOSHeight: { // used to allocate space in the container if it's needed 
        height: 0.1,
    },

i'm facing the same issue can you help me on that or show the full code.

[kesha-antonov]

presentFullscreenPlayer not working also

"react-native-video": "^6.0.0-beta.8"

[YoungYanchi]

I'm also trying to use fullscreenAutorotate={true} fullscreenOrientation="landscape"

When I open full screen, the effect implied in the documentation does not happen. Can you tell me if anyone has managed to solve this problem?

With custom fullscreen everything works fine in android.

const toggleFullscreen = () => { if (!videoRef) return; if (isFullscreen) { videoRef.current.dismissFullscreenPlayer(); Orientation.lockToPortrait(); } else { videoRef.current.presentFullscreenPlayer(); Orientation.lockToLandscape(); } setIsFullScreen(!isFullscreen); };

[aman-technyx]

'm also trying to use fullscreenAutorotate={true} fullscreenOrientation="landscape"

When I open full screen, the effect implied in the documentation does not happen. Can you tell me if anyone has managed to solve this problem?

With custom fullscreen everything works fine in android.

const toggleFullscreen = () => { if (!videoRef) return; if (isFullscreen) { videoRef.current.dismissFullscreenPlayer(); Orientation.lockToPortrait(); } else { videoRef.current.presentFullscreenPlayer(); Orientation.lockToLandscape(); } setIsFullScreen(!isFullscreen); };

same query !

[seyedmostafahasani]

You can use this method. setFullScreen

[aman-technyx]

u saved my life @seyedmostafahasani :)

[seyedmostafahasani]

@KrzysztofMoch We can close this issue.

[aman-technyx]

@seyedmostafahasani can you tell me how can i change UI on landscape view ANDROID ?

[seyedmostafahasani]

You can use these libraries:

• react-native-orientation-locker
• Expo screenOrientation

[seyedmostafahasani]

@freeboub @KrzysztofMoch We can close this ticket.