Scaling issues between tvOS and Android TV

[ryanvanderpol]

I understand that this repository seems to be for tvOS and may not be the right place to report issues about Android TV, although if that's the case, then I have no clue where to actually go for those issues. I'm actually a little frustrated by the TV support for RN because I thought React Native was supposed to automatically support all iOS/Android platforms without creating separate projects, but there seems to be a lot of fragmentation with TV platforms.

Description

When running an app created with this repo on Apple TV (tvOS) everything looks fine. However, when running the same app on Android TV / Fire TV nothing fits within the viewport; it looks like it's zoomed way in (see screenshots below).

I reported this issue several years ago before TV support was spun off from the core React Native project. Original issue is here: Android TV / tvOS scaling display inconsistency.

Back then, I just created a completely separate project for Android, but I'm updating the app I built back then and am trying to get both tvOS and Android TV working off of the same code, instead of having to rewrite two apps.

When running, I can tell (via Dimensions.get('window')) that the screen dimensions are different:

• Apple TV = 1920 x 1080
• Fire TV = ~960 x 540

If this is not a bug, then how are React Native developers supposed to handle this? It seems like the options are:

1. Create two different apps, one for each platform.
2. Create separate StyleSheets to change component dimensions and font sizes depending on what device it's running on.
3. Maybe there is some way to auto scale the viewport on Android TV?

What is the recommended approach for this?

Environment

Amazon Fire TV Stick (Fire OS 5.2.6.3 / Android 5.1.1 Lollipop - 1080p @ 60Hz)
Apple TV (4th gen - tvOS 11.4 - 1080p @ 60Hz)

$ react-native info
info Fetching system and libraries information...
System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Memory: 1.49 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 23, 27, 28, 29
      Build Tools: 23.0.1, 27.0.3, 28.0.3, 29.0.2, 29.0.3
      System Images: android-23 | Android TV Intel x86 Atom
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native-tvos:  0.61.5-0 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Packages:

  "dependencies": {
    "@react-native-community/async-storage": "^1.8.1",
    "lodash": "^4.17.15",
    "react": "16.9.0",
    "react-native": "npm:react-native-tvos@0.61.5-0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "7.8.7",
    "@babel/runtime": "7.8.7",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.4",
    "react-test-renderer": "16.9.0"
  },

Steps to Reproduce

Build and deploy any app to Apple TV and Fire TV Stick.

Expected Behavior

Both devices, when running at the same resolution (1080p @ 60Hz) should display the same.

Actual Behavior

On the Apple TV, everything looks perfect, but on the Fire TV Stick it looks like everything is super zoomed in and squished.

Apple TV:

Android TV / Fire TV:

[douglowder]

The issue is that because of the pixel density difference, you will need to pivot your font sizes and heights/widths between the two platforms.

Probably the easiest way to fix this is to define a scale constant in a component that all parts of your app can refer to. This is also needed when writing an app that has to work on both iOS and tvOS, where you need much bigger fonts for TV.

Try something like

import { Platform } from 'react-native';

const scale = Platform.OS === 'ios' ? 2.0 : 1.0;

export default scale;

and multiply all your heights, widths, fontSizes, etc., by the scale factor.

[henninghall]

Related discussions:
How do I handle scaling issues in a React Native app between tvOS and Android TV?