Navigate back to the homepage

Text align in react native

Infinitbility
Style, Text
May 1st, 2021 · 1 min read
Text align in react native

Hi Devs’,

Welcome to infinitbility,

This article help you to understand textAlign props in react native. you wil get multiple posiable example of textAlign props to change effect in react native.

Let’s start today topic Text align in react native Or how to align text in react native

Table of contents

  1. textAlign Props
  2. textAlign left
  3. textAlign center
  4. textAlign right
  5. textAlign justify

textAlign Props

textAlign use for align text in react native like left, right, etc.

Here props of textAlign

Specifies text alignment. On Android, the value ‘justify’ is only supported on Oreo (8.0) or above (API level >= 26). The value will fallback to left on lower Android versions.

TypeDefault
enum(`auto`, `left`, `right`, `center`, `justify`)`auto`

textAlign left

textAlign left align all text in left side of screen like below example.

textAlignLeft.js

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4const LotsOfStyles = () => {
5 return (
6 <View style={styles.textContainer}>
7 <Text style={[styles.text, {fontSize: 50, fontWaight: "900"}]}>Infinitbility</Text>
8 <Text style={styles.text}>We have the ability to build infinite way for us.</Text>
9 </View>
10 );
11};
12
13const styles = StyleSheet.create({
14 textContainer: {
15 flex: 1,
16
17 },
18 text: {
19 fontSize: 30,
20 textAlign: 'left',
21 }
22});
23
24export default LotsOfStyles;

Output

textAlign Left

textAlign center

textAlign center align all text in center of screen like below example.

textAlignCenter.js

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4const LotsOfStyles = () => {
5 return (
6 <View style={styles.textContainer}>
7 <Text style={[styles.text, {fontSize: 50, fontWaight: "900"}]}>Infinitbility</Text>
8 <Text style={styles.text}>We have the ability to build infinite way for us.</Text>
9 </View>
10 );
11};
12
13const styles = StyleSheet.create({
14 textContainer: {
15 flex: 1,
16
17 },
18 text: {
19 fontSize: 30,
20 textAlign: 'center',
21 }
22});
23
24export default LotsOfStyles;

Output

textAlign center

textAlign right

textAlign right align all text in right of screen like below example.

textAlignRight.js

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4const LotsOfStyles = () => {
5 return (
6 <View style={styles.textContainer}>
7 <Text style={[styles.text, {fontSize: 50, fontWaight: "900"}]}>Infinitbility</Text>
8 <Text style={styles.text}>We have the ability to build infinite way for us.</Text>
9 </View>
10 );
11};
12
13const styles = StyleSheet.create({
14 textContainer: {
15 flex: 1,
16
17 },
18 text: {
19 fontSize: 30,
20 textAlign: 'right',
21 }
22});
23
24export default LotsOfStyles;

Output

textAlign right

textAlign justify

textAlign justify add space between every sententance like below example.

textAlignJustify.js

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4const LotsOfStyles = () => {
5 return (
6 <View style={styles.textContainer}>
7 <Text style={[styles.text, {fontSize: 50, fontWaight: "900"}]}>Infinitbility</Text>
8 <Text style={styles.text}>We have the ability to build infinite way for us.</Text>
9 </View>
10 );
11};
12
13const styles = StyleSheet.create({
14 textContainer: {
15 flex: 1,
16
17 },
18 text: {
19 fontSize: 30,
20 textAlign: 'justify',
21 }
22});
23
24export default LotsOfStyles;

Output

textAlign justify

Thanks For Reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

More articles from Infinitbility

fontStyle in react native

fontStyle in react native

React Native Tutorial - how do make italic text in react native

April 30th, 2021 · 1 min read
React Native ScrollView

React Native ScrollView

React Native Tutorial - React Native ScrollView

February 10th, 2021 · 1 min read
© 2021 Infinitbility
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]