How to align text to right in react-native

How to align text to right in react native

Hi guys, In this article, we are going to learn about How to align text to right in react-native, Align View component and Align Text component is different because style props are different for View and a Text component. React-native provide Text style props which are textAlign let’s see with an example so that you will get a better understanding we are going to display two Text component on-screen and first is left-aligned by default and second is right align

1. Create a new project

Create a new project using the following command.

2. Import the following components

3. Start with UI design

I have placed two Text components horizontally by adding flexDirection row to parent View component as you can see in below code, then create a different stylesheet for Text and with textAlign to right and flex: 1 to right text component and  flex: 1 is important in this situation, so I have added inline style props textAlign to right props, and added a background color just for understanding of views and components

Add above code in your return method in render and check stylesheet below

4. textAlign props

There are some other textAlign style props properties available as follows:

  • left:  Used to align the text component to the left-hand side.
  • right: align text to the right-hand side (make sure to add flex: 1).
  • center: It align text component to the center (make sure to add flex: 1).
  • auto: It align text automatically.
  • justify: only supports in iOS.

5. Full source code

6. Output

How to align text to right in react-native using textAlign

Thank you 🙂

Leave a Reply

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