CODEWITHSUNDEEP
reactjsreact-native
tHatpart
tHatpart

Reputation: 1136

how do I round corners in react native using borderRadius?

I just started learning react native, and for some reason borderRadius just isn't rounding the corners, everything else is working fine and I tried restarting expo and that still didn't work, here is the style sheet code:

const styles = StyleSheet.create({
  containter: {
      flex: 1,
      backgroundColor: "#000000",
      alignItems: "center",
      justifyContent: "center"
  },
  textStyle: {
    fontSize: 22,
    color: "#FFFFFF",
    backgroundColor: "orange",
    paddingHorizontal: 15,
    paddingVertical: 10,
    borderRadius: 10
  }
});

Anyone know what is going wrong?

Upvotes: 0

Views: 794

Answers (3)

Hamid Shoja
Hamid Shoja

Reputation: 4778

your styles is correct it seems you wrote container incorrectly: check it now , it works as well

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>      
        <Text style={styles.textStyle}>What a place</Text>     
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: "#000000",
      alignItems: "center",
      justifyContent: "center"
  },
  textStyle: {
    fontSize: 22,
    color: "#FFFFFF",
    backgroundColor: "orange",
    paddingHorizontal: 15,
    paddingVertical: 10,
    borderRadius: 20
  }
});

see : https://snack.expo.io/SJicm8rbU

Upvotes: 0

Gaurav Roy
Gaurav Roy

Reputation: 12195

Please check this link expo snack and this is my styling :

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';


export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
      <View style={styles.div2}>
        <Text>What a place</Text>
       </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  div2:{
height:100,width:200,backgroundColor:'red',borderRadius:20,
alignItems:'center'
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Upvotes: 0

Tom Shaw
Tom Shaw

Reputation: 1712

You can round the corners of the element wrapping the text.

const styles = StyleSheet.create({
  containter: {
    flex: 1,
    backgroundColor: "#000000",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "orange",
    borderRadius: 10
  },
  textStyle: {
    fontSize: 22,
    color: "#FFFFFF",
    paddingHorizontal: 15,
    paddingVertical: 10
  }
});

Upvotes: 1

Related Questions