Add Rounded Corners Border to Text Component in React Native iOS Android

The borderRadius style attribute dose not apply directly on Text component, So in this tutorial we would apply Add Rounded Corners Border to Text Component in React Native both iOS Android applications using View. We would wrap the Text component inside a Child View and gave the borderRadius to Child View and Put the Text inside the Child View.

Contents in this project Add Rounded Corners Border to Text Component in React Native iOS Android App:

1. Import View, StyleSheet and Text component in your project.

2. Create a Root View in render’s return block. This View is used as Parent.

3. Create another Child View in Root View. The child view is used as container for Text component. We would give the rounded border to this view and put the Text inside this view.

4. Create Style for Root View, Child View and Text component.

5. Complete source code for App.js File :

Screenshot in Android device :

Screenshot in iOS device :

Text component

Leave a Reply

Your email address will not be published. Required fields are marked *