Styling issues when switching to react-native-tvOS

Description

We are currently using (and cannot upgrade beyond) RN 0.63.4. When we switch to the corresponding react-native-tvOS version (0.63.4-0) we have styling issues on Android (specifically Fire TV) that are blocking our progress in the project. There are two main issues:

1. Buttons do not have a correct background colour
2. Images (using react-native-fast-image) do not size correctly

React Native version:

System: OS: macOS 11.5.2 CPU: (8) x64 Intel® Core™ i7-8569U CPU @ 2.80GHz Memory: 51.58 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 15.10.0 - ~/.nvm/versions/node/v15.10.0/bin/node Yarn: 1.22.11 - ~/.nvm/versions/node/v15.10.0/bin/yarn npm: 7.6.3 - ~/.nvm/versions/node/v15.10.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0 Android SDK: API Levels: 28, 29, 30 Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3 System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-30 | Android TV Intel x86 Atom, android-30 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.1 AI-201.8743.12.41.7042882 Xcode: 13.0/13A233 - /usr/bin/xcodebuild Languages: Java: 1.8.0_282 - /usr/bin/javac Python: 3.7.3 - /Users/eyevinn/.pyenv/shims/python npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: Not Found react-native-macos: Not Found react-native-tvos: 0.63.4-0 npmGlobalPackages: react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Build and run the project https://github.com/royaloperahouse/stream-tv-app
2. Change to react-native 0.63.4 from react-native-tvos 0.63.4-0
3. rm -rf node-modules and yarn
4. ./gradlew clean and yarn run android
5. Build and run the project
6. Compare results of 1 and 5!

NB: The app requires certain other permissions, but the background styling issue can be sign on the startup page at least - on the ‘get started’ button

Expected Results

Expect both versions to be visually identical on Android (Amazon Fire) TV

Snack, code example, screenshot, or link to a repository:

https://github.com/royaloperahouse/stream-tv-app

We would very much appreciate a suggestion as to where we could start looking to solve this…Thanks!

[etiennelab]

@sinewave440hz I didn’t really investigate more on this FastImage styling issue unfortunately… I just found that setting zIndex was fixing it.

[douglowder]

@sinewave440hz glad you fixed it!

It seemed to me that the button on the intro screen responded to presses, regardless of whether it was TouchableHighlight or TouchableOpacity…

I’m curious why you can’t upgrade beyond 0.63.4. I recently did work to make the upgrade tool in @react-native-community/cli work for projects created with this repo. The upgrade script actually seemed to work for your repo, and the project built and ran for both Apple TV and Android TV.