[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.

[thabti]

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 notifications@github.com 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.

[ghost]

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.

[ghost]

@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