Skip to content

Android: Border radius renders in a blurred / choppy way in 0.51.0 #17267

@dannycochran

Description

@dannycochran

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 6.11.4
Yarn: Not Found
npm: 3.10.10
Watchman: 4.9.0
Xcode: Xcode 8.3.3 Build version 8E3004b
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.0.0-beta.5 => 16.0.0-beta.5
react-native: 0.53.0 => 0.53.0

Target Platform: Android (22)

Steps to Reproduce

Create a simple view:

export default class App extends Component {
  render() {
    return (
      <View style={styles.background}>
        <View style={styles.container}>
          <Text>Welcome to React Native!</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  background: {
    backgroundColor: 'purple',
    flex: 1
  },
  container: {
    position: 'absolute',
    left: 100,
    top: 100,
    width: 200,
    height: 100,
    backgroundColor: 'orange',
    borderWidth: 2,
    borderColor: 'orange',
    borderRadius: 50,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Expected Behavior

I would expect that the border does not render in a strange and pixelated way. Previously in react-native 0.49.5, the exact same code would render like so:

screen shot 2017-12-18 at 5 16 14 pm

Actual Behavior

In react-native 0.53.0, that same code renders this blurry border:

screen shot 2017-12-18 at 5 15 54 pm

Reproducible Demo

The code snippet above compiles and should be sufficient to reproduce this problem.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Impact: RegressionDescribes a behavior that used to work on a prior release, but stopped working recently.Platform: AndroidAndroid applications.Ran CommandsOne of our bots successfully processed a command.Resolution: LockedThis issue was locked by the bot.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions