CODEWITHSUNDEEP
reactjsreact-native
Dave A.
Dave A.

Reputation: 1

React Native trying to create a border for text

I'm trying to create a "box" for a text - meaning a bounding box with border & background color for a text (in my case, a single character).
But when I create a view & text, the text is being cut by the upper bound of the view (look how the A is cut), and I cannot understand why.
My current situation

    <View style={styles.container}>
 <Text style={styles.letter} > {character} </Text>
 </View >

export default EStyleSheet.create({
  container: {
    justifyContent: 'center', 
    alignItems: 'center',

  },
  letter: {
    fontSize: 30,
    backgroundColor: 'powderblue',
    borderWidth: 2,
    textAlign: 'center',
    borderColor: 'steelblue',
  },
});

Thanks for the help.

Upvotes: 0

Views: 151

Answers (4)

Vijay Kahar
Vijay Kahar

Reputation: 1076

Please try to add padding as i did in below code : 

  container: {
    justifyContent: 'center', 
    alignItems: 'center',

  },
  letter: {
    fontSize: 30,
    backgroundColor: 'powderblue',
    borderWidth: 2,
    textAlign: 'center',
    borderColor: 'steelblue',
    padding: 10,
  },
});

Upvotes: 0

Eduardo Schork
Eduardo Schork

Reputation: 175

Try to add margin style to letter and aligSelf: 'center', but actually I'd recommend adding backgroundColor and borderWidth to <View> styles

Upvotes: 1

mediaguru
mediaguru

Reputation: 1917

Remove the border styles from the text and add them to the view.

https://snack.expo.io/HJAihyR9B

Upvotes: 0

Rohit Prasad
Rohit Prasad

Reputation: 291

Try adding flex: 1 inside style of the view.

Upvotes: 0

Related Questions