From JS to Fire OS: React Native for Amazon Devices
Tags: reactnative, beginners, react, learning
Published: 2024-07-17 10:12:49

React Native enables developers to build native apps for Amazon Fire OS devices using their existing JavaScript and React skills. Since Fire OS is based on the Android Open Source Project (AOSP), if you are already working with React Native you can easily target our devices without learning a new tech stack or maintaining separate codebases.

We recommend using the Expo framework to build React Native apps as it enables an easier and faster development experience. Follow along to see how to get up and running with React Native for both Fire Tablets and Fire TVs.

## ✅ Pre-requisites for this guide

Install the following:

- [Node.js](https://nodejs.org/en/download/package-manager): The JavaScript runtime environment
- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) or [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/): Package managers for JavaScript
- [Android Studio](https://docs.expo.dev/get-started/set-up-your-environment/?platform=android&device=physical&mode=development-build&buildEnv=local#set-up-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](https://developer.android.com/tools/variables) to set your `ANDROID_HOME` environment variable 
2. Install the following emulators from [Android Studio’s virtual device manager](https://developer.android.com/studio/run/managing-avds):

| For Tablet:  | For TV: |
| --------- |:---------:|
| ![tablet avd](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a72b5691v6hnp6vg6w4t.png) | ![tv avd](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrpf0wbk6wu40ew47dzu.png) |

## 📱 Building for Fire Tablets 

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

```sh
npx create-expo-app FireTabletDemo --template blank
```

### Running on Fire Tablet Emulator

List the available [avds](https://developer.android.com/studio/run/managing-avds) then launch the Android Tablet:

```sh
emulator -list-avds
emulator -avd name-of-your-tablet-emulator
```

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

```sh
cd FireTabletDemo
npx expo start -a 
```

![Tablet emulator demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8zkx2l2fb4x13au86tq.png)

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 the instructions [here](https://developer.amazon.com/docs/fire-tablets/connecting-adb-to-device.html) to connect your tablet via adb. Afterwards, confirm it is available as a device:

```sh
adb devices -l
```

![adb devices result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nw7tnph1tcpdokbqkec.png)
Navigate to the project directory then run a development build on your target device (e.g.  KFTRWI)

```sh
cd FireTabletDemo
npx expo run:android -d [deviceName]
```
The development build will now install within the android directory: 

![Tablet android build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mlxxj6vq52qowzufzv4.png)

![Tablet development build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcblxp9rnr7xd4g71d5o.gif)

## 📺 Building for Fire TVs

To build apps for Fire TVs with React Native you can follow a similar journey.

In a new directory, create a new React Native project with the expo, this time using the with-tv example:

```sh
npx create-expo-app FireTVDemo -e with-tv
```

### Running on Android TV Emulator

Launch the Android TV emulator:

```sh
emulator -avd name-of-your-tv-emulator
```

Navigate to the project directory and run your app:

```sh
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:

![TV emulator build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8rum0b84lvd5myqhe5jj.png)

### Target the build for TVs:

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

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

### Running your project on a Fire TV device

To connect your Fire TV, follow the instructions [here](https://developer.amazon.com/docs/fire-tablets/connecting-adb-to-device.html) then check that your device is connected using adb:

```sh
adb devices -l
```

![adb devices result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xm9d4phufm77lhxt92q.png)

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

```sh
cd FireTVDemo
npx expo run:android -d [deviceName]
```

You now have the development build installed on your device:

![TV device build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8knzsfmqu3swt1t90r5v.gif)

💡 You can verify your android builds are optimized for TV by checking that your app is using the [Android leanback features](https://developer.android.com/training/tv/get-started/create#leanback-req) in the Android manifest file.

## Next steps

Congratulations on building your first React Native app for Amazon Fire Devices! To continue your learning journey you can:

* Sign up for an [Amazon Developer account](https://developer.amazon.com/)
* Join the [Amazon Developer community](https://community.amazondeveloper.com/)
* Integrate [Amazon APIs](https://dev.to/amazonappdev/react-native-iap-one-package-to-rule-them-all-4f0n) in your app