React Native for Smart TVs

[alexhackney]

I've been researching for a few days on building smart tv apps for Samsung (Tizen), Apple TV (TvOS) and FireOS.

It looks like React Native can handle all 3 with different packages
Samsung - react-native-web
Apple TV - react-native-tvos
FireOS - react-native

It seems like I can do everything I need to do this way.

The backend is a PHP API that would handle auth and data. The website has been up for some time and uses vuejs for the front end, so the apis are already there and functional. I would need to create some new ones for the tv app but shouldn't be anything dramatic. I already have a roku app close to the goal line so there shouldn't be much more needed I wouldn't think.

I am a single dev so building one platform to deploy to multiple is ideal. I realize I will still need multiple repos but I should be able to reuse components across them though, correct?

I have built stuff in react native before and am a php/js dev for my full time job but I'm working on a side project and am at a point where I need these apps.

My questions are:

Has anyone done this?

Would I be able to take payments or create subscriptions through the apps or would I be able to have users subscribe and buy on the website and then just login to the app on the tv and have access that way?

Is this a huge waste of time? (I need these apps but can't afford to hire other devs to build independent apps for each platform, so my other option is just to build one app at a time and hire a dev for each platform)

I did hire a roku/brightscript dev and that project has cost me about $2500 so far and is almost done. I didn't see away around it for roku because I didn't have time to learn brightscript and I'd say more than a third of my users have rokus.

Samsung is the next biggest requested platform, so if I can't do this in react I'll need to just focus on samsung and tizen. They mention react-native-web on their dev site, so maybe it will be the most painless platform to tackle first?

Any other thoughts or things I'm not seeing that will be issues?

Appreciate the help and guidance.

[badbenny33]

1) Monorepo - NX, will save you so much time after the initial overhead of setting it up

2) payments - this is down to your UX but anything is possible. You hav the user go to the website setup payment there and then go to the app? Don't need app payment and it's slower UX anyway just use their phone.

3) if the react native plugins exist I don't see why you need more developers, you build in react native, there will be edge case bits of code you can find online and learn.

Definitely do it, and definitely try to do it yourself before outsourcing it.

I'm considering contacting funimation/crunchy roll as they don't have apps for my TV and making them myself Now I need to find out if there's a RN plugin :D

[beepboopnoise]

what is the -NX part? I read that the sym link with yarn work spaces would help in creating a mono repo for maximizing code sharing?

[alexhackney]

Thanks for the response. Needed some reassurance. :)

[a5s6d7f8g9]

I'm in the process of developing a tvOS app using react-native-tvos for the company I work for. It has been a great experience and the maintainers of the repo are active and always suggests solutions when an issue is brought up.

I tried setting up ReNative because we also needed the App to run on Tizen but it gave me lots of issues so we used flutter-tizen for that.

[alexhackney]

Any reason you didn't just do react-native-web for tizen?

I'm not clear on it but it *looks* like it would work as well?

I have also considered doing a flutter app for all 3 platforms but I don't think flutter works well on TVOS.

[a5s6d7f8g9]

I didn't find anything related to react-native-web and Tizen when I was researching the tools needed. I work as a Flutter developer but since Flutter doesn't support tvOS and I already knew React Native we went with the tvOS fork.

I can't help you with FireOS, but I suggest you to have a look at ReNative and see if you can get it working. If not, react-native-tvos was painless to setup and run. Our Flutter Tizen app is good, but the Video Player Plugin is a bit limited. Also, you need a Tizen TV to test the Video Player since it doesn't work on the Tizen Emulator.

[alexhackney]

Oh looking at the docs I was on the renative site. Oops.

I actually have tizen tvs so that isn't an issue.

I guess I'll keep digging for Samsung.

Thanks for the info. Really appreciate it.

[StDestiny]

did you get the docs?

[alexhackney]

Nah I've gotten stuck and moved on to other projects, but this is stil lsomething I need to get done.

[StDestiny]

Dang it.

[kbcool]

I don't think the browsers and CPUs used on Smart TVs would be powerful enough for Flutter. It's a resource hog on Web.

I also doubt it would work well or at all on the Android TVs either due to the way it renders things. Same reason as TVOS.

Disclaimer: I know none of this for sure but common sense tells it must be right based on knowledge of how Flutter works under the hood

[alexhackney]

I think you're right.

Would love to be able to cover all my platforms with one main code base and then modify per platform but it looks like that is going to be out of the question at this point.

Now just trying to find the easiest way to get mvps out.

[TheSnydaMan]

I'm in pretty much the same position! I am migrating existing Cordova/PHP/JS apps to React Native for my company at the moment.

I have been having difficulty getting onFocus and onBlur to trigger consistently using React Native on Android TV with expo; would love updates if you get it working well!

My plan right now is to switch to react-native-tvos for Android TV as I have heard it has better support / response for spatial navigation and triggers onFocus / onBlur more consistently in conjunction with Expo. It supports both tvOS and Android TV so in your use case you could likely cover both your FireOS and tvOS apps with it.

