React-native: [React Native for X] TVOS

[tpisto]

Any insights already about new Apple TVOS development using React Native?

[ide]

It should work with a couple of modifications although not all of the native modules are present since some of them don't make sense. Without having done any tvOS development, my current guess is you could get it running in a weekend.

[dotcypress]

:+1:

[Kureev]

@ide Let me know if I can help you somehow, very excited about it!

[ide]

I'm not actively working on it. Someone smart should just do it. Go for it @Kureev.

[auser]

+1 (@Kureerv -- I'd be down to attempt help this weekend)

[jordanbyron]

I spent a little time this afternoon ripping bits and pieces out of react-native that don't play nice with tvOS and got the SampleApp running on tvOS:

https://github.com/jordanbyron/react-native/tree/tvOS

Fair warning a lot is broken and still needs to be fixed:

1. The developer menu is shot because tvOS does not support UIActionSheet.
2. I commented out a few deprecated lines from RCTWebSocketExecutor.m
3. Lists should always have at least three things. So insert your favorite emoji here :fire_engine:

Hopefully this can start as a jumping off point if anyone else wants to seriously get react-native support in tvOS.

[brentvatne]

[rileybracken]

[browniefed]

[ide]

[michalgritzbach]

[SOSANA]

[jordanbyron]

I hope you're happy @brentvatne. Look what you've done!

This afternoon I've been messing around with restoring the developer menu. Looking through Apple's new HIG for tvOS there isn't an equilivelent to UIActionSheet so I was thinking a left-aligned table would work just as well with buttons in each cell.

That being said all of this is pushing my Obj-C / UIKit knowledge to the limits so if anyone with a bit more experience wants to help get the dev menu restored let me know. Luckily the CMD+D shortcut is still working so we have a way to toggle the menu while using the simulator. I haven't thought of any clever ways to activate the menu on real hardware vis-à-vis shaking on iOS. But that's a problem for later.

[dhrrgn]

@jordanbyron Nice work here. As for the dev menu when running on the hardware:

The new remote has built a built in gyro and accelerometer, so you could probably take advantage of that fairly easily with the new GCMotion class. Most notably, the userAcceleration property.

Another option is to use the Play/Pause button, and trigger the menu after it is pressed for 2 seconds or something (to avoid conflicting with what the app may want to do when that button was pressed). That is also fairly simple: Detecting Gestures and Button Presses (UIPressType.UIPressTypePlayPause)

[dhrrgn]

@jordanbyron Also, just noticed that tvOS _does_ have Action Sheet support, but UIActionSheet has been replaced by UIAlertController. You just have to set the preferredStyle to UIAlertControllerStyleActionSheet.

_Side Note: That class also replaces UIAlertView, so you would need to update RCTAlertManager to use that on tvOS (although I see you just removed that file altogether)_

[jordanbyron]

@dhrrgn dude that's exactly what I was looking for! You rock :metal:

Check it out:

https://github.com/jordanbyron/react-native/commit/c7c4d9a941f6c0025633dd7bbbe6179d2a0f88f4

And

[WillsonSmith]

Wow. That was fast.

[sabeurthabti]

sick

[frankbolviken]

[robwormald]

great, there goes my productivity this week. awesome!

[oronbz]

[fabslab]

How is setting up the focus chain with preferredFocusedComponent going to work? It requires references to other components in the tree.

[dhrrgn]

@fsbdev I am not exactly sure what preferredFocusedComponent is (although I have an idea), however the UIManager has a viewRegistry which has references to all of the Views (keyed by reactTag, which is just an integer id). With that in mind, it should be relatively simple to do whatever to need. With component references.

[deanmcpherson]

This is cool, I got it up and running this afternoon. Am wondering how to get a button working. Should I try and modify Touchable to be navigable, or is it really more the place of a new component?

[respectTheCode]

What is the path to getting a tvOS or any new platform supported?

[duro]

Will these efforts at some point be merged with the react-native project, or do they need to be ported out to a separate project? Is there somewhere I can learn what you guys have done already? I want in on the tvOS party!! 😜😜😜😜

[kinergy]

+1

[dhrrgn]

@duro There hasn't been any work/movement on this in 2 months, so...unless someone puts real effort into getting everything working (the OP had to strip out a lot of things not supported by tvOS), I don't see this going anywhere anytime soon. Unless Facebook wants to release an Apple TV app written in RN.

As for seeing what is done already, you can see the comparison here: https://github.com/tadeuzagallo/react-native/compare/d5bce33f696606d639a7630403393de496760f63...jordanbyron:tvOS

Note: As I mentioned, the commits are 2 months old, so...YMMV.

[grabbou]

I have a working demo of TVOS where I followed @jordanbyron work + organised it in a better mergable way w/o mirroring the whole repository. The only issue I had encountered was not being able to override React headers. And because React Native was using some classes not present on TVOS, it was causing compile-time errors. Obviously, implementation can be easily overwritten, but as per compiler design, it first looks for headers in current directory, then in header search paths, so even if you override RCTUtils.h, some stuff from node_modules/react-native/React/Base will keep referring to the original one.

The only solution I can see atm to get it working is to add in some compile time flags (I guess 3) to skip some methods that use classes not available on TVOS. If it's not possible, the craziest idea might be just to copy the files to-override to node_modules/react-native/... as is during post_install hook. As I said, it's just a matter of 3 header files, so might be worth investigating.

That's all. Then we can get npm-publishable react-native-tvos project that does not duplicate react-native but only defines its own RCT....xcodeproj stuff + overrides maybe 3 or 4 core files.

[braunsquared]

Hey @grabbou, any chance you'd be willing to share your work somewhere? I'm looking to start investigating react-native on TVOS and it sounds like you may have a great starting point. I'd rather not reinvent the wheel if it's already in the works.

Thanks!

[grabbou]

Yeah. I'll try to make it on GitHub this week and post a link here :)

[braunsquared]

So I decided to tackle it anyway. I introduced a new platform to the react-native cli for code generation and the packager. I also created all the needed platform specific component scripts and created new tvOS targets for the React xcode projects. The template for the new tvOS project still needs to be updated and the dev tools need to modified for tvOS. There are some stragglers hanging around too that I simply haven't been able to get to yet.

For any shared objc code which has calls that aren't supported on tvOS, I've wrapped with TARGET_OS_IOS preprocessor macros. There were only a handful of these so it wasn't so bad.

Feel free to check it out https://github.com/braunsquared/react-native

Things I still need to address:

• DevTools - I see someone addressed it above so maybe I'll merge their changes in. I still have to look at it in detail.
• UIAlertView alternatives - There are some places a call to RCTAlertView is used. Only found one or two, but these will have to be updated to a UIAlertController for tvOS.
• tvOS template project needs to be updated to make a tvOS based xcodeproj. Currently it's a mirror of the ios template which I manually update for tvOS.
• I was running into an issue with babel on the master branch not finding the plugins since it's not looking in the right place for them. As a work around, I manually installed the babel plugins into my test project but this isn't right and will continue to bug me. I couldn't find any simple immediate solution. I'm currently assuming it's because it's the master branch and they just moved to babel-6
• How best to handle the new intents mechanisms for tvOS?
• Need to start reviewing the new tvOS specific components and look at implementing the view managers.

First screener for your viewing pleasure:

[braunsquared]

So I made some more commits to my endeavors over the weekend. The base environment seems to be quite stable although changes to user input are going to present an interesting challenge. I've updated the dev tools menu to work with tvOS as well as updated the red box error view to better handle tvOS styling. Debug in Chrome is working as well. The inspector doesn't work since the input mechanism relies on touch to work properly (something to think about, I've seen some apps make their own cursor so maybe this is an option for use input inside the inspector).

Since I based the fork off of the master branch, there are some hurdles to get past. Babel 6 continues to have issues finding it's plugins as it's not looking in the right spot for the deps. The react-haste module, which has no repo associated with it so I have no way to submit a pull request, has some changes from the release version of react-native which cause js exceptions when debugging in chrome. Most specifically, there is an DEV conditional which attempts to make a reference to document from inside the debug worker which kills debugging in chrome.

To truly put it through it's paces, I've begun porting the samples over to tvOS. Since there is such a drastic change to user input, I will likely focus there first.

I've also started to look into adding a TVMLTVOS component since this seems to be a primary native component for tvOS.

Any feedback or suggestions for user input is most appreciated.

Game2048 in action: (Displays great, no user input yet :/ )

Working Red Box Error: (navigating/selecting stack works as expected)

[Andreyco]

Awesome work here!

[idibidiart]

HI,

Wouldn't Facebook want to release a social app for TvOS at some point in the future? Wondering if it's too early to tag this as 'Community Responsibility' ? @brentvatne

[deanmcpherson]

So in terms of getting input working, a naive quick win could be to try and port over UIButton? Not sure whether that is an extremely difficult thing to do. According to http://nerds.airbnb.com/tvos-focus-engine/ the only UIKit components that are focussable are;

UIButton
UIControl
UISegmentedControl
UITabBar
UITextField
UISearchBar

[bleonard]

I realized something that seems interesting, but it's not clear to me how it applies.

This whole TVML thing is basically the same approach as react native.

• The application delegate launches the javascript
• the JS renders a template and the native layout engine maps that to UIKIt items
• The JS is debugged using the Safari web inspector
• there is a bridge between the native and JS code

My first thoughts on doing React Native on Apple TV would be to basically have the same code as on iOS. I'd be very nervous that all the elements would work differently. Apple sees it very different than iOS because user are not actually touching them. It's focus based. What I'd be worried about with that approach is that it doesn't fit in with the rest of the apps. There are strong patterns in place.

So it feels like there is something about these TVML components and well-worn templates.

Maybe in JSX it should be a top level <TVML> component with mapped TVML components within it. There would be little to do as the OS already knows how to render that template. It's all one "view."

Maybe. I'm not sure. But I think there's something interesting there.

[boffbowsh]

For info, there's an attempt at TVML bindings here https://github.com/ramitos/react-tvml.

I've been trying to use it myself, but I'm a total newcomer to React. But I have done some raw TVML. The issues are that a lot of "normal" React relies on window and document global variables being available, which isn't the case in the TVML environment. So that might be fixed/helped by https://github.com/facebook/react/issues/3213.

[brentvatne]

As far as I know, nobody on the React Native team will be working on this any time in the next six months, probably more, so I'm going to close this. If you think this is very important and the react-tvml repo mentioned above is the wrong approach and you think it needs to be built into React Native, then please upvote and comment on this issue with some reasons why: https://productpains.com/post/react-native/react-native-for-tvos/ :)

[deanmcpherson]

I know this is closed, but at the moment TVML looks like a dead end. The templates are very restrictive, and the DOM implementation looks only half baked for truly dynamic apps. @braunsquared did you get much further with your implementation?

[braunsquared]

I did not. When the Facebook team closed the ticket it became clear to me that since the changes required to support a new platform are so extensive a fork would be impossible to maintain and the work would never be merged back into the root project.

On Feb 10, 2016, at 5:00 PM, Dean McPherson [email protected] wrote:

I know this is closed, but at the moment TVML looks like a dead end. The templates are very restrictive, and the DOM implementation looks only half baked for truly dynamic apps. @braunsquared did you get much further with your implementation?

—
Reply to this email directly or view it on GitHub.

[deanmcpherson]

Fair call. Guess I'll learn swift :)

[faceyspacey]

This is much needed. It's an obvious progression that has to happen. Looking at it any other way is absurd. There's more than enough overlap in similar tools provided by the underlying Apple platforms. It's basically expected. React Native is absolutely killing it on iOS. It's been absolutely beautiful for me to work with. So when the React Native team at Facebook eventually get the time, this must become a major priority. If there's any way to expedite that, we should figure it out.

_Also_, the time is now to make a splash in the Apple TV space. Facebook has billions of dollars--I don't see why they can't hire more developers. I don't get what the problem is. The open source community leads itself--Facebook barely has to train these developers. They come self-trained and know exactly what to do and what needs to be done, especially when it comes to open source projects. So I don't get @brentvatne's comments about not being able to make any progress on this in the next 6 months. Some reasons why Facebook can't just hire more developers would clarify that. I'll work on it. Hire me. Hire the contributors above.

I love the absolute steady pace of these React Native releases. It is incredible. It's clear the core developers behind it truly recognize the value they are delivering. There's just a whole ton of value here, that it doesn't make sense not to put as much resources behind it as absolutely possible. There's always mention here on Github regarding the react native issues backlog and how there are too many that they gotta heavily triage. Meanwhile Facebook's playing around with Occulus Rift, but React Native is a development platform that can eat the world _today_! Put $2 billion dollars behind React Native and it will be better spent than playing in the VR/AR wars. It's a guaranteed win.

@brentvatne what's holding Facebook back from building a bigger react native team? It can't be the money--is it coordination?? What about somebody at Facebook lobby for a little $20 million dollar React Native TVOS fund, eh? I'm sure with that money we could figure out as a community how to get something going for Apple TV. _Point being:_ if it's bureaucracy holding this back, that's lame. If it's the complexity of organizing multiple projects, sharing similar moving target codebases, that's totally fine. Anything else I would deem unacceptable. But it doesn't mean there isn't a way to figure that out. As it is, you can build incredible full-featured iOS apps with the latest React Native. If not another release was made, I personally could do serious damage for myself and startups for years. So, let's build off .23 and address issues like focusing etc, and get something solid, that even if it only works off .23 for 6 months is still highly useable. Then when all teams have time, we get up to speed with React Native .42 or whatever they have at the time.

[jondwillis]

The focus engine isn't so different from touch, really.

TVML is inappropriately restrictive for many app experiences that Apple never envisioned. Many of which have been featured in the store by none other than Apple itself.

[douglowder]

I have React Native fully operational on Apple TV, with support for the focus engine, focus animations, and changes to allow code using TouchableHighlight or TouchableOpacity to work with few or no changes. https://github.com/douglowder/react-native-appletv/blob/master/README-appletv.md

[deanmcpherson]

What a champion. Will check it out.

[deanmcpherson]

Hey @douglowder, do you have some tips to get this up and running on a new project? In particular, how to set up the TV specific xcode project?

[deanmcpherson]

Never mind, I copied one of the examples. Looking good! I had to remove NetworkOverlay from the InspectorPanel to get the app to load, but other than that it appears to be working well. Tested out the focus engine and support for things like LayoutAnimation. Is this going to stay separate as fork to RN? Would be good to put in its own repo if it's going to stay separate, so we can submit issues / PRs.
Update
Was just missing the RCTNetworkTV library.

[douglowder]

@deanmcpherson My plan is to ask FB to merge this to the main repo, once all the issues are resolved. In the meantime, please let me know if you find any TV-specific problems with the code....

[zhihuikeji]

I think Android TV also need focus engine

[stan229]

@deanmcpherson do you happen to have a blank (init-bootstrap) app using @douglowder 's fork? I'm trying to copy one of the examplses, but am also trying to pull it out as a standalone xcode project.

[deanmcpherson]

@stan229 There is this: https://github.com/deanmcpherson/react-native-tvos-example

[stan229]

@deanmcpherson Thanks. Unfortunately my Apple TV simulator is not showing up in the simulators list when I open the townskeTVtv project (even though tvOS is set as the architecture). The simulator does show up when I try to open one of the example projects included in the fork.

[rikukissa]

I spent last night trying to run @deanmcpherson's example project in Apple TV simulator and for some reason it wasn't as straightforward as the readme suggests. Anyways, I managed to run it eventually and decided to write this short tutorial on how I did it, since it took me a couple of hours to figure it out.

https://gist.github.com/rikukissa/7f141a2b497f1bdae1cf0d7eb4f4765e

[douglowder]

@stan229 @deanmcpherson @rikukissa I've added Apple TV support for initial project generation using react-native-cli. The generated project folder now has a TV xcode project in the generated ios subfolder. To make this work, you'll need to clone my repo (https://github.com/douglowder/react-native-appletv) and follow the steps for using it with a local npm registry (https://www.npmjs.com/package/react-native-cli).

[stan229]

@douglowder followed your steps but I'm not seeing the tvOS Simulator when I open the TV-suffixed xcode project. I see "My Mac" as the option for my app. There's another project option with the same name and that gives me a Generic tvOS Device Option, but no Simulator. Only the React library is giving me a simulator option.

[stan229]

Looks like I didn't have a tvOS 9.3 simulator (and that was the deployment target). Once I changed it to 9.2, all good! Thanks @douglowder

[naoufal]

@stan229 @douglowder do your projects run on tvOS 10? I'm seeing "cannot find mutex" errors on build. Any ideas?

[dlowder-salesforce]

Yes they should run fine on tvOS 10. I'm using Xcode 8 for my local builds and haven't seen any issues. I just updated my repo yesterday... please try pulling the latest and see if it works.

Good news is, I've already started sending pull requests to Facebook, so all this functionality should be available in the main repo very soon. The first two PRs are already committed. See https://github.com/facebook/react-native/commit/d368ebfab2c389cc093f6a73e5c1021408cc6a73 and https://github.com/facebook/react-native/commit/86229983359f1b80817bfb6b15d1a154b75b1917 .

[naoufal]

@douglowder @dlowder-salesforce Yeah, I'm on Xcode 8 as well and I've pulled the latest master commit 91760c.

and when running the UIExplorerTV project I get the following error:

No such file or directory: '~/dev/react-native-appletv/Libraries/Network/RCTNetworking.m'

[douglowder]

Ok I'll have a look later today.

[dlowder-salesforce]

This is fixed now -- updated the tvOS project files in my repo. FYI: When all of my changes are eventually merged to facebook/react-native, these special tvOS project files are going away. If you look at the regular iOS project files now, you will see that they already have tvOS targets.

[naoufal]

@douglowder thanks. I ended up using the changes you've merged into master. any tips for pulling out the developer menu?

[dlowder-salesforce]

Just type command-D in the simulator, the dev menu should come up and be navigable with the arrow keys.

[fungilation]

Does WebView work currently on tvOS? Assuming that's allowed by Apple's app approval, possibly with local, sanitized, tv screen formatted HTML instead of unformatted HTML from the wild wild web.

[naoufal]

@fungilation tvOS doesn't support WebViews at the moment.

[fungilation]

It does, unofficially. Hence my comment about Apple possibly allowing if we present TV screen formatted HTML in WebView that looks native?

[douglowder]

The web view may render, but it won't support Siri Remote input properly, and it won't pass App Store review....

[naoufal]

@fungilation I misread your comment, sorry about that!

[michaelknoch]

i recently discovered tvOs specific code in react-native. Are there any plans for official appletv support, by now?

https://github.com/facebook/react-native/blob/77b8c097277b5cf248d08e772ea8bb8d8583e9a1/Examples/UIExplorer/js/UIExplorerExampleList.js#L105

[apgl]

Currently investigating different opportunities for building a tvOS application. Does anyone know if an app build with react native will be accepted into the App Store?
Thanks.

[naoufal]

@apgl shouldn't be a problem. I have a React Native TV app in the App Store.

[TrevorSayre]

@naoufal Are you open to sharing which app? It would be helpful for pitching this as a project to be able to point at an existing app in the App Store.

[naoufal]

@TrevorSayre it's Unsplash for Apple TV. More about it here. https://medium.com/unsplash-unfiltered/introducing-unsplash-for-apple-tv-50228252af44?source=linkShare-fac695f6bd9b-1493820756

[dlowder-salesforce]

For those of you building RN apps for Apple TV, I'd recommend 0.43 or later. Everything is now merged to Facebook repo. I wrote some docs here: http://facebook.github.io/react-native/releases/next/docs/building-for-apple-tv.html

[Kaidash]

What about supporting Android TV focus engine? I can't find info about it.

[dlowder-salesforce]

@Kaidash please see #16500

[euroclydon37]

I've hit a hiccup that I can't seem to find an answer to with Menu Button functionality. I've read that an app will get rejected if the menu button doesn't exit to home screen (at least when your app is at its own internal home screen), but I can't seem to make that happen. BackHandler.exitApp() doesn't work. And having no listeners at all does nothing.

Is RN intercepting the event by default?

[dlowder-salesforce]

@euroclydon37 : Yes RN is intercepting the event. RN needs to do that in order for the BackHandler to work. FYI: recent versions of tvOS now exit to home screen whenever the user does a long press on the menu button, and application code can't override that behavior. So I'm not sure if exit on menu tap is still an App Store requirement. Please create an issue and I'll investigate to see if I can come up with a generic way of dealing with this problem.