Description
When rotating a component, its children also rotate as expected, except for the View
s 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