Rotate transform not working well on View with borderRadius

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

<div> </div>

^ 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; (https://github.com/facebook/react-native/commit/30044fd531c22c4c5e8f1ede206fa7c2c3fd3aa8?)
• rotate + borderRadius > 0 + borderWidth > 0 bug 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

[tominou]

Im not sure whether it is an Android or React Native issue, but here is what is working using RN 0.59.8: Android 21 - Fine Android 22 - Fine Android 23 - Fine Android 24 - Not working Android 25 - Not working Android 26 - Not working Android 27 - Not working Android 28 - Not working Android Q - Fine

[johnyoonh]

Still seeing this in 0.57 on Android. iOS works fine as originally noted.