Hi,
I'm developing an App for SmartTV with React JS (well, trying to, haha) and was wondering if anyone have done something similar or know something about.
I'm not using React Native because the TV brands that
This post is to share knowledge about that topic and have a good conversation.
Feel free to ask something about it, I would be glad to answer what I know, :3
To start a discussion, I will ask: someone has implemented a way to handle navigation by arrow keys on the keyboard?
Top comments (19)
Hi, can you tell me where can I start developing web app for smart tv with react, I'm confused after searching in google and can't find a solution for developing compatible with all tv platform like webOS and Tizen
Hi!
First of all, thanks for showing intersting in this Smart TV development area, :D
So, to start develop with React, there isn't any source about it, unfornatelly.
What I did to maintain a single code to the two platform was to develop a single project and use the 'yarn build' command, and then, put this build project on other two projects (each one created to be a Tizen project and webOS project).
With that, you can test on the TVs and test.
Other thing I do is to avoid using too much specific code. An example is the video that I use. I prefer to use a custom HTML5 video player react component that I've built for the platforms and use in the projects instead of using the Tizen or webOS specific code.
Just keep in mind that testing in a real device is a need.
To maintain retrocompatibility you will need some polyfills for new features or build to a older js version using the Babel.
It's really an area that has almost nothing about it on the internet, :(, but just keep searching and asking for help that you will gain knowledge and experience to deal with new problems that will appear :D
thanks a lot, for remote control event what can I do?
To control the remote control events I use the onKeyDown event that the React give to me. Just put the event on your app's root component and handle the focus and where the user should go when some key is pressed.
The onKeyDown event will send an object that I usually call 'event'.
The event dispatched is this: developer.mozilla.org/en-US/docs/W...
You can use the 'key' attribute or others if you want it.
thanks a milion.
I wish I joined before this so I could have helped. I'm part of the Enact framework team and Enact was originally designed to deliver single page web apps on LG webOS TVs using the
Moonstonetheme. We've grown the framework considerably and offer a way for devs to create their own themes (or keep usingMoonstonebecause it is specifically designed for TVs).Enact is built on top of React, so you get everything you already have plus some syntactic sugar for things like assigning event handlers, computed properties, HOCs, etc.
Check us out:
If you think you might want to take it for a spin and have questions, come to our Gitter and give us a shout!
Hi, Can you share the source code or how to make react project transfer to Tizen app, I have used it with create react app and vite also, but after build the project , player is not working, and also sometime the app also does not run
Hello Shohzod do you reach to any solution for your problem ?
Im curious, how did you handle click events? They do not seem to work on smart-tvs
Hi,
I'm actually working with Samsung, LG and Panasonic. Since they all use a web browser behind the scenes, the work I have is to control the focus. With the browser focused on a element that has a onClick event, when the use press the Enter key on the remote control, it should work fine.
A example should be like this:
That's how I've done to handle the click events on the TVs, :D
Im curious if you had any trouble with links, this project i'm looking over for a friend everything works fine as he intended on desktop and mobile but the links do not work on smart tvs?
Do you mean the tag? If yes, in some devices it could not work properly, because the TVs runs the apps in a sandbox mode, so every redirect or link to another html page will open the TV browser, instead of staying on the app that was running.
To deal with this, I use react-router-dom on my app to make him a Single Page Application and navigate between routes using the Link and NavLink components.
For a better compatibility, I use the HashRouter component instead of the BrowserRouter that is commonly used.
Is that your case? If not, tell more details and we can figure out something, :D
hi, i am developing a ott app on tv using react.js, In this app i have a sidebar which has some cards vertically when i scroll in some tv i can't scroll and in some it happening but very slow how can i improve its refresh rate?
Thanks!
You can certainly create smart TV apps using React, but it takes a lot of work to manage performance. Expect to memoise everything, which itself has overhead.
Consider a fine-grained reactivity framework instead, such as SolidJS or Svelte. If all your supported smart TVs support WebGL, there's also Lightning.js which is a completely different approach and made specifically for smart TV apps.
It may be an old post but, did you manage to do anything about this? Can you give any guide about react on TIZEN/WEBOS
I did manage to have a full production app that is working ATM in Tizen and WebOS.
We used ReactJS with Typescript and created an architecture to work with.
ReactNative didn't have the tools that we needed.
Enact is good for basic projects, but to work on bigger apps, it's a pain.
To work with Tizen/WebOS platforms, just do a basic app with ReactJS, put on fullscreen (probably F11 if you are using windows) and create a way to handle focus imperatively with the arrow keys.
There's not a perfect way to do this, it will depends on your requirements.
One thing to do is create an
statein the component that will be the focused child component, and put anuseEffectthat will trigger state updates based on thekeydownevent.With this, you can check which component is focused, pass this as a prop, and update the style accordingly.
One thing that helped us is to create two basic apps using the templates that the Tizen/WebOS gave us, and on the HTML file, just create a redirect to your app.
With that, deploy your app where you want and it will work just fine.
This helps develop a lot faster.
Other than that, you just need to finish your app and deploy on the Tizen and WebOS app store's, fix the issues that they will find and you have your app available to everyone, :D
PS: sorry about the late answer, I was away from the dev.to for a while
Hi,
To implement navigation using arrow keys i used a package called "react-js-spatial-navigation".
Can you tell me how to using it or any toutorial for this ?
I need to build Smart TV app tizen/Webos with React JS Can you tell me how to configure project and how to start it, if i need to special packages please mention it