Support for keyboard navigation

[JohnPaulHarold]

This isn't an issue as such, more of a question. However, I don't see any place to ask questions. Like a Slack, or Gitter.

I'd like to experiment with Revas, specifically for creating a UI that uses some sort of spatial navigation. The kind of navigation you see on Smart TV apps like Netflix, or Emulator Front ends such as RetroArch. Tab based navigation is related also I suppose.

• Does Revas have any conception of a 'focus' state?
• Does Revas expose any methods to query for other/adjacent nodes on the current canvas?

Again, my apologies for the non "issue", I didn't see where else to ask.

[pinqy520]

It is OK to ask questions here :)

I don't know if my understanding is correct, you want a function similar to switching between different tab navigation interfaces with a TV remote control.

If i am right, you need to implement your own tab component and use an "activeTab" state to control the currently displayed page, then listen to keyboard events to change the "activeTab" state.

Just like a simple stack based navigation I implemented here

[JohnPaulHarold]

Ah, no, when I say 'tab', I mean the tab key, like how you can tab through a form, or accessibility navigation. I didn't think about tabs in that UI sense, sorry.

With TV remote, I mean using the arrow keys to move around different buttons, or elements on the screen.

So, take your example app. I'd want to be able to say "focus initially on the OVERVIEW button" and then listen out for the user pressing down and then using that info issue a command to "move the focus to TIMELINE APP" button and so on down a <List/>, or sideways along a <Carousel/> or whatever. I'd imagine that there would need to be some way of querying for a node on the visible canvas so you can then interact with it, focus to it, get useful info about it, like screen coordinates or other info.

[pinqy520]

OK, I understand. You can get the absolute position of an element in the canvas through the "onLayout" property, and then use a global store to record the position of each selectable element. When the remote control presses the arrow key, you can calculate which element is next

As for the style of the selected element, you need to write a wrapper component to implement it

[JohnPaulHarold]

OK, that's great and thank you for the pointer about the onLayout property.