expo: [expo-av] Video resizeMode doesn't work on first loop on iOS14

🐛 Bug Report

Summary of Issue

On iOS14 expo-av Video resizeMode does not correctly resize on first render, correctly renders on subsequent loops. iOS 13 and below is fine.

Environment - output of expo diagnostics & the platform(s) you’re targeting

Expo CLI 3.8.0 environment info: System: OS: macOS 10.15.5 Shell: 3.2.57 - /bin/bash Binaries: Node: 12.13.1 - /usr/local/bin/node Yarn: 1.21.1 - /usr/local/bin/yarn npm: 6.12.1 - /usr/local/bin/npm IDEs: Android Studio: 3.3 AI-182.5107.16.33.5264788 Xcode: 12.0/12A7209 - /usr/bin/xcodebuild npmPackages: @storybook/react-native: 5.3.19 => 5.3.19 @types/react: 16.9.46 => 16.9.46 @types/react-native: 0.63.8 => 0.63.8 react: 16.13.1 => 16.13.1 react-native: 0.63.2 => 0.63.2 npmGlobalPackages: expo-cli: 3.11.9

Using unimodules, bare workflow.

Reproducible Demo

    <Video
      source={{
        uri: "https://furball-dev-filestorage-wcjv7qlhvwqk.s3.amazonaws.com/miles.m4v",
      }}
      rate={1.0}
      volume={1.0}
      isMuted={false}
      shouldPlay
      isLooping
      style={{ width: 300 height: 300 }}
      resizeMode="cover"
    />

Steps to Reproduce

Drop that code snipped in a project with expo-av on an iOS14 simulator.

Expected Behavior vs Actual Behavior

Left image is iOS12, right is iOS14 playing on first loop.

image

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 12
  • Comments: 15 (3 by maintainers)

Most upvoted comments

Another quick note - even if the video already fits the dimensions, in my case a square video in a square container, each of the resizeMode options (“cover”, “contain”, “stretch”) will still incorrectly resize the video in their own, unique, wrong way.

Hope this additional info is helpful.

@antoarva I still experience this issue on iOS 14.1

Also I updated the react, react-native: “react”: “16.13.1”, “react-native”: “0.63.3”,

maybe this would solve your issue

Yesterday iOS 14.1 released, the video is fixed now. Just update.

Here is the related issue inside react-native-video: https://github.com/react-native-community/react-native-video/issues/2159 - it has a potential workaround I’m currently trying to apply to ExpoAV manually.

Also, cross-posting from over there so everyone here can see as well:

From react-native-camera, mentioning some other issue threads here stating this might be a bug with iOS 14 (as it seems to be fixed in 14.2 beta): https://github.com/react-native-community/react-native-camera/issues/2979#issuecomment-696264917

I just tested iOS 14.2 Beta as pointed out by some users in the react-native-video issues and this ratio problem is gone. Strange, but good I guess