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
- textAlign Props
- textAlign left
- textAlign center
- textAlign right
- 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.
Type | Default |
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';34const 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};1213const styles = StyleSheet.create({14 textContainer: {15 flex: 1,1617 },18 text: {19 fontSize: 30,20 textAlign: 'left',21 }22});2324export default LotsOfStyles;
Output

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';34const 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};1213const styles = StyleSheet.create({14 textContainer: {15 flex: 1,1617 },18 text: {19 fontSize: 30,20 textAlign: 'center',21 }22});2324export default LotsOfStyles;
Output

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';34const 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};1213const styles = StyleSheet.create({14 textContainer: {15 flex: 1,1617 },18 text: {19 fontSize: 30,20 textAlign: 'right',21 }22});2324export default LotsOfStyles;
Output

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';34const 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};1213const styles = StyleSheet.create({14 textContainer: {15 flex: 1,1617 },18 text: {19 fontSize: 30,20 textAlign: 'justify',21 }22});2324export default LotsOfStyles;
Output

Thanks For Reading…