Focus(TVOS)

Description

In a catalog of products (multiple horizontal flatlists inside of a vertical flatlist), I will get delayed focus behavior in TVOS while switching in between elements, focus animation comes delayed. This got me thinking if somehow we could create a native component with the focus logic and manage the toggle style logic in within the native component which is running in main thread rather than using useState to manage it as TouchableOpacity does. Has someone tried this? is so it will be really helpful to know.

Version

0.69

Output of npx react-native info

System: OS: macOS 12.6 CPU: (10) arm64 Apple M1 Pro Memory: 445.08 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 18.10.0 - /opt/homebrew/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 6.14.16 - /usr/local/bin/npm Watchman: 2022.09.26.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1 Android SDK: Not Found IDEs: Android Studio: 2021.3 AI-213.7172.25.2113.9014738 Xcode: 14.1/14B47b - /usr/bin/xcodebuild Languages: Java: 11.0.14.1 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.0.0 => 18.0.0 react-native: Not Found react-native-macos: Not Found react-native-tvos: 0.69.6-0 npmGlobalPackages: react-native: Not Found

Steps to reproduce

Create any project with a catalog of products and render at least 400 elements.

Snack, code example, screenshot, or link to a repository

No response

[sebasg0]

Update: I was able to create a native wrapper, just exploring some props and how far we could take it. Once I got a stable version I will post it with you guys. This will solve our focus issues when having a large set of elements in a flatlist in tvOS/androidtv/firestick.

https://user-images.githubusercontent.com/83782787/201027806-ae0fcaa2-f032-4ddd-9f23-c0b362d465a5.mov

[sebasg0]

Issue is with large data sets, rendering a 20 x 20 nested flatlist/flashlist and then adding some logic to every card for focus style, this way you will be able to reproduce the delayed focus. I can see the parallax effect is already in the card but since the style is happening in the JS thread then it’s coming delayed. This is why I was asking if we could somehow create a native component and inject a React view as children and handle the style toggle on focus/blur in the native thread.

@douglowder I’m not very experienced in IOS but I know this could be achieved in android. Do you have any code snipet we could try of a UIView with focus logic natively in swift?