Developer Console

Get started with React Native for Fire OS

Anisha Malde Aug 13, 2024
Share:
How to
Blog_Header_Post_Img

If you are already working with React Native, you can easily target Amazon Fire OS devices without learning a new tech stack or maintaining separate codebases. The Expo framework provides an easy and fast development experience β€” covered in this guide for how to get up and running with React Native for apps on both Fire TVs and tablets. 

βœ… Pre-requisites for this guide

Before getting started, install the following:

  • Node.js: The JavaScript runtime environment
  • npm or Yarn: Package managers for JavaScript
  • Android Studio: the IDE used to compile and run your Fire OS apps locally

Configure Android Studio and its command-line tools:

  1. Follow this guide to set your ANDROID_HOME environment variable
  2. Install the following emulators from Android Studio’s virtual device manager:

For tablet:

Android Studio emulator for Fire tablet

For TV: 

Android Studio emulator for TV

πŸ“± Building for Fire tablets

In the terminal, create a new React Native project with the expo package installed:

Copied to clipboard
npx create-expo-app FireTabletDemo --template blank

Running on Fire tablet emulator

List the available avds then launch the Android Tablet:

Copied to clipboard
emulator -list-avds
emulator -avd name-of-your-tablet-emulator

Navigate to the project directory (e.g. FireTabletDemo) and run the app using npx:

Copied to clipboard
cd FireTabletDemo
npx expo start -a
Fire tablet emulator

Your app is now running on the emulator using a local development server and Expo Go without having to create the Android build.
 

Running on a physical tablet device

Follow these instructions for connecting to Fire tablet through Android Debug Bridge (ADB). Afterwards, confirm it is available as a device:

Copied to clipboard
adb devices -l
Connect to Fire tablet through ADB code

Navigate to the project directory then run a development build on your target device (e.g. KFTRWI)

Copied to clipboard
cd FireTabletDemo
npx expo run:android -d [deviceName]

The development build will now install within the Android directory:

Android Studio emulator for Fire tablet
Connecting to Fire tablet through ADB

πŸ“Ί Building for Fire TVs

Building for Fire TVs is a similar process as tablets. In a new directory, create a new React Native project with the expo, this time using the with-tv example:

Copied to clipboard
npx create-expo-app FireTVDemo -e with-tv

Running on Fire TV emulator

Launch the Android TV emulator:

Copied to clipboard
emulator -avd name-of-your-tv-emulator

Navigate to the project directory and run your app:

Copied to clipboard
cd FireTVDemo
npx expo start -a

Similar to the Fire tablets, your app will run on the avd emulator without having to create the Android build:

Fire TV emulator

Target the build for TVs

In order to build for TVs, set the isTV prop to true in your app.json:

Copied to clipboard
{
  "expo": {
    "plugins": [
      [
        "@react-native-tvos/config-tv",
        {
          "isTV": true,
        }
      ]
    ],
    "name": "FireTVDemo",
    "slug": "FireTVDemo"
  }
}

Running your project on a Fire TV device

Follow these instructions for connecting to Fire TV through Android Debug Bridge (ADB). Afterwards, confirm it is available as a device:

Copied to clipboard
adb devices -l
Connect to Fire TV through ADB code

Navigate to the project directory then run a development build on your target device (e.g. -d AFTSS)

Copied to clipboard
cd FireTVDemo
npx expo run:android -d [deviceName]

You now have the development build installed on your device:

Fire TV emulator

πŸ’‘ You can verify your Android builds are optimized for TV by checking that your app is using the Android leanback features in the Android manifest file.

Conclusion

Congratulations on building your first React Native app for Fire OS! Check out these additional resources for building for Amazon devices with React Native:

 

Related articles

Sign up for our newsletter

Stay up to date with the latest Amazon Developer news, industry trends and blog posts.