Navigate back to the homepage

How to justify text in react native

Infinitbility
React Native
August 15th, 2021 · 1 min read
How to justify text in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will be help you to make text justify in your react native application. Here you will get textAlign justify example and if not working then alternative solution.

React Native provide textAlign style to make to make text justify but it’s works in iOS, and android 8.0 ( Oreo ) or above (API level >= 26).

The value will fallback to left on lower Android versions.

If you want to go with this then we have provide example for you.

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

Text align in react native complete tutorial and every posiable examples

https://infinitbility.com/react-native/text-align-in-react-native

WebView the alternative solution

Well, if want to make text justify in each and every devices then we have option of react native web view.

https://github.com/react-native-webview/react-native-webview

1<View style={{flex: 1}}>
2 <WebView
3 source={{ html: "<p style='text-align: justify;'>We have the ability to build infinite way for us.</p>" }}
4 />
5</View>

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]

Tutorials

React Native

Categories

More articles from Infinitbility

How to get value from textinput in react native

How to get value from textinput in react native

React Native Textinput get value Example

August 13th, 2021 · 1 min read
How to force render in react native

How to force render in react native

React Native force render Example

August 12th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
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]