search

NoriginMedia / react-spatial-navigation

DEPRECATED. HOC-based Spatial Navigation. NEW Hooks version is available here: https://github.com/NoriginMedia/norigin-spatial-navigation
MIT License
226 stars 64 forks source link

[Question] Behaviour on React Native (in contrast to React Native Web) #20

Closed shirakaba closed 5 years ago

shirakaba commented 5 years ago

In version 2.3.0, I see in the changelog that you added support for non-Web environments. Thank you, this is a perfect solution for my use-case (which react-tv-navigation falls short of), as I would love to deploy to as many platforms as possible.

Out of curiosity, how does react-spatial-navigation work for mobile platforms? e.g. if a keyboard is attached, which is not unheard of on iPad, will spatial navigation still be useable?

asgvard commented 5 years ago

Hi!

The native mode feature was mainly introduced to make it work on AndroidTV and AppleTV. We are relying on the onFocus callback that is injected in all Touchable elements in react-native when launching on the TV devices: https://facebook.github.io/react-native/docs/building-for-apple-tv So in native mode the native layer handles the key listeners and navigation logic, and react-spatial-navigation is just used to "sync" those focus changes in order to update focused flag to use it to highlight the components etc. So it's more like "read only" mode.

On mobiles though I think this wouldn't work great, because even if you connect keyboard, there is no key listeners for native key press events in this package, and react-native doesn't enable this onFocus behaviour on Touchable elements on mobile devices. For now this wasn't a use case for us, but we might add more support for native key events to use this package as you would normally use in the browser environment. But from the other hand we tried to avoid having "react-native" as a dependency in this package, so this is still not clear whether we will do it or not.

shirakaba commented 5 years ago

We are relying on the onFocus callback that is injected in all Touchable elements in react-native

Is onFocus injected for Button components, or just Touchable elements?

in native mode the native layer handles the key listeners and navigation logic

I see – I think I'll understand the consequences of this a bit better once I'm making an actual AppleTV/AndroidTV app!

react-native doesn't enable this onFocus behaviour on Touchable elements on mobile devices

Ah, it's a shame they didn't implement that. But fair enough.

Thanks for answering my questions – react-spatial-navigation is running successfully in my app now on both RN an RNW, so I'll be getting familiar with how to use it. I'll be making some PRs shortly!

shirakaba commented 5 years ago

Whoops, need to re-open this to clarify this question:

We are relying on the onFocus callback that is injected in all Touchable elements in react-native

Is onFocus injected for Button components, or just Touchable elements?

asgvard commented 5 years ago

Hi,

We didn't try it with Button, but I assume it does the same as with Touchable components, for example it has some props related to focus management: https://facebook.github.io/react-native/docs/button Like hasTVPreferredFocus, nextFocusDown/Left etc.