React Native & Apple TV today
I always check the notes for every release made in React Native. The other day I was amazed by the announcement of an interesting feature in v0.36.0-rc.0: support for Apple TV.
I started by looking at the commits (made by dlowder-salesforce), and I found that the UIExplorer sample project already has support for it but wasn’t working because of a problem with the Status Bar, which I assume is because there isn’t a Status Bar.
After analyzing the changes made to the project plus reading some tickets reported in github about the topic, I was able to find the necessary steps to enable Apple TV.
Okay, now without any further ado, here are the steps to add support for Apple TV to a new React Native project. I’ll try to be as detailed as possible in my steps:
- Create a new project
react-native init apple_tv_example - Use the release candidate in package.json, by replacing the react-native version (in my case was ^0.35.0) with:
git://github.com/facebook/react-native.git#v0.36.0-rc.0
Note: This will be optional in the future because it will be part of a release. - Install the changes made to the package, by running
npm i
Note: You’ll receive an UNMET PEER DEPENDENCY error - that’s okay. To verify that the package was properly installed, looks for references to TARGET_OS_TV in files under node_modules/react-native, there should be plenty. - Add a tvOS application to the project, by going to “File > New > Target” on xCode and selecting “tvOS > Application > Single View Application”.
- Link all tvOS libraries to the your new target by pressing “+” in Linked Frameworks and Libraries. There, search in Workspace for all libraries containing “tvOS” and Add them.
- Add support for ObjC and LC++, by adding
$(inherited) -ObjC -lc++
to “Other Linker Flags” under “Build Settings”.
- Delete all the files and folders inside the folder created for the new target, but leave Info.plist.
- Edit Info.plist by removing Main storyboard file base name (given that we won’t use any storyboards) and by adding App Transport Security Settings (copy it from the iPhone’s target Info.plist file) to allow the use of localhost.
- Add all the files belonging to the iPhone target to the TV target. For that, select AppDelegate.m and then select the TV target in the Utilities side bar. Repeat the process for main.m (and all the files that belong to your iPhone target).
Note: Ignore xib files, those are not supported on TV.
- Finally, select your new target and press Play.
- Done!
You may find some errors using an existing project given that some components are not supported on TV, for instance Status Bar and Notifications.
You can find the source code containing the result of these steps at https://github.com/7ynk3r/apple_tv_example.
I hope you have a lot of fun!
