CODEWITHSUNDEEP
react-nativetext-align
Tysseer
Tysseer

Reputation: 41

react native text justify and center

In react native we have textAlign property with the options to either "justify" (and the last line will follow default text direction) or "center" (where the text is centered but lines are not justified) I want to know if there is a way to combine both (i.e. center the text and also have the lines start and end uniformly)?

Edit: Here is the code import React from "react"; import { StyleSheet, Text, View, ScrollView, StatusBar } from "react-native";

export default function App() {
 return (
  <View style={styles.background}>
  <View style={styles.pageContainer}>
    <ScrollView
      contentContainerStyle={{
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Text style={styles.arabicText}>
        هنا ستكون الآيات (1) هنا ستكون الآيات (1) هنا ستكون الآيات (1) هنا
        ستكون الآيات (1) هنا ستكون الآيات (1) هنا ستكون الآيات (1) هنا ستكون
        الآيات (1) هنا ستكون الآيات (1) هنا ستكون الآيات (1) هنا ستكون
        الآيات (1) هنا ستكون الآيات (1) هنا ستكون الآيات (1) هنا ستكون
        الآيات (1) هنا ستكون الآيات (1) هنا ستكون الآيات (1) هنا ستكون
        الآيات (1) هنا ستكون الآيات (1) هنا ستكون الآيات (1) هنا ستكون
        الآيات (1) هنا ستكون الآيات (1)
        </Text>
       </ScrollView>
     </View>
    </View>
  );
 }

  const styles = StyleSheet.create({
  background: {
  flex: 1,
  justifyContent: "space-evenly",
  alignItems: "center",
  backgroundColor: "white",
  },
  pageContainer: {
  alignItems: "center",
  width: "100%",
  flex: 1,
  backgroundColor: "#FFFAF1",
},
 arabicText: {
 direction: "rtl",
 marginRight: 8,
 marginLeft: 8,
 marginTop: 5,
 marginBottom: 5,
 flexDirection: "row",
 textAlign: "justify",
 fontSize: 26,
  padding: 2,
  },
});

Upvotes: 1

Views: 1235

Answers (1)

Bisma Azher
Bisma Azher

Reputation: 749

Yes you can put your Text tag inside View tag and give your View alignItems:'center' property

 <View style={{ alignItems: 'center' }}>
    <Text style={{ textAlign: 'justify' }}>
         Enter your text here
    </Text>
 </View>

Upvotes: 0

Related Questions