React-native: Border not animating with scale

[wassgha]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 8.5.0
Yarn: 1.1.0
npm: 5.3.0
Watchman: 4.9.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: ^0.51.0 => 0.51.0

Target Platform: Android (26+)

Steps to Reproduce

After upgrading to react-native 0.51.0, a component that used to be animated (scales up and down based on scroll) and that has a border (with border-radius too) no longer animates. The component itself still scales (verified by adding a background) but the borders don't. Since there has been a lot of work on borders in 0.51.0 I am assuming this has to do with that.

Steps

1. Create a component using Animated.View that has styles including a border. In my case this is

    borderRadius: 88 / 2,
    width: 88,
    height: 88,
    borderWidth: 4,
    borderColor: 'rgba(0, 0, 0, 0.8)'

and add an animated variable as its transform: [{scale: ...}].

1. Make sure you are using react-native 0.51.0
2. Every aspect of the component will scale as the animated value changes, except for borders

Expected Behavior

Prior to upgrading to 0.51.0 the borders used to scale

Actual Behavior

Reproducible Demo

https://snack.expo.io/Sk6o8ZWMG

(Works on Appetize but not on actual phone)

[wassgha]

Pinging @rsnara and @AaaChiuuu

[beeirl]

same for me! any updates on this?

[zachgibson]

@wassgha I ran the snack and it was a different app example. Where is the snack for the GIF you posted?

[wassgha]

@zachgibson the snack is an isolated version of the bug that occurs inside the beta of our app (which you can see in the gif). I can invite you to the beta if you'd like but the effect is the same. The difference is that the animated value in our app is controlled by scroll rather than time.

[arma7x]

Same for me. Temporary downgrade to rn 0.49 works perfectly

[uribro]

this was broken in 0.51.0 downgrade to 0.50.0 works.

[nadavoran]

Still broken in 0.52.2!

[aahz]

Still broken for 0.53.0

Now using hack with react-native-svg.Circle to get around the problem, may be this will help someone

Suppose ART library will help too

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[hssrrw]

The bug is still reproduced in 0.53.0. Does anyone have an idea how this could be possibly fixed?

[MLWDev]

This is still an issue, just upgraded from 0.50 where it was working. Can this be reopened?

[hramos]

Reopening as this was introduced in 0.48 and is still present as of 0.54

[VinceBT]

Any progress on this issue ?

[RSNara]

Hey @wassgha!

I tried to reproduce this issue on v0.50.0, v0.51.0, and v0.55.0 of React Native, but wasn't able to. I v0.51.0 and v0.55.0 to reproduce the problem, and v0.50.0 to work fine. To attempt reproduction, I built React Native directly from the Github repository and plugged your code into RNTester.

When the above setup didn't work, I used expo to run your snack on my S8, but still had no luck.

I also created a new project using create-react-native-app, and changed the react-native version to 0.51 by making the following changes to package.json:

  "dependencies": {
    "expo": "^24.0.0",
    "react": "16.3.1",
    "react-native": "~0.51.0"
  }

Changes made to app.json:

{
  "expo": {
    "sdkVersion": "24.0.0"
  }
}

With a brand new project running react native v0.51.0, I couldn't reproduce the problem.

Observed Behaviour: What I see is a pulsating black circle surrounded by a red border, which I expect is the correct behaviour.

It could be that I'm making a mistake somewhere. Does this problem still reproduce for you?

[wassgha]

Seems to have been fixed (for me at least), @VinceBT maybe?

[VinceBT]

@wassgha Which version are you using ?

[RSNara]

@hramos, is this issue still a problem?

[nadavoran]

I didn't upgrade to 0.55 but I could still see the issue on 0.53.
When I run my app on large Android phones (like the pixel) everything seems to be ok, but when I run it on a smaller device like Samsung s7 the issue reproduces

[hramos]

If you're not using 0.56, no need to comment saying it still happens on an older release. Can someone verify if this still occurs on 0.56.0-rc? The RC should have the fixes from master that @rsnara already verified as working.

[Fsarmento]

I am still having this exact same issue on 0.56. it only happens when borderRadius is set to a value bigger than 0.

react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0

I made a simple example on expo snack here. Scan the QR code with an Android 7.0 phone to reproduce the bug.

[nicollecastrog]

@hramos I'm having this same issue on 0.56. It's worth noting that other issues around static elements with borders using borderRadius being blurred in Android were in fact fixed here, so the upgrade to RN 0.56 fixes that. My static round buttons, for example, look crisp now.

The issue that remains is when you try to animate an element that uses borderRadius (whether it's got borders or not): the edges are pixelated. In my case I'm trying to animate a circle with some background colour from small to large, in a "screen takeover":

Device info:
Google Pixel, API 27, Android 8.1

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.