react-native-tvos

react-native-tvos copied to clipboard

Description

First of all, I want to thank you with the new implementation of nextFocus on tvOS with UIFocusGuide. It is really great and makes it usable in nearly every cases compared to previous implem.

However there is some cases where it is not working as expected:

• When the Touchable (TouchableOpacity in my case) is moving because it is a child of an animated view that is translating. I have the feeling the UIFocusGuide you put on each side of touchable is not impacted by the animations or layout changes. I don't know how it can be resolved, but when there is some complex UI with animations of multiple stack of buttons, it would be great if animations was not impacting nextFocus.

• In a ScrollView. It is working when you want to nextFocus on the "exterior" sides of an item like for example, when it is a vertical list, going from the item to nextFocusLeft or nextFocusRight is working, but if you want to put for example a nextFocusDown on the first item, it is not considered and just focus the next item of the list.

I hope my explanation is clear, and i thank you again for this great repo !

Version

0.68.2-3

Output of npx react-native info

System: OS: macOS 12.3 CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz Memory: 33.38 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.3.0 - /usr/local/bin/node Yarn: Not Found npm: 8.5.1 - /usr/local/bin/npm Watchman: 2021.06.07.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /Users/etiennelabrot/.rbenv/shims/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: Not Found IDEs: Android Studio: Not Found Xcode: 13.3/13E113 - /usr/bin/xcodebuild Languages: Java: Not Found npmPackages: @react-native-community/cli: Not Found react: ^17.0.2 => 17.0.2 react-native: Not Found react-native-macos: Not Found react-native-tvos: 0.68.2-3 npmGlobalPackages: react-native: Not Found

Steps to reproduce

Specific cases were described in the description.

If need more information about how to reproduce issues, tell me.

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

No response

Thanks for this very detailed explanation. I thought that the layout constraints on the focus guides would prevent these from happening... I'll look into this 👍

Thank you for your quick response! I want to precise, that it becomes a problem when you want to block focus on certain directions on a touchable by assigning nextFocusDirection with the native tag of the touchable itself. It becomes difficult to control focus on those specific cases

@etiennelab I'm not sure that having focus redirect back to the same view is supported, but that's an interesting idea, and I'll try it out to see what happens.

@douglowder I have tried with very simple case and it worked actually! Like if you have just 2 elements and the nextFocusRight of the element of the left is assigned to itself, you can't go the the element on the right. So it seems working ! But not in the cases described in the issue

That's what we're currently doing as well, when you want to "prevent" the cursor from going in a direction just focus the tag itself again. It's not too handy though, lots of boiler plate.

@douglowder any news on this ? Did you managed to reproduce this issue ?

I have not been able to reproduce the issue yet.

@etiennelab it would be helpful if you can provide a simple example (either the ScrollView or animated view) that shows the issue you are trying to solve.