fullscreen mode on IOS breaks layout when video ends

[jonathangreco]

Current behavior

On IOS with the native players buttons I read a video and go to fullscreen. When the video finishes, i go back to my app and then I switch from portrait to landscape (or vice versa)

Reproduction steps

• Take any video.
• Play it on a player with controls set to true on IOS to have the native controls up.
• Switch to full screen.
• then when the video finishes (you can stop it manually) change layout mode (portrait / landscape) of your device

Then your app not taking the whole screen.

Expected behavior

The app should take the whole screen.

Platform

Which player are you experiencing the problem on:

• iOS

[jonathangreco]

@fubar Hi, I didn't take the time to answer your post, what you did is pretty amazing, if I understand it correctly you have made native controls on iOS that not show the fullscreen button ?

If so can you make a PR in this repo to allow via a props to remove the fullscreen button ?

[marlonandrade]

Hey folks, arrived on this issue after trying to troubleshoot an issue on my app on which just displaying video controls when not fullscreen would break the content size of scroll views when the react native view controller is not the whole screen size.

Shouldn't the logic that observes the frame on contentOverlayView and updates the reactViewController frame to the screen bounds to happen only when the video is fullscreen?

There's an if on the code over there that checks wether its full screen or not, but it only logs it. Applying this logic only on the fullscreen solves the problem I'm having on my App, but I couldn't verify if it still solves the other cases the workaround was intended to solve.

Cheers o/

[hedgerh]

@marlonandrade I stumbled on this issue and your PR https://github.com/react-native-community/react-native-video/pull/1931

This seems to still break my layout (uses tab navigation) when going into fullscreen then back. Would it make sense to add some logic to the "not fullscreen" part to return the view back to its original size?

Don't know Obj C that well to know what it'd look like in code, unfortunately.

[marlonandrade]

Hi @hedgerh, indeed there's no code path that restores the original size of the original react view and this will be a problem on my App as well.

I'm not very familiar with the whole view hierarchy and its lifecycle, so dunno if this code path will get executed when getting back from fullscreen to be able to restore it.

If u wanna give it a try, a quick hack to check it would be to save the original self.reactViewController.view.frame before the first time its set to the screen bounds and trying to restore it afterwards.

Unfortunately I don't have time right now to dedicate to that =(

[hedgerh]

Fyi if you need a hack, I ended up getting things to work by removing the reactViewController frame resize, then insstalling react-native-orientation and adding these handlers to my <Video> component.

onFullscreenPlayerWillPresent={() => {
  Orientation.unlockAllOrientations()
}}
onFullscreenPlayerWillDismiss={() => {
  Orientation.lockToPortrait();
}}

If I get a chance I may mess with the actual frame resize, but this may have to do.

[KestasVenslauskas]

any update on this?

[alex-a-pereira]

A little late here but just in case anybody hits a similar issue as me.. I had a similar issue because I was setting a wrapping view style with width: '100%'. The fix was to change the parent view to be set to a static width.

I know this doesn't fit all cases (even for us) but hopefully this saves somebody from spending an hour debugging :)

My component tree looked like:

// assume that we don't have control of width of view that renders 
// a MyVideoPlayer component
const MyVideoPlayer = (props) => {
  return (
    <View style={styles.container}>
      <Video style={styles.videoPlayer} {...props} />
    </View>
  )
}

const styles = EStyleSheet.create({
  container: {
    height: 200,
    width: '100%' // this breaks!
  },
  videoPlayer: { flex: 1 }
})

The fix:

const styles = EStyleSheet.create({
  container: {
    height: 200,
    width: Dimensions.get('window').width
  },
  videoPlayer: { flex: 1 }
})

[cristianoccazinsp]

Any ideas how to fix it when full screen video plays on React Native WebView ? Same issue as this library. I wonder if a RN bug.

[ayyunmufti]

Hi everyone I was facing same issues just found out Check if your app is wrapped with ant gesture handler provider please romove it and check When app switches back to portrait that rerenders and blocks the view