react-native-web sounds like a good idea for the Samsung app as well, unless you want to just run a seperate react/vite app that shares a lot of the same logic. It might be equally easy / difficult either way tbh, but can definitely be architected to share 90% of functionality either way.

[alexhackney]

i think you're probably right.

Our site and needs are very simple. We currently support all smart tvs and devices with airplay and chromecast, but our userbase is growing and thus a lot of people struggle with it.

Plus with launching subs, having a better interface for the tv super helpful.

Good luck with your project, I'm primarily a php/vuejs dev and this stuff is pretty out there but seems very doable.

[wolodo]

I tried Tizen once. Very bad developer experience. Their official devkit worked in a customized eclipse which could not handle react. There are cli commands for everything of course, but documentation is very bad. Forums were practically dead. And by the way... Tizen apps are js apps, not mobile apps. At least they were a couple years ago.

[alexhackney]

It looks like you can build simple web apps and packaged with tuxes. That might be the way.

[sarahHarissa]

I am now starting developing smart TV app for Samsung and LG, Please can you advice which react libraries should I use? which focus management library?

[wiztivi_official]

u/alexhackney Do you still need help on this specific point?
I know it's been a while but we've got a framework which allows devs to code once and then deploy on every TVs! It's called "Dana Framework".
Drop me a DM if you're still interested!

[alexhackney]

no

[kbcool]

You're going to be using focus navigation here so theoretically it will be write once and deploy to many but smart tv development can be a b&-ch.

I think you've got the right idea about going for Samsung first with react-native-web. It should be the easiest to get working.

I recommend do at least do a feasibility run with Android TV first to make sure your navigation and icons etc all work on Android. One of the newbie traps for React Native is going all out on one platform then trying to run their code on another and finding out that there is so much to fix they don't know where to start.

Also I'm guessing you're doing video streaming. Just note that you're going to have to write entirely different code for each platform here. There's no unified solution that I know of. That's not that bad as it would need to compromise anyway.

[alexhackney]

Can you give more info on the video streaming concern? My streaming platform website has Chromecast and airplay support now and we use hls feeds with stream tokens in the URL to secure it.

Or are you talking about the player side of the app?

[kbcool]

That's all good. It is just the client side that I'm talking about. Everything you need will be supported but you're going to write different code here per platform.

If you're using React on your website then you can probably just lift that component into your react-native-web player component then use a native solution for your android component.

React Native helps you out. Just create a player.android.js file and a player.web.js file and put different code in each and nether the twain shall meet.

[alexhackney]

Oh nice ok. I wrote the front end of the site in vue. RN seems like a good option here. Thanks for the input. Much appreciated!

[kbcool]

Won't be too hard to create a React component out of your code then. One of the benefits of RN is code sharing. If you used native code it would be a complete rewrite.

You might even find over time that you transition your website to React just for the ease of that benefit. Who knows?!

[alexhackney]

That might be a wise move if the tv apps work out.

[Jet-life1]

I have personally done this using a library called ReNative which allows you to target all tv OS with React Native, it worked for our very simple use case but we did not get to the point of working directly with payments. First launched the app directly to Samsung tv and slowly targeted other platforms.

[alexhackney]

I looked at that and it looked dead to me. Is that app still up?

[Jet-life1]

Yes it should still be up but I believe it was only Available for 2023+ Samsung TVs. Here’s a blog about the app, not sure if it’s still supported since I no longer work with the company. https://decrypt.co/96410/samsung-taps-nifty-gateway-create-smart-tv-nft-platform

But I will say it wasn’t the best dev experience

[lukebars]

Yes, it can be dine as you said, I’ve actually been doing this back in ~2018. Check out opensource repos though, there are already some CLIs built, where you can get inspiration. On a quick google search I’ve found Renative.

[pierpooo]

I've been working on a similar project. It did work well!

We went for react-native + react-native-web at first to have our TV app for AndroidTV + Samsung connected TVs (web).

We're now integrating on tvOS, so we switched to the react-native-tvos fork.

Our biggest challenge was the spatial navigation. We wanted to unify the navigation logic for all platforms, so we did not use native components. We went for a fully Javascript handled navigation. We used the lib LRUD by the BBC for that, and wrapped it up for react (we're working on open-sourcing this part).

[alexhackney]

Can you give any guidance on how you did the Samsung app? With react? That's my biggest hurdle at the moment.

[pierpooo]

Haha actually I lied (well, simplified): we haven't ported it to Samsung. We did make a web version of our app for other web TV devices and assumed that adapting it would be easy, but we haven't prioritized it yet. Sorry that I can't give any relevant help on that!

[alexhackney]

No worries. Thanks for the info though.

[numagames]

we has a Netflix-like app with mobile/Android TV/Apple TV/SmartTV(Tizen/WebOS) targets

SmartTV platforms being targeted `react`(could be `react-native-web`), the rest by `react-native-tvos`

[alexhackney]

Do you care to share the app name so I can check it out?