Repository: react-native
Issue: Rotate transform not working well on View with borderRadius
Labels: Ran Commands,Issue: Author Provided Repro,Impact: Regression,Platform: Android,Resolution: Fixed

When rotating a component, its children also rotate as expected, except for the `View`s 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>
<img width="300" alt="SCREENSHOT" src="https://user-images.githubusercontent.com/619186/37137472-9fcced60-2284-11e8-8ee5-7484d624366a.png">

<img width="300" alt="GIF" src="https://user-images.githubusercontent.com/619186/37137698-b6ee6130-2285-11e8-9bc0-bd91e6268518.gif" />
</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

<details>

<summary>Full Code</summary>

```jsx
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',
  },
});

```
</details>


### 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