Как управлять компонентами вне функции рендеринга?

Question

Я создаю приложение Mushaf для Корана. Я сделал все, но сталкиваюсь с некоторыми проблемами и нуждаюсь в помощи. Функция рендеринга Я не смогу управлять стилем текста, пока внутри функции рендеринга он идет как список, а не как текст книги (я имею в виду построчно). Итак, как это сделать внутри функции рендеринга, чтобы я мог управлять ее стилем, и если я добавлю все свои logi c внутри самой функции, я получаю эту ошибку Cannot Add a child that doesn't have a YogaNode to a parent with out a measure function

Вторая Я использую навигацию по номеру страницы в списке сур, а затем о том, как упростить изменение списка сур путем перемещения или даже с некоторой легкостью строки, чтобы пользователь мог свободно перемещаться по страницам

Третий Я не могу сделать текст полностью выровненным на странице

import React, {useState, useEffect} from 'react';
import {View, 
        Text, 
        StyleSheet, 
        TouchableOpacity, 
        ImageBackground, 
        Dimensions,
        Image
    } from 'react-native';
import QuranApi from '../API/QuranApi';
import {Audio} from 'expo-av';
import Uthmani from '../Fonts/Uthmani';
import { ArabicNumbers } from 'react-native-arabic-numbers';

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
const QuranShowScreen = ({navigation}) => {
    const [quran, setQuran] = useState([]);
    const page = navigation.getParam('page');
    const name = navigation.getParam('name');

   useEffect(() => {
     Quran();
   }, []);
    const sound = new Audio.Sound();


    const Quran = async () => {
        const response = await QuranApi.get(`/${page}/quran-uthmani`);
        setQuran(response.data.data.ayahs);
   }

      const text =  quran.map((t) => {

        return (
            <Text
            onPress = {async () => {
                await sound.loadAsync({
                    uri : `https://cdn.alquran.cloud/media/audio/ayah/ar.alafasy/${t.number}`
                });
                await sound.playAsync();
               }}
               onLongPress = {async () => {
                await sound.unloadAsync();
               }}
                key = {t.text}
            >
            {
                t.text.includes(`بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ`) ? 

                `
                 بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ                       
${t.text.replace('بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ', '')}` : `${t.text.replace('بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ', '')} ﴿${ArabicNumbers(t.numberInSurah)}﴾ `
            }
             </Text>
        )
    })


    return (
        <View style = {{marginHorizontal : 25}}>
        <View style = {styles.container}>        
        <Uthmani text = {text} />

        </View>
        </View>

    );
}



const styles = StyleSheet.create({
    container : {
        marginTop : 15,    
        marginHorizontal : 15,
        flex : 1,
        alignContent : 'center'
    },


     textStyle : {
 fontFamily : 'Uthmani',
          fontSize : 21,
          textAlign : 'justify',
          alignSelf : 'center',
          lineHeight :
        }
    });



export default QuranShowScreen;