Sometimes, we want to create a text border in React Native.

In this article, we’ll look at how to create a text border in React Native.

How to create a text border in React Native?

To create a text border in React Native, we can add a few styles.

For instance, we write:

import * as React from 'react';
import { View, Text } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={{ flex: 1, padding: 30 }}>
      <Text
        style={{
          borderWidth: 1,
          borderColor: 'thistle',
          borderRadius: 50,
        }}>
        hello
      </Text>
    </View>
  );
}

to add the borderWidth to 1 pixel.

borderColor sets the border color.

borderRadius sets the border corner radius.

Conclusion

To create a text border in React Native, we can add a few styles.