`traverseForScrollView` crash with AVPlayer [iOS 17.2 BETA 1]

[KrzysztofMoch]

Description

iOS 17.2 beta 1 seems to crashing when using any implementation of AVPlayer with react-native-screens. Issue occurs only when we are using native controls

Some informations

In new iOS beta (17.2 beta 1) Apple add new UI element to AVPlayer hierarchy

When we are navigating away from screen, react-native-screens calls traverseForScrollView and when we are reaching it, it's throwing error that crash app

Error Message

*** -[__NSArray0 objectAtIndex:]: index 0 beyond bounds for empty array

Workaround

We can temporarily catch

with "try catch", but it is not a very good solution because in the future we may miss some "important" error

I think we should wait for next iOS release - If this don't get fixed the next step would be to detect if you are in AVPlayer and if so do not call the function

Steps to reproduce

To reproduce this issue we need to install xcode 15.1 beta 2 and iOS 17.2 sumulator.

Steps:

1. Open provided example app
2. Wait for video to load
3. Navigate away from screen
4. Application will crash

Snack or a link to a repository

https://github.com/abanobmikaeel/react-native-video-crash/

Screens version

3.27.0

React Native version

0.72.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

Any

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[tboba]

Hi @KrzysztofMoch, thanks for creating this issue! I confirm that this is reproducible. As we've discussed this bug at @software-mansion's mini-conference, as you've said - I suggest to wait on the next iOS 17.2 betas, as the changes that Apple have made may be the cause here (somehow, in iOS 17.0.1 I cannot reproduce this).

Also, FYI: when I was debugging this issue I also saw that function traverseForScrollView is being called horrendously often, which also seems to be a bug (it looks that it is being called every frame of the video?) - I see potential points to improve there.

[tboba]

Hi @KrzysztofMoch @udeyrishi @timharding! I'm happy to say that we've released new version of react-native-screens (3.29.0) which has this change included! 🥳

Check it out! If you find something wrong related to the newest version (this change is still buggy or doesn't work for you) let us know 🎉

[timharding]

Thank you @tboba -- we'll give it a spin.

[prashant6768]

I have updated react-native-screens to 3.29.0 but still my app is crashing.

[prashant6768]

@tboba Can you please help me. Following is my package.json

{ "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject", "postinstall": "patch-package" }, "dependencies": { "@expo-google-fonts/poppins": "^0.2.3", "@expo/config-plugins": "~7.2.2", "@expo/ngrok": "^4.1.0", "@expo/prebuild-config": "~6.2.4", "@react-native-async-storage/async-storage": "1.18.2", "@react-native-community/masked-view": "^0.1.11", "@react-native-community/netinfo": "9.3.10", "@react-native-community/slider": "4.4.2", "@react-native-picker/picker": "2.4.10", "@react-native/normalize-color": "^2.1.0", "@react-navigation/native": "^6.1.0", "@react-navigation/stack": "^6.3.8", "add": "^2.0.6", "axios": "^0.21.4", "chatkitty": "^1.58.2", "deprecated-react-native-prop-types": "^2.3.0", "eas-cli": "^4.1.2", "expo": "^49.0.13", "expo-av": "~13.4.1", "expo-camera": "~13.4.4", "expo-checkbox": "~2.4.0", "expo-constants": "~14.4.2", "expo-crypto": "~12.4.1", "expo-device": "~5.4.0", "expo-document-picker": "~11.5.4", "expo-image-picker": "~14.3.2", "expo-keep-awake": "~12.3.0", "expo-media-library": "~15.4.1", "expo-notifications": "^0.20.1", "expo-permissions": "~14.2.1", "expo-status-bar": "~1.6.0", "expo-updates": "^0.18.18", "expo-video-player": "2.0.1", "firebase": "^9.15.0", "formik": "^2.2.9", "global": "^4.4.0", "lodash.isequal": "^4.5.0", "mime": "^1.6.0", "ngrok": "^4.3.3", "patch-package": "^6.5.0", "path-to-regexp": "^6.2.1", "prop-types": "^15.8.1", "radio-buttons-react-native": "^1.0.4", "react": "18.2.0", "react-dom": "18.2.0", "react-multi-select-component": "^4.3.4", "react-native": "^0.72.6", "react-native-awesome-alerts": "^1.5.2", "react-native-checkbox-reanimated": "^0.1.1", "react-native-countdown-circle-timer": "^2.5.4", "react-native-country-codes-picker": "^2.2.2", "react-native-country-picker-modal": "^2.0.0", "react-native-gesture-handler": "~2.12.0", "react-native-gifted-chat": "^1.0.4", "react-native-in-app-notification": "^3.2.0", "react-native-loading-spinner-overlay": "^3.0.1", "react-native-mov-to-mp4": "^0.2.2", "react-native-multiple-select": "^0.5.12", "react-native-paper": "^4.12.5", "react-native-picker-select": "^8.0.4", "react-native-reanimated": "~3.3.0", "react-native-safe-area-context": "4.4.1", "react-native-screens": "^3.29.0", "react-native-search-filter": "^0.1.5", "react-native-sectioned-multi-select": "^0.9.1", "react-native-svg": "13.9.0", "react-native-vector-icons": "^7.1.0", "react-native-video": "^6.0.0-alpha.1", "react-native-web": "~0.19.6", "react-navigation": "^4.4.4", "react-navigation-stack": "^2.10.4", "toggle-switch-react-native": "^3.3.0", "typescript": "^5.1.3", "updates": "^15.1.1", "yup": "^0.29.3" }, "devDependencies": { "@babel/core": "^7.20.0", "@types/react-native": "^0.72.3", "babel-preset-expo": "^9.5.0" }, "private": true }

