Rotate transform not working well on View with borderRadius
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- C++
- Sterne
- 127k
- Forks
- 25.3k
- Ø Merge
- 1 T. 23 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
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: hiddenon 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:hiddenbug introduced on 0.50.0; (https://github.com/facebook/react-native/commit/30044fd531c22c4c5e8f1ede206fa7c2c3fd3aa8?)rotate + borderRadius > 0 + borderWidth > 0bug introduced on 0.51.0; (https://github.com/facebook/react-native/commit/4994d6a389b4e41ba25e802edab5d3fdc9e8a4f1?)- Bug still present on 0.54.0.
Possibly related:
- Commit https://github.com/facebook/react-native/commit/30044fd531c22c4c5e8f1ede206fa7c2c3fd3aa8 (v0.50; cc @AaaChiuuu)
- Commit https://github.com/facebook/react-native/commit/4994d6a389b4e41ba25e802edab5d3fdc9e8a4f1 (0.51; cc @rsnara)
- Issue #18208: Border not scaling on Android 7.0
- Issue #17400: Non zero borderRadius brakes transform on Android
- Issue #17224: Border not animating with scale in 0.51.0
- Issue #17074: Overflow does not work and is inconsistent with iOS, #6802
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Reproduziere den Android-Fall aus dem verlinkten Expo Snack und lies anschließend die referenzierten Commits sowie die zugehörigen Issues #18208, #17400, #17224 und #17074, um die nativen Pfade für Borders und Clipping zu lokalisieren; hier wird keine Quelldatei und kein Test genannt. Erledigt ist die Aufgabe, wenn gedrehte Views ihre abgerundeten Borders und das Overflow-Clipping beibehalten, einschließlich Fällen mit borderWidth.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- android, react-native
- Bereich
- mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100