react / react/react-native

Rotate transform not working well on View with borderRadius

Ouverte
#18,266 41 commentaires 27 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Impact: Regression Issue: Author Provided Repro Platform: Android Ran Commands Resolution: Fixed
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
SCREENSHOT GIF

^ 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:

Possibly related:

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. 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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.