CODEWITHSUNDEEP
react-native
Rich
Rich

Reputation: 5731

Border radius has weird edges - react native

When I style a TouchableOpacity like below, I get strange rendering in the iPhone 6 simulator. Any idea why?

Styles:

buttonContainer: {
  height: 50,
  borderColor: black,
  borderRadius: 25,
  margin: 2,
  justifyContent: 'center',
  backgroundColor: coral
}

Component:

<TouchableOpacity style={styles.buttonContainer}
  onPress={this.signIn}
>
  <Text style={styles.button}>Sign in</Text>
</TouchableOpacity>

enter image description here

Upvotes: 2

Views: 2854

Answers (2)

Rich
Rich

Reputation: 5731

Turns out the text had its own background color. Made it transparent and it fixed it.

Upvotes: 3

Radek Czemerys
Radek Czemerys

Reputation: 1108

Try adding overflow: hidden to your styles. Or try removing the margin.

Upvotes: 1

Related Questions