CODEWITHSUNDEEP
react-native
Molly Harper
Molly Harper

Reputation: 2453

React Native add border to text

I want to add a border around my Text component. I've done the following, however I only want the border around the text, not the full width of the View.

<View style={{borderWidth: 1}}/>
  <Text>A DIFFERENT EXPERIENCE</Text>
</View>

enter image description here

Is this possible?

Upvotes: 1

Views: 5615

Answers (1)

Codesingh
Codesingh

Reputation: 3384

Yes it is possible for that you need to wrap it in another view like this:

   <View style={styles.container}>
        <View style={styles.inner}>
  <Text>A DIFFERENT EXPERIENCE</Text>
        </View>
      </View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderWidth:4
  },
  inner:{
  borderWidth:4

  }

Cheers:)

Upvotes: 3

Related Questions