How to create TV app project with react native tvos
Santosh Yadav , 23 January, 2021
Hello everyone I hope you all are fit and fine.
Today we’ll share one of the amazing experiences of our organization where we have explored the TV Apps development with react native. So I’m very excited to share these learnings with all of you.
When we decided to implement TV App with react native then the first problem we’ve faced is with the documentation, you will rarely found proper documentation for react-native TV apps, and most of the time you’ll be struggling with incomplete documentation and some old issues, so that’s our motivation to go share our learnings with you with all proper series of TV app development with react native.
In this post, we’ll cover the following
A basic introduction of react-native-tvos
Which version of react-native-tvos you should use
How to create a dummy project and run it on an emulator (Apple TV)
1. A basic introduction of react-native-tvos
React native has a separate repository for tv app which is react-native-tvos. This repository is originally forked from the core repository of react native, here they have added changes that are most specific to the android and iOS tv app, for example.
Navigation with tv remotes is quite complex as compared to mobile apps but in this repository, remote navigation is handled properly and even you can catch the events of all types of remote navigation events (top, down, left, right)
So if you are planning to build a tv app and want to utilize react-native for that then without wasting a single second just go for it
2. Which version of react-native you should use
Releases of react-native-tvos are based on the public release of react-native for example version 0.63.1-0 release will be derived from the 0.63.1 version of react-native. All releases of this repo will follow the 0.xx.x-y format where x represents a version of the base repo (react-native) and y represents additional changes on this repo.In our case, we have used the 0.63.1-1 version of it and luckily we were able to release our app on the app store, so you can also use the same version if you want. Our recommendation is to go with 0.60+ version so you’ll find less issues and you will also find auto linker support by react-native
3. How to create a dummy project and run it in an emulator
Okay, so now its time to create a dummy project with react-native-tvos, let's create TV app project with following command
This command will create a dummy project with react-native-tvos configurations. Now go to the root directory of the project and the following command to install all dependencies.
After that navigate to ios folder and install all the ios dependencies using the following command.
Now we are ready to run this app on TV
have seen much documentation where command react-native init TestApp --template=react-native-tvos@latestwas mentioned. Here is some problem with this command. When we use this command to create this project then it adds react-native as a dependency instead of react-native-tvos as you can see in the following screenshot
Due to this, it will lead to linker failed error in xcode
So to fix this error replace "react-native": "0.63.4" with "react-native": "npm:[email protected]" (use your relevant versions) then clear all node_modules and pod file and reinstall all of the files and now you’re good to go, compile and run the project error should be gone
Compile and run the app on Emulator
Open your project with Xcode and select .xcworkspace file
Select TV app as target and also select the TV emulator from top left box as shown in the screenshot
Now simply click on the play button and run this app on an emulator
For android process is quite simple, simply open tv emulator
Then run react-native run-android
Thankyou for reading this blog and please feel free to comment if you are facing any problem with this specific blog, we will respond you as soon as possible