Rotate transform not working well on View with borderRadius

[brunolemos]

When rotating a component, its children also rotate as expected, except for the Views with borderRadius > 0, which their rounded border does not rotate.

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 8.9.0
Yarn: 1.5.1
npm: 5.7.1
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: ^0.54.0 => 0.54.0

Expected Behavior

Borders should rotate like everything else.

Actual Behavior

^ The one from the right has overflow: hidden on the main photo container, so things got worse. We actually can notice it's not just the border, but the actual view mask / clip bounds that's not rotating.

Steps to Reproduce

[ANDROID] https://snack.expo.io/@brunolemos/react-native---border-radius-rotate-bug

Full Code

import React, { Component } from 'react';
import { Image, Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
 render() {
 return (
 <View style={styles.container}>
 <View style={styles.block}>
 <View style={styles.textContainer}>
 <Text>SQUARE</Text>
 <Image
 source={require('./assets/logo_facebook_square.png')}
 style={styles.image}
 />
 </View>
 <View style={[styles.textContainer, { borderRadius: 10 }]}>
 <Text>ROUND</Text>
 <Image
 source={require('./assets/logo_facebook_square.png')}
 style={[styles.image, { borderRadius: 10 }]}
 />
 </View>
 </View>

 <View style={[styles.block, { transform: [{ rotate: '-10deg' }] }]}>
 <View style={styles.textContainer}>
 <Text>SQUARE</Text>
 <Image
 source={require('./assets/logo_facebook_square.png')}
 style={styles.image}
 />
 </View>
 <View style={[styles.textContainer, { borderRadius: 10 }]}>
 <Text>ROUND</Text>
 <Image
 source={require('./assets/logo_facebook_square.png')}
 style={[styles.image, { borderRadius: 10 }]}
 />
 </View>
 </View>
 </View>
 );
 }
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 alignItems: 'center',
 justifyContent: 'center',
 paddingTop: Constants.statusBarHeight,
 backgroundColor: '#ecf0f1',
 },
 block: {
 justifyContent: 'center',
 alignItems: 'center',
 marginBottom: 60,
 width: 200,
 height: 200,
 backgroundColor: 'white',
 },
 textContainer: {
 flexDirection: 'row',
 justifyContent: 'center',
 alignItems: 'center',
 margin: 10,
 padding: 10,
 borderWidth: 2,
 borderColor: 'red',
 },
 image: {
 width: 40,
 height: 40,
 borderWidth: 4,
 borderColor: 'green',
 },
});

Investigating + Related

After more investigation this is what I found:

• Everything works fine on react-native 0.49.5;
• rotate + borderRadius > 0 + overflow:hidden bug introduced on 0.50.0; (30044fd?)
• rotate + borderRadius > 0 + borderWidth > 0 bug introduced on 0.51.0; (4994d6a?)
• Bug still present on 0.54.0.

Possibly related:

• Commit 30044fd (v0.50; cc @AaaChiuuu)
• Commit 4994d6a (0.51; cc @RSNara)
• Issue Border not scaling on Android 7.0 #18208: Border not scaling on Android 7.0
• Issue Non zero borderRadius brakes transform on Android #17400: Non zero borderRadius brakes transform on Android
• Issue Border not animating with scale #17224: Border not animating with scale in 0.51.0
• Issue [Android] Overflow does not work and is inconsistent with iOS #17074: Overflow does not work and is inconsistent with iOS, [Android] overflow visible doesn't work #6802

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest stable release?

Thank you for your contributions.

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

[adeelraza]

+1

I can reproduce this on the latest stable release.

[zachkirsch]

+1

[LauR3y]

+1

[zachkirsch]

I was able to solve this from removing overflow: “hidden” from the Views’ style (on Android). I had been using it to clip the corners of my container View so that the border radius applied to the entire component, but instead I now just have the border radius style on every View in my component.

[Symyon]

I have a similar issue, latest RN (0.54) and no overflow: “hidden” used.
Was hopping the new release will cure that, but it seems it's not the case.

[jacksmith3888]

0.55.2 the same
works fine on ios