React native example

[coucoseth]

Hello, could you give a sample react native tv app example because i have tried following the docs but i just cant fully understand how to use this library

[predikament]

Hello @coucoseth.

Hello, could you give a sample react native tv app example because i have tried following the docs but i just cant fully understand how to use this library

Sorry to hear you're having issues integrating the library.

We do however already provide a fairly easy and straight-forward example on how to do this, so perhaps it would be better if you share where you are stuck and we can try to help you resolve your issues?

(If it's a general understanding of React Native development then this is however probably not the forum to ask for help, just to be clear. ☺️)

[coucoseth]

please is it possible to give an example in pure react native, i have looked through the example given, i think its in typescript and styled components. i'm not so sure if thats fairly easy and straight-forward for alot of people🥲 since we all start with react native and typescript isnt taken on by all folks

[predikament]

Hello again @coucoseth.

There is an example component for React Native in the README (here):

import { TouchableOpacity, Text } from 'react-native';
import { useFocusable } from '@noriginmedia/norigin-spatial-navigation';

function Button() {
  const { ref, focused, focusSelf } = useFocusable();

  return (<TouchableOpacity
    ref={ref}
    onFocus={focusSelf}
    style={focused ? styles.buttonFocused : styles.button}
  >
    <Text>Press me</Text>
  </TouchableOpacity>);
}

This is a fairly minimal and to the point example, with no TypeScript usage at all.

[coucoseth]

thank you.

[predikament]

My pleasure. ☺️

[coucoseth]

hello @predikament , i created a component with above code and called it abunch of times in a screen. it didnt work on my end. here is a repo of my implementation: https://github.com/coucoseth/androidTv

[predikament]

Hello again @coucoseth!

You've basically done it, just missing this: https://github.com/NoriginMedia/Norigin-Spatial-Navigation#nativemode-boolean-default-false

We'll update the docs to note this flag in the RN part ASAP to avoid any such confusion in the future.

Let me know if enabling that option resolved your issue. ☺️

[coucoseth]

i added this but it seems not to work

init({
  // options
  nativeMode: true,
  debug: true,
});

i think i am missing something

[predikament]

Hello again, @coucoseth..

i think i am missing something

Sorry to hear that, but I am not sure what it could be.

Perhaps you could provide some more detail, e.g.:

• Does it not render?
• Does it not focus?
• Can you not navigate?
• Do you have any specific errors?
• ...

What is the issue you see? Just "It does not work" is a bit difficult to troubleshoot. 😅

We use this library in RN apps in production on a daily basis, so if there were any obvious issues we'd probably have resolved them already.

I just written and tested a small makeshift sample of this myself, using code very similar to what you shared:

import React from "react";
import { ScrollView, StyleSheet, Text, TouchableOpacity } from "react-native";
import { init, useFocusable } from "@noriginmedia/norigin-spatial-navigation";

init({
  nativeMode: true
});

const styles = StyleSheet.create({
  app: {
    backgroundColor: "#000"
  },
  button: {
    height: 40,
    width: "100%",
    borderWidth: 1,
    borderColor: "#FFF",
    backgroundColor: "#000"
  },
  buttonFocused: {
    backgroundColor: '#F0F'
  },
  text: {
    color: '#FFF',
    textAlign: 'center',
    lineHeight: 40
  }
});

const MovieCard = () => {
  const { ref, focused, focusSelf } = useFocusable();

  return (
    <TouchableOpacity
      ref={ref}
      onFocus={focusSelf}
      style={{...styles.button, ...(focused && styles.buttonFocused)}}
    >
      <Text style={styles.text}>Press me</Text>
    </TouchableOpacity>
  );
};

const App = () => (
  <ScrollView style={styles.app}>
    <MovieCard />
    <MovieCard />
    <MovieCard />
  </ScrollView>
);

export default App;

And this is what I see:

Focus and navigation both work as intended..

[coucoseth]

sorry i wasnt more detailed on whats not working, i noticed the issue is the focused prop, its always false, it does not update when the component is active so on my end the button is not turning to purple as your screenshot describes. Note that i copied and pasted your code into my project without changing a thing and it still wasnt working. i then modified the MovieCard component below to tract the state of focused and thats when i discovered its always false

const MovieCard = ({name}) => {
  const {ref, focused, focusSelf} = useFocusable();

  return (
    <TouchableOpacity
      onPress={() => console.log('button pressed', name, focused)}
      ref={ref}
      onFocus={focusSelf}
      style={{...styles.button, ...(focused && styles.buttonFocused)}}>
      <Text style={styles.text}>Press me</Text>
    </TouchableOpacity>
  );
};

[predikament]

sorry i wasnt more detailed on whats not working

Thanks for providing some more details, it makes it easier to help.

and thats when i discovered its always false

That is interesting / strange. I have checked your project, but I have not tried running it, I just checked the relevant code and it looks like it should be fine.

We can see if we can find time to run your actual project, to see if we can help troubleshoot the issue. Will get back to you.

[coucoseth]

thanks, waiting on your response, let me push the changes i made that let me discover the focused prop always staying false

[SemenovDeveloper]

Hello, can you tell me please? Is it possible to use the focus engine of your library in React Native instead of the native engine? Is it a good practice or better leave native engine for React Native projects? How Norigin implement focus in your ReactNative projects?

[predikament]

Hello, can you tell me please?

Hello @SemenovDeveloper, I will try to answer your questions below:

Is it possible to use the focus engine of your library in React Native instead of the native engine?

No, this is not possible - This is mentioned in the documentation here: https://github.com/NoriginMedia/Norigin-Spatial-Navigation/#using-the-library-in-react-native-environment.

What our library does here is inherently "proxying" the focus of the native engine, so that you can keep track of what's focused (natively) using our library.

Is it a good practice or better leave native engine for React Native projects? How Norigin implement focus in your ReactNative projects?

We use this library for several multi-platform projects, where we simply toggle the nativeMode flag based on what platform the application is being built for.

This means that when the application runs on native platforms, the native engine handles the focus-management for us, whilst when it is running on web platforms it is handled by our library. Regardless of which platform we always manage these states in the same way, through the useFocusable hook (i.e. instead of separate implementations of focus management for each platform), which is very convenient.

I hope that answers your questions. Happy coding! ☺️

[predikament]

thanks, waiting on your response, let me push the changes i made that let me discover the focused prop always staying false

Hello again @coucoseth.

Unfortunately I am rather busy this week, so I have not found time to run and debug your project yet.

I will try to find time as soon as I can, but I can't make any promises it will happen very soon, as I have quite a lot of work ahead of me this week. Sorry I can't be of more immediate help.

Will inquire if any of the other contributors can perhaps try to help you out.

[coucoseth]

hello @predikament , just curious.Is it possible for me to get access to the code of your sample app? if not, Do you have any other libraries installed in that sample app? if yes, which ones and also what versions of react-native and Norigin-Spatial-Navigation are you using.

[predikament]

Hello again, @coucoseth.

Is it possible for me to get access to the code of your sample app?

I actually just created a new app locally to test your logic and I had no other libraries installed. Using the latest RN version with our latest library version..

Or do you mean the embedded sample app in this repo?: https://github.com/NoriginMedia/Norigin-Spatial-Navigation/blob/main/src/App.tsx

We also have applications out in production with tens of thousands of users on these versions:

• "react-native": "0.59.9"
• "react-native": "0.61.4"

So perhaps you could try to see if there's some issue with the RN version(s) you are using specifically?

[predikament]

@coucoseth: Hello again!

Just wanted to check if you made any progress figuring out the problem you were having with integrating the library? ☺️

[coucoseth]

not really, i decided to use the default navigation. Annoying, but I had no choice, I failed to figure out the issue

[JerryBels]

Hello @predikament , I found this subject here while having a similar issue. Basically with newer versions of React Native, onFocus doesn't trigger anymore. Focus happens though, and moving with the remote works, but you can't use onFocus to update the styling. I'm on Expo 47 with RN 0.70.5 now, upgrading from Expo 42 with RN 0.63. It worked. It doesn't anymore. Looks like the only solution would be to switch to https://github.com/react-native-tvos/react-native-tvos but it triggers other issues for me so...

[predikament]

Hello @JerryBel!

I understand you are seeing some issues, but could I please ask that you open a new issue about it?

This one was closed almost half a year ago and I am not sure how relevant it is to you problem. Thanks.

[JerryBels]

@predikament no, I don't need to open another issue because I resolved my own without using your repo :) it was just a friendly message to let you know that your library won't work for React Native latest versions, which doesn't fire onFocus and onBlur events. I resolved my own issue with TouchableNativeFeedback but it's unrelated.

I think the original poster of this issue had the same problem as me. That's why I posted here.

Good luck!

[predikament]

@JerryBels: Understood. You're probably right. Thanks for letting us know.