Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unwanted offset when using Rotate + borderRadius on a view #22215

Closed
3 tasks done
hisztendahl opened this issue Nov 8, 2018 · 2 comments
Closed
3 tasks done

Unwanted offset when using Rotate + borderRadius on a view #22215

hisztendahl opened this issue Nov 8, 2018 · 2 comments
Labels
Bug Component: View Platform: Android Android applications. Platform: Linux Building on Linux. Priority: Low Resolution: Locked This issue was locked by the bot.

Comments

@hisztendahl
Copy link

hisztendahl commented Nov 8, 2018

Environment

React Native Environment Info:
System:
OS: Linux 4.8 Ubuntu 16.10 (Yakkety Yak)
CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
Memory: 1.90 GB / 7.65 GB
Shell: 5.2 - /bin/zsh
Binaries:
Node: 8.3.0 - ~/.nvm/versions/node/v8.3.0/bin/node
Yarn: 1.10.1 - ~/.yarn/bin/yarn
npm: 5.3.0 - ~/.nvm/versions/node/v8.3.0/bin/npm
npmPackages:
react: 16.5.0 => 16.5.0
react-native: https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz => 0.57.1
npmGlobalPackages:
react-native-cli: 2.0.1
react-native: 0.57.4

I was developing with Expo SDK29 (based on react-native 0.55.4), and the issue happened only on Android 7 and higher. This is fine on iOS and Android < 7

Tried updating Expo to SDK 31 (based on react-native 0.57), and the behavior is still the same

Description

When using borderRadius + transform-rotate on a view, it is offset, as if the rotation was not based off the center of the view.
Issue only occurs when using both borderRadius and transform[{rotate: "xdeg"}], if using only one or the other, it behaves as expected.

Related to #19637
Related to #18266

Reproducible Demo

https://snack.expo.io/@justgox/react-native---border-radius-rotate-bug
I included three different views to illustrate variations of borderRadius and transform

@cpojer
Copy link
Contributor

cpojer commented Apr 2, 2019

You are right, this seems like this is a real issue but unfortunately it's unlikely anyone will be able to spend time on this anytime soon. I'm going to close this issue but we are more than happy to receive a pull request with a fix for this!

@TPXP
Copy link

TPXP commented Jan 2, 2020

Hello!
I'm facing a similar issue, and even if "it's unlikely anyone will be able to spend time on this anytime soon", I believe this issue wasn't fixed (at least it's unclear if it was).
Perhaps it can be reopened so it's easier to find and gets some visibility ? Looking at the number of 👍 emojis on the original report, it seems the issue affects some people.

@facebook facebook locked as resolved and limited conversation to collaborators Apr 2, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Apr 2, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: View Platform: Android Android applications. Platform: Linux Building on Linux. Priority: Low Resolution: Locked This issue was locked by the bot.
Projects
None yet
6 participants