CODEWITHSUNDEEP
androidreactjstizenandroid-tvwebos
user2358262
user2358262

Reputation: 257

TV Remote Control Spatial Navigation

I am developing a React library which will be consumed by a web application for SmartTV, our objective is to make it generic for working on different TV platform (webOS, Android).

Use Case: We want to enable user to navigate on different items on the screen using the remote control button. From the research it seems each TV platform has their own button codes (a code generated when a button on remote is pressed). I am trying to figure out,

  1. How are the arrow buttons handled in the TV control, does TV platforms (all? or certain platform?)takes care of changing the focus from a button to button

    • I am trying to understand in TV how does the arrow keys works?

    • When we press the arrow key does framework handles moving the focus to next focusable item (for example button to next button)

  2. If not what can be the best way for doing spatial navigation?

    • Is there a library available that we can use?

    • Is there a sample code to look on how TV apps like Netflix, Spotify do this or all these services develop different apps for different TV platforms?

Upvotes: 2

Views: 2185

Answers (1)

tvanlaerhoven
tvanlaerhoven

Reputation: 719

We also made an app supporting iOS, Android and Tizen. For iOS and Android we used react-native. The native focus engines for both Android and iOS do a good job. Any custom changes could be made on react-native level. As our Tizen app a web-based there was no navigation, so we reused the react-native code but we replaced any Touchable instances with a custom spatial navigation package based on https://www.npmjs.com/package/react-js-spatial-navigation (using Babel aliasing). react-native package imports were replaced with react-native-web. Check out the 'renative' project on how to do this. As a result, there is 100% code-sharing on all three platforms. On iOS & Android using the TouchableOpacity/TouchableHighlight, and on Tizen the replacement using our custom library. My intention is to shortly make a project demonstrating this.

Upvotes: 3

Related Questions