How to Kick Start a TV App With React Native

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

1. A basic introduction of react-native-tvos
2. Which version of react-native-tvos you should use
3. 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

react-native init DummyTVApp --version=react-native@npm:react-native-tvos@latest

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.

npm install

After that navigate to ios folder and install all the ios dependencies using the following command.

cd ios/
pod install

Now we are ready to run this app on TV

Remember:

I have seen much documentation where command react-native init TestApp --template=react-native-tvos@latest was 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:react-native-tvos@0.63.4-0" (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

For iOS

1. Open your project with Xcode and select .xcworkspace file

2. Select TV app as target and also select the TV emulator from top left box as shown in the screenshot

3. Now simply click on the play button and run this app on an emulator

For Android

1. For android process is quite simple, simply open tv emulator
2. 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