React-native: Rotating View appears jagged

[chris9753]

Description

Rotating view with border appears to be jagged (confirmed on iOS). No external libraries where used.
Animated.View has jagged edges when being rotated. Does not happen when translated.
Occurs with or without border or shadow being set.

React Native version:

System: OS: macOS 10.15.2 CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz Memory: 5.16 GB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node Yarn: 1.13.0 - /usr/local/bin/yarn npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/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: 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 7, 8, 9 Build Tools: 19.1.0, 20.0.0, 21.1.2, 22.0.1, 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3 System Images: a...-tv | Android TV ARM EABI v7a System..., a... | Android TV Intel x86 Atom Syst..., a...ult | ARM EABI v7a, a...-21 | Intel x86 Atom, a... | Intel x86 Atom_64, a...pis | Google APIs ARM EABI v7a Syste..., a...google_apis | Google APIs Intel x86 Atom Sys..., a...gle_apis | Google APIs Intel x86 Atom_64 ..., a...-tv | Android TV ARM EABI v7a System..., a... | Android TV Intel x86 Atom Syst..., a...ear | Android Wear ARM EABI v7a Syst..., a...ndroid-wear | Android Wear Intel x86 Atom Sy..., a...ult | ARM EABI v7a, a...-23 | Intel x86 Atom, a... | Intel x86 Atom_64, a...pis | Google APIs ARM EABI v7a Syste..., a...google_apis | Google APIs Intel x86 Atom Sys..., a...gle_apis | Google APIs Intel x86 Atom_64 ..., a... | Android TV Intel x86 Atom Syst..., a...ndroid-wear | Android Wear Intel x86 Atom Sy..., a...gle_apis | Google APIs Intel x86 Atom_64 ..., a...s_playstore | Google Play Intel x86 Atom Sys..., a... | Android TV Intel x86 Atom Syst..., a...google_apis | Google APIs Intel x86 Atom Sys..., a...s_playstore | Google Play Intel x86 Atom Sys... IDEs: Android Studio: 3.0 AI-171.4443003 Xcode: 11.3/11C29 - /usr/bin/xcodebuild npmPackages: @react-native-community/cli: 2.9.0 => 2.9.0 react: 16.9.0 => 16.9.0 react-native: 0.61.2 => 0.61.2

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Create an Animated.View
2. Apply a rotation animation to the animated view

Expected Results

You will see jagged edges on the Animated View

[chris9753]

SOLUTION: Simply, add the shouldRasterizeIOS prop to Animated View

[cuddeford]

@chris9753 Thanks! I've been trying to figure this out for a long time