[tboba]

@prashant6768 Hi, are there any errors appearing in the console while your app crashes? Also, could you please create a minimal repro that represents your problem?

[prashant6768]

No I don't have any error in console while app is crashing.

[tboba]

@prashant6768 I see that you're using expo in your project. Is your app also crashing on the custom development build (created with npx expo prebuild)? If so, could you send a screenshot from Xcode with a stacktrace and the place (nearest place in react-native-screens where crash occurs) where the debugger stops? Also the minimal repro would be really helpful here 👀

[prashant6768]

This is Xcode crash. Please help me.

[tboba]

@prashant6768 based on the snack attached to this issue, this issue is irreproducible in my case - even after switching to another screen I'm not receiving any crash on the previous screen (with video). I can't do too much without further context 🤷

[prashant6768]

@tboba Thanks for looking into this. I really appreciate your time. Following is the link to download my complete repo. https://drive.google.com/file/d/1FQLccz_Sd5jOLbr630eEkNU7YJKerERD/view?usp=drive_link

I have made this public. So you can directly download it. If you have any problems Please send me your email id. I will give you the access.

[tboba]

@prashant6768 Thanks! I'll take a look onto this 👍

[tboba]

@prashant6768 I see that your project has react-native-screens bundled with version 3.22.0. Could you try to change it to 3.29.0 and create a custom development build (npx expo prebuild)? I've explored your project a bit and tried to ran few questions but I can't find any course with video 🤔

[prashant6768]

@tboba My react-native-screens version is "react-native-screens": "^3.29.0" in my package.json. Have you recreated the crash on local environment?

[benedictleekw]

Hi @tboba , I am also facing the same issues even after upgrading my react-native-screens version to 3.29.0. Any clue what else could be the issue? Here's my package.json { "dependencies": { "@expo/vector-icons": "^13.0.0", "@expo/webpack-config": "^19.0.0", "@react-native-async-storage/async-storage": "1.18.2", "@react-native-community/datetimepicker": "7.2.0", "@react-native-community/netinfo": "9.3.10", "@react-native-community/slider": "4.4.2", "@react-native-picker/picker": "2.4.10", "@react-navigation/native": "^6.1.7", "@shopify/flash-list": "1.4.3", "amazon-cognito-identity-js": "^6.3.3", "aws-amplify": "^5.3.8", "babel-plugin-module-resolver": "^5.0.0", "expo": "~49", "expo-av": "~13.4.1", "expo-crypto": "~12.4.1", "expo-dev-client": "~2.4.8", "expo-document-picker": "~11.5.4", "expo-font": "~11.4.0", "expo-image": "~1.3.2", "expo-linear-gradient": "~12.3.0", "expo-linking": "~5.0.2", "expo-router": "2.0.0", "expo-splash-screen": "~0.20.4", "expo-status-bar": "~1.6.0", "expo-system-ui": "~2.4.0", "expo-web-browser": "~12.3.2", "immer": "^10.0.2", "itertools": "^2.1.2", "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.72.5", "react-native-gesture-handler": "~2.12.0", "react-native-get-random-values": "~1.9.0", "react-native-safe-area-context": "4.6.3", "react-native-screens": "^3.29.0", "react-native-svg": "14.1.0", "react-native-url-polyfill": "^2.0.0", "react-native-web": "~0.19.6", "react-native-webview": "13.2.2", "use-immer": "^0.9.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@types/react": "~18.2.14", "@typescript-eslint/eslint-plugin": "^6.7.5", "@typescript-eslint/parser": "^6.7.5", "eslint": "^8.46.0", "jest": "^29.2.1", "jest-expo": "~49.0.0", "prettier": "^3.0.1", "prettier-plugin-organize-imports": "^3.2.3", "react-test-renderer": "18.2.0", "ts-node": "^10.9.1", "typescript": "^5.1.3" }, "jest": { "preset": "jest-expo" }, "name": "fo", "private": true, "scripts": { "android": "expo start --android", "lint": "eslint --fix .", "format": "prettier --write .", "ios": "expo start --ios", "start": "expo start", "start-dev-client": "expo start --dev-client", "test": "jest --watchAll", "web": "expo start --web" }, "prettier": { "plugins": [ "prettier-plugin-organize-imports" ] }, "overrides": { "semver": "^7.5.4" }, "version": "1.0.0" }

[prashant6768]

@benedictleekw You are using Expo AV. In Expo AV don't use "useNativeControls" and run it. It will get resolved.

[tboba]

Hi @prashant6768, sorry for the lack of response from me. I succeeded with running an example sent from you, but unfortunately it's too advanced to test on it - also, I see that you've removed some parts of the code and I cannot login in a fairly easy way (I also don't want to spend my time on adjusting that repro) 😕

[prashant6768]

@tboba Thank you very much for your valuable time. I have resolved my issue. Thanks.....

[miikemccabe]

@prashant6768 how did you solve the issue??