Skip to content
This repository has been archived by the owner on May 5, 2023. It is now read-only.

A Working React Native Example #43

Closed
mgenev opened this issue Nov 9, 2019 · 1 comment
Closed

A Working React Native Example #43

mgenev opened this issue Nov 9, 2019 · 1 comment

Comments

@mgenev
Copy link

mgenev commented Nov 9, 2019

Is your feature request related to a problem? Please describe.
The existing example is for a web app, using window object even though it also imports from React Native. I managed to get it to run in a web browser, but I have not been able to run it on a Android emulator yet.

Describe the solution you'd like
A working example that we can run in a TV emulator

Describe alternatives you've considered
I tried to adapt the example to React Native, but I haven't gotten it to work

Additional context
Add any other context or screenshots about the feature request here.

@asgvard
Copy link
Collaborator

asgvard commented Aug 25, 2020

Hi,
Unfortunately adding react native example would add quite some maintenance cost in order to support fresh-ish version of RN, and also we would have to add all the RN dependencies here. This library is mainly built for web platforms, however on native platforms it helps to "keep in sync" with the native focus and to highlight the components when they get "focused" flag. In order to do this, you can simply bind "onFocus" callback from any Touchable element in RN to a stealFocus prop that you get from the withFocusable wrapper:

      // in the app entry point
      initNavigation({
        nativeMode: true
      });
      
      // in your UI component that is wrapped into withFocusable()
      <TouchableOpacity
        style={[
          styles.button,
          focused ? styles.buttonFocused : null
        ]}
        onPress={onPressHandler}
        onFocus={stealFocus} // this is triggered by the native focus from the Android or Apple TV
      >

Hope it helps 👍

@asgvard asgvard closed this as completed Aug 25, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants