Rotate transform not working well on View with borderRadius
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- C++
- Estrellas
- 127k
- Forks
- 25.3k
- Merge medio
- 1 d 23 h
- PR fusionados (30 d)
- 4
Descripción
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
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Reproduce el caso de Android del Expo Snack enlazado y, después, lee los commits referenciados y las issues relacionadas #18208, #17400, #17224 y #17074 para localizar las rutas nativas de borders y clipping; aquí no se nombra ningún archivo de código fuente ni ninguna prueba. Se considera terminado cuando las Views rotadas conservan sus borders redondeados y el clipping de overflow, incluidos los casos con borderWidth.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- android, react-native
- Área
- mobile
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100