(Since 0.68.2-6) App crashing when a Touchable is mounted with hasTVPreferredFocus in a Stack.Screen (react-navigation)

Description

Following the changes made with that commit: https://github.com/react-native-tvos/react-native-tvos/commit/11a974fb0258e67e268655eb1cd4763330ed8c19, our app crashes when we have a Touchable with hasTVPreferredFocus={true} that is mounted at the same time as the route/screen it’s in.

We are using react-navigation / react-native-screens with createNativeStackNavigator.

If you delay the mounting of that component (ie: by 1 sec), it won’t crash.

The error we get is a bit random.

• In our project, we get this error:

ERROR: failed to load 'RawCamera' bundle: 'dlopen(/System/Library/CoreServices/RawCamera.bundle/RawCamera, 0x0101): tried: '/Users/leon/Library/Developer/Xcode/DerivedData/PlaySuisse-elyoxlzilfvivoavqmgdfcyghbfn/Build/Products/Debug-appletvsimulator/RawCamera' (no such file), '/Applications/Xcode.app/Contents/Developer/Platforms/AppleTVOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/tvOS.simruntime/Contents/Resources/RuntimeRoot/usr/lib/system/introspection/RawCamera' (no such file), '/Applications/Xcode.app/Contents/Developer/Platforms/AppleTVOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/tvOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/CoreServices/RawCamera.bundle/RawCamera' (no such file), '/System/Library/CoreServices/RawCamera.bundle/RawCamera' (no such file)'

• In the example project linked below we don’t have any obvious error in the logs.

Version

0.68.2-6

Output of npx react-native info

System:

OS: macOS 12.3.1 CPU: (8) arm64 Apple M1 Memory: 125.94 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries:

Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node Yarn: 1.22.17 - /opt/homebrew/bin/yarn CocoaPods: 1.11.3 - /opt/homebrew/bin/pod

iOS SDK:

Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5 IDEs:

Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild

Steps to reproduce

Here is an example project to reproduce the bug: example-app.zip Check App.js

[leonchabbey]

You should be able to see the issue in this example: ModalFreezeExample.zip

If the button inside RightPanel has its hasTVPreferredFocus prop set to true when the modal becomes visible, you will see the freeze. Set it to false, the animations will be smooth again.

[douglowder]

Found the fix: https://github.com/douglowder/TVInputDemo/blob/master/patches/react-native%2B0.68.2-6.patch

I apologize for making an obvious error in the implementation of that method.

Also, I strongly recommend that navigation screens using hasTVPreferredFocus should implement navigation focus listeners, and do not allow hasTVPreferredFocus to be true unless the screen is showing. The above sample app shows how to do this. See this hook:

https://github.com/douglowder/TVInputDemo/blob/master/src/navigation/useNavigationFocus.ts

and this example component where the second button gets preferred focus on TV:

https://github.com/douglowder/TVInputDemo/blob/master/src/screens/SimpleButtonExample.tsx