I've been doing some tests on tvOS and Android with React Native, but I have experienced some weird (or just different from what I expected) behaviour with spatial navigation.
Here's the skeleton of the page:
So, there is a vertical Flat List that contains multiple rails, in this case horizontal Flat Lists, and each of those contains multiple TouchableHighlight components.
On Apple TV, without any particular configuration, swipes on the remote make the focus move to the nearest Touchable, even if it belongs to a different rail. Ex. from rail 1 touchable 3, a swipe down gives focus to rail 2 touchable 3. If the touchables on different rails are staggered (because of scrolling around) the system calculates the nearest touchable in the swipe direction. Any swipe right at the end of a rail or left at the beginning of a rail get ignored. I tried setting hasTVPreferredFocus on a touchable and it gets the focus on screen load. I tried setting hasTVPreferredFocus on multiple touchables on different rails to see if they become the focused ones when I "enter" the rail, but it is not so.
On Android TV, the behaviour is mostly the same, but, at the end of a rail, if I press right on the remote and there are any touchables on the right of the focused one (on any rail) the focus moves to the nearest one, which means it could move to the touchable that is partially visible on a rail up or down relative to the focused touchable.
Here's a screen for reference:
The focus is on the white touchable: on right click on the remote the focus moves to the green touchable that is partially visible on the next rail/FlatList, instead of not moving. I have tried to force the behaviour on Android with nextFocus[Down|Up|Right|Left] but to no avail.
Maybe I have missed something on the docs, but is there a way to override this "default" behaviour?
Lets say that I want this behaviour:
- The focus should stop on the last/first item of a rail if I keep pressing right/left, instead of moving to a different rail/touchable.
- If I move the focus down on a different rail, the first item of that rail should get the focus or if I had already visited that rail, it's last focused item should get the focus.
- The focused touchable of a rail should stay on the left of the screen and should only move right when the last touchable of the rail has reached into view.
Is any of these achievable without having to tap into native code?