A Working React Native Example

[mgenev]

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]

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 👍