react-native: Possible RN 0.61 Android view regressions

After upgrading from 0.60.5 to 0.61.1, I’m seeing some funky visual behaviors with Android which might be directly related to #26289, but I don’t know enough about them to say for sure. For example, look at the difference in the buttons from react-native-paper@2.16.0 in the first screenshot below. Another example is my swipe deck component based on Animated.View. In Android now the swipe cards which have solid white backgrounds are somehow merging visually (second screenshot below). That is to say, all text and icon elements of both the top card and the underlying card are visible simultaneously.

Note: all screenshots are from a Samsung Galaxy S7 Edge. These behaviors did NOT occur for me in the Android emulator.

React Native version: System: OS: macOS Mojave 10.14.6 CPU: (4) x64 Intel® Core™ i5-4278U CPU @ 2.60GHz Memory: 19.70 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.10.3 - ~/.nvm/versions/node/v8.11.4/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0 Android SDK: API Levels: 28, 29 Build Tools: 28.0.3, 29.0.2 System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom IDEs: Android Studio: 3.4 AI-183.6156.11.34.5692245 Xcode: 11.0/11A420a - /usr/bin/xcodebuild npmPackages: react: 16.9.0 => 16.9.0 react-native: 0.61.1 => 0.61.1 npmGlobalPackages: react-native-cli: 2.0.1 react-native: 0.61.0

Steps To Reproduce

Connect an Android device (Does it have to be a Samsung Galaxy S7 Edge? I don’t know)
react-native init oldbutton --version 0.60.6; cd oldbutton
yarn add react-native-vector-icons react-native-paper
Edit App.js to add a button somewhere with this code:

import { Button } from 'react-native-paper';
<Button dark color="#aaaaff" mode="contained" onPress={() => {}}>Test Button</Button>

react-native run-android and observe the button’s visual behavior before/while touching
cd ..; react-native init newbutton; cd newbutton
Repeat steps 3-5

Describe what you expected to happen:

I expected the views not to change so significantly between versions. See the third screenshot below. I used a lighter color on the button so you can see that even unpressed, the button has changed visually (odd dark outline), but the difference is more significant while pressing.

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

Note: all screenshots are from a Samsung Galaxy S7 Edge. These behaviors did NOT occur for me in the Android emulator.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 29 (11 by maintainers)

Most upvoted comments

Seems to be related to #26544

mikebouwmans on Sep 25, 2019

Just want to note that this issue isn’t entirely new to RN 0.61 - I don’t have a repro immediately on hand, but I’ve noticed in previous versions of RN that if an element has both borderRadius and backgroundColor, and is very, very large, the backgroundColor disappears.

EDIT: here’s a repro (try it on Android, and it takes at least 11 or 12 clicks): https://snack.expo.io/HyHS1Tkur

The repro case above should have problems at least as far back as 0.56, if I remember right

jeremy-deutsch on Sep 30, 2019

It depends what the problem is. If react-native core had a breaking change to behavior that we didn’t expect to have this result then it should probably be fixed in core because it is more widespread than just one library. If it is caused by something fishy being done in react-native-paper, then I’d expect it to be fixed in react-native-paper.

If you can get a repro that doesn’t require paper, or able to track down a commit in the core that caused this, that would help it get addressed in core.

TheSavior on Sep 25, 2019

@lafiosca I think I have the same issue with your second screenshot. The backgroundColor can not be rendered correctly. See below:

On React Native 0.61 Screenshot_2019-09-29-09-19-33-312_app cybrook teamlink

On React Native 0.60 Screenshot_2019-09-29-09-19-58-649_app cybrook teamlink

I tried to remove the Animated.View but backgroundColor is still not working. I am trying to give a example to reproduce it.

Update: I remove the borderRadius on the Component that I have set backgroundColor then I get the below screenshot: Screenshot_2019-09-29-09-55-07-465_app cybrook teamlink

tianjyan on Sep 29, 2019

I am also seeing very strange visual artifacts on certain components on Android after 0.61.x

I am also experiencing massive levels of inconsistency between reloads and / or fast refreshes as @lafiosca identifies above.

All of my probems only exist when there is a border radius applied to something - two examples:

Previously working border radius on a view over an icon

{
  backgroundColor: 'white',
  borderColor: primary,
  borderWidth: 1, 
}

{
  backgroundColor: 'white',
  borderColor: primary,
  borderWidth: 1, 
  borderRadius: 0,
}

Previously working border radius on a set of navigation tabs

{
  backgroundColor: white,
  borderTopLeftRadius: 15,
  borderTopRightRadius: 15,
}

{
  backgroundColor: white,
}

I will try and pull this behavior out into an example repo over the weekend.

iamacup on Sep 27, 2019

Reproduction: https://github.com/mjmasn/ElevationIssue60 (working) https://github.com/mjmasn/ElevationIssue61 (broken)

mjmasn on Sep 27, 2019

I wonder if this issue isn’t a duplicate of https://github.com/facebook/react-native/issues/26544, according to the screenshots.

Would be awesome if OP could confirm.

Also, @ferranp and @satya164, do you think this could be related to any potential business logic that lives inside Paper?

grabbou on Sep 26, 2019

It could be happening only with specific versions of android. In my case it renders fine on API 28 but on API 23 it renders with this issue.

@lafiosca it looks like your emulator is running API 28. Try to boot another emulator running API 23

greis on Sep 26, 2019

Something making this a lot more difficult and time-consuming: I’m seeing inconsistent rendering results on the Android device after doing a manual shake&reload (even with Fast Refresh disabled). That is to say: I’ll have a piece of code that seems to be rendering wrong, but then if I kill the app and run react-native run-android again, it becomes fine.

To phrase it another way: working from a non-minimal bad sample, pruning out bits of code and doing a manual reload may show the same bad behavior even though killing and restarting does not. This makes it confusing and tough to track down the minimal sample quickly.

lafiosca on Sep 25, 2019

@TheSavior I am currently trying to work up a minimal example of the overlapping views problem. I’ll update here when I have something.

lafiosca on Sep 25, 2019

I think https://github.com/facebook/react-native/issues/26544 is a duplicate of https://github.com/facebook/react-native/issues/26289 (or at least strongly related), and this would appear to be too. The only one I’m not sure about is the card as it doesn’t look like that has any elevation shadow to begin with.

@lafiosca is it fixed by adding TouchableNativeFeedback.SelectableBackgroundBorderless = () => null; to index.js?

mjmasn on Sep 25, 2019