Can't format Quran page in react native

Question

I am making an app to read Quran, using react native (expo). I am having some problems formatting the text.

Problems:

• Random spacing
• Text resize automatically
• Text aligns on the left side at the end.

Here is my code:

function Read(){
    return (
    <SafeAreaView style={styles.container}>
      <HeaderSurahScreen navigation={navigation} route={route} />
      <Divider
        orientation="vertical"
        width={5}
        style={{ borderBottomColor: "#545353" }}
      />

      {/* create a logic here to display tranlition or arabic */}
      <ScrollView style={styles.scroll}>
        <Text style={styles.surahPage} adjustsFontSizeToFit>
          {surah &&
            surah.map((ayat, index) => (
              <Text key={index} allowFontScaling={false} selectable={true}>
                <Text selectable={true} style={styles.ayat}>
                  {ayat.text}
                </Text>
                <Text style={styles.number}>{toArabic(ayat.id)}&#1757;</Text>
              </Text>
            ))}
        </Text>
      </ScrollView>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: DEFAULT_BACKGROUND_COLOR_THEME,
  },
  scroll: {
    flex: 1,
    padding: 7,
  },
  surahPage: {
    flex: 1,
    marginTop: 15,
    textAlign: "justify",
  },

  ayat: {
    flex: 1,
    fontFamily: ARABIC_FONT,
    color: DEFAULT_COLOR_THEME,
    fontSize: 30,
  },

  number: {
    fontSize: 18,
    color: DEFAULT_COLOR_THEME,
  },
});

Screenshots(3):

The result I am looking for:

Answer 1

To make the text align in your text, you need to use justify to make all the lines have the same length, but also you need to add one attribute direction to make the justification to the right side.

direction: "rtl";
textAlign: "justify"

You may want to have a look at this: http://jsfiddle.net/aew75/

Unfortunately, I fear I know no way of fixing the problem of the spaces between words coming from justify. There is no way to expand the letters size and width as in the mushaf. This can be a revolutionary idea of arabic fonts usage on the web and dispalys in general. Maybe give it a shot and have other muslim / arab developers contribute :)

Answer 2

justify will do the job (except the last line) ,i think this what you are asking for

To solve this you should import I18nManager library from react-native,then:

In useEffect write this line :

I18nManager.forceRTL(true);

considering big spaces between words , i used to manage it as possible in styling the text like this :

    letterSpacing: -3

change -3 to any other values below 0 ,this will narrow spaces between words as possible

that worked for me