How to Justify Text in React Native

Text alignment is an important aspect of app design as it affects the readability and aesthetic appeal of your app. In this blog post, let’s learn how to justify text easily in react native.

In React Native, you can easily control the alignment of your text using the textAlign style property on the Text component. In addition, you can use the justifyContent style prop on a container component, such as View, to justify the children elements within it.

See the example code given below.

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={{textAlign: 'justify', padding: 30}}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

You will get the following output.

That’s how you justify text in react native.