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

👍

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

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 🤘

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: tadeuzagallo/react-native@d5bce33...jordanbyron:tvOS

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

[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

[ghost]

@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?

[douglowder]

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 d368ebf and 8622998 .

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

[ghost]

Ok I'll have a look later today.

[douglowder]

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?

[douglowder]

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?

[ghost]

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?

react-native/Examples/UIExplorer/js/UIExplorerExampleList.js

Line 105 in 77b8c09

(!Platform.isTVOS || example.supportsTVOS);

[ghost]

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

[douglowder]

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.

[douglowder]

@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?

[douglowder]

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