A Working React Native Example about react-spatial-navigation

[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 👍