react native как вставить один компонент в другой

В коде моего приложения есть fetch запрос к серверу, от туда получаю массив данных и вставляю их в компонент, но потом когда я пытаюсь их вставить в основную разметку у меня ничего не получается. Я в комментариях описал то что не смог сделать.

Код:

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

    //Переменная буферизации объявлений
    var buf = ''

    //Создаю промис
    let download = new Promise(function(resolve, reject){
      resolve(
        //делаю запросс к серверу
        fetch('https://mechanic-app.ru/page-catalog', {
          method: 'POST',
          headers: {
            'Content-type': 'application/json'
          },
          body: JSON.stringify({
            name: 'sergei'
          })
        })
        .then(res => res.json())
        .then(
          data => {
            //Замеряю размер полученного массива
            let count = data.length
            count--
            console.log(count)

            //В цикле делаю вставки в компонент и буферизую 
            for (var i = 1; i <= count; i++) {
                buf = buf + " \
                  <TouchableOpacity onPress={() => navigation.navigate('product_card')}> \
                    <View style={styles.productWrap}> \
                        <Text style={styles.productName} numberOfLines={2}>" + data[i]['name_product'] + "</Text> \
                    </View> \
                  </TouchableOpacity> \
                "
            }
        })
      )
    })

    /* 
      Я питаюсь вернуть результат, но ничего не получается, более того я не знаю что делать с новыми данными,
      попытался засунут всё это в state, но и там ошибка, прошу помочь, что со всем этим добром делать, как 
      мне вставить новые компоненты в другие компоненты
    */
    download.then(function(){
      return buf
    })

    //Ничего не выводит
    console.log(buf)


    export default class Screen extends React.Component {
        render() {
            return (
                <View style={styles.container}>
                    <Swiper>
                        <View style={[styles.slideContainer]}>
                            СЮДА НУЖНО ВСТАВИТЬ НОВЫЕ КОМПОНЕНТЫ
                        </View>
                    </Swiper>
                </View>
            )
        }
    }

Мой вопрос заключается в том как реализовать вставку одного компонента в другой, я перешёл с веб-разработки в мобильную разработку, здесь я сталкиваюсь с проблемами постоянно, те методы которые есть в js для веб, нет в react native, прошу направить меня на правильный путь, дать материалы или ссылки на нужную мне тему, потому как я не понимаю что мне изучать для решения моей проблемы.(Буду благодарён если поправите код до рабочего состояния)