Can I use react-native-tvos instead of/along with react-native in my renative project?

[jasmeet447]

Hi, I've been developing a project in renative for tvos and I want to use some features that are present in react-native-tvos but not in react-native. Any suggestion might be helpful if I want to use react-native-tvos. Currently, I tried to import react-native-tvos instead of react-native, but it didn't work.

[aurimasmi]

What specifically you want to use from react-native-tvos? You can use rnv override system in order to bring features like: focus guide, back handler...

[jasmeet447]

Yes, I wanted to use the focus guide. But I don't know about the term "rnv overrides system", or how to use it in a renative project. Neither I've heard of it before, as I've started working on renative recently. Can you suggest some docs, links, or anything that might help?

[jasmeet447]

@aurimasmi, just a quick question: How can I override react-native with react-native-tvos using rnv override in my current project such that it doesn't affect the code for the other platforms? The same code is working fine on LG WebOS, Tizen ad Android TV.

[aurimasmi]

That's basically how your structure should look like(ignore firebase):

So you should add FocusGuide files which you can find here to your appConfigs/base/plugins/react-native/ and what rnv does it will pick it up those files and copy them to the same same folder in node_modules during the build.

After than you will be able to import FocusGuide in your JS code

[jasmeet447]

Hello @aurimasmi, I tried to add the following files under the hierarchy appConfigs/base/plugins/react-native/overrides/React/Views :

1. RCTTVFocusGuideView.h
2. RCTTVFocusGuideView.m
3. RCTTVFocusGuideViewManager.h
4. RCTTVFocusGuideViewManager.m
5. RCTTVView.h
6. RCTTVView.m

After doing so, I added the file TVFocusGuideView.js under the hierarchy: appConfigs/base/plugins/react-native/overrides/Libraries/Components/AppleTV.

As you told me earlier, rnv did pick those files and put them in the node modules in their respective folders. Unfortunately, I get an error while running the app with the description below: "Invariant Violation: Element type is invalid: expected a string(for built-in components) or a class/function (for composite components) but got: undefined. you likely forgot to export the component from the file it's defined in, or you might have mixed up default and named imports."

If I remove/comment out the calls of TVFocusGuideView in the render, my application runs fine. It only fails when I call TVFocusGuide inside the render. I've also attached a reference for the error. Any help will be appreciated.

[aurimasmi]

I'd suggest you to put TVFocusGuideView.js into your actual src instead of react-native overrides in that case you have full control, because I'm pretty sure this error occurrs because it can't find your TVFocusGuideView.js which sits in node_modules currently.

[jasmeet447]

@aurimasmi, I followed your suggestion and was able to build a focus guide view in a demo renative project with a single screen. When I tried to implement the same thing on my ongoing project, it shows me an error while using focus guide.(I implemented it the same as I did on my demo project). Here is the reference, Can you tell me what's wrong in it?

[aurimasmi]

Well the error is pretty explanatory as you have two different view files under the same name. In order to help you here I'd need to see your source code

[jasmeet447]

I can show you my code over a call(google meet, skype, zoom, etc). Please give me a suitable time for the call and I'll connect with you over there.

[jasmeet447]

@aurimasmi, We're stuck because of this issue for a long time and cannot submit our app on the AppStore.So please let me know a suitable timing for a call where we can discuss the issue.

[aurimasmi]

@jasmeet447 unfortunately I can't make a call any time soon. If your project is not very sensitive in a terms who can see the code just invite me there and I'll take a look in one of my night coding sessions. Other option that we will inject Focus Guide to renative so it will come out of the box, hopefully I can take a lot into this next week

[jasmeet447]

Hi @aurimasmi, I was able to debug the root cause of the issue that the focus guide couldn't be implemented in my project. It seems that there is some error with the constraints relative to other elements in the render method. I came to know that if I remove some components, I could see the focus guide working well. If I included that component again, I see an error( refer to the screen-shot.) I see this kind of error on other screens also in my project. Strange thing is that I see no error if I use any other View with the exact same styles in place of the focus guide, whether the component causing the error with the focus guide in the view is included in the render or not. Any suggestions will be helpful.

[RicardasN]

Hi @aurimasmi, I was able to debug the root cause of the issue that the focus guide couldn't be implemented in my project. It seems that there is some error with the constraints relative to other elements in the render method. I came to know that if I remove some components, I could see the focus guide working well. If I included that component again, I see an error( refer to the screen-shot.) I see this kind of error on other screens also in my project. Strange thing is that I see no error if I use any other View with the exact same styles in place of the focus guide, whether the component causing the error with the focus guide in the view is included in the render or not. Any suggestions will be helpful.

What helped me when I encountered this issue is just resetting the cache. npx rnv start -p tvos -r After that I never saw this issue pop up again, hope it helps you as well :)

[TheDuc]

if you want to use react-native-tvos instead of react-native, you can specify that in renative.json.

for example: renative.json

    "plugins": {
       (...)
        "react-native": {
            "version": "npm:[email protected]",
        },
       (...)
    }

[RosaryDarling]

Judging from discussion above, closing this issue as solved - if it is still persistent, please feel free to reopen this ticket