Rotate transform not working well on View with borderRadius
Personne n'a encore pris cette issue.
- Langage dominant
- C++
- Étoiles
- 127k
- Forks
- 25.3k
- Merge moyen
- 1 j 23 h
- PR mergées (30 j)
- 4
Description
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
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Reproduisez le cas Android du Expo Snack lié, puis consultez les commits référencés et les issues associées #18208, #17400, #17224 et #17074 afin de localiser les chemins natifs de border et de clipping ; aucun fichier source ni test n’est nommé ici. C’est terminé lorsque les Views pivotées conservent leurs borders arrondis et le clipping de l’overflow, y compris dans les cas avec borderWidth.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- android, react-native
- Domaine
- mobile
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100