expo: [expo-av] Using `useNativeControls` on the Video component crashes app on unmount

Minimal reproducible example

https://github.com/erxclau/expo-av-video-use-native-controls-repro

Summary

Current behavior

Clone the repository and install dependencies.
Start the app with npm run start.
Open the app with Expo Go. Note that I am using an iPhone 12 on iOS 17.2 (21C5046c).
You will be brought to a screen with a video (Tab One). Note that you are able to tap on the video to play it using native controls.
Tap on the second tab (Tab Two).
At this point, Expo Go crashes for me.
Comment out useNativeControls in app/(tabs)/index.tsx.
Restart the application and tap on the second tab.
Expo Go does not crash.

Expected behavior

I expect that useNativeControls works on the Video component without Expo Go crashing.

Environment

expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 14.1.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.2.0 - ~/.nvm/versions/node/v20.2.0/bin/node
      Yarn: 1.22.21 - ~/.nvm/versions/node/v20.2.0/bin/yarn
      npm: 9.6.6 - ~/.nvm/versions/node/v20.2.0/bin/npm
    Managers:
      CocoaPods: 1.14.2 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0
    IDEs:
      Android Studio: 2021.3 AI-213.7172.25.2113.9123335
      Xcode: 15.0.1/15A507 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~49.0.18 => 49.0.21 
      react: 18.2.0 => 18.2.0 
      react-dom: 18.2.0 => 18.2.0 
      react-native: 0.72.6 => 0.72.6 
      react-native-web: ~0.19.6 => 0.19.9 
    npmGlobalPackages:
      eas-cli: 5.4.0
      expo-cli: 6.3.10
    Expo Workflow: managed

About this issue

Original URL
State: closed
Created 7 months ago
Reactions: 6
Comments: 15

Most upvoted comments

I have solved this with SDK 50 and a development build by installing "react-native-screens": "3.29.0"

+11

jjjjonathan on Dec 22, 2023

Our app is still using Expo 49. Upgrading react-native-screensto v3.29.0 did not solve the issue for us. Additionally, we got this warning:

Some dependencies are incompatible with the installed expo version: react-native-screens@3.29.0 - expected version: ~3.22.0

But the following code, which sets useNativeControls to false before unmounting, solved the problem for us:

const [useNativeControls, setUseNativeControls] = useState(true);
useEffect(() => {
  return () => setUseNativeControls(false);
}, []);
return <Video source={{ uri }} useNativeControls={useNativeControls} />;

expo@49.0.0
react-native-screens@~3.22.0
expo-av@~13.4.1

MBrendel on Feb 27, 2024

I think it’s the same issue as https://github.com/software-mansion/react-native-screens/issues/1967, but I updated react-native-screens and the issue is still happening at least in Expo Go. I’m creating a build right now to check if it works at least in the build

andresespinosapc on Dec 14, 2023

@sreubenstone This issue has been fixed for me on SDK 50 with all of the latest dependencies, notably react-native-screens 3.29.0.

erxclau on Feb 1, 2024

I have the same issue. The App crashes every time I am trying to navigate away from a component with Video expo-av useNativeControls controls enabled.

GiomScript on Jan 17, 2024

I have solved this with SDK 50 and a development build by installing "react-native-screens": "3.29.0"

Upgrading to "react-native-screens": "3.29.0" did it for me…thank you jjjjonathan!!!

App crashed with iOS 17.2 and 17.2.1 upon unmount of Video with useNativeControls.

"expo": "~49.0.8", "react-native": "0.72.6", "expo-av": "~13.4.1",

johannesklaasen on Jan 5, 2024