Загрузка изображений перед рендерингом()

Я использую RNFetchBlob для загрузки изображений, видео, логотипов и PDF-файлов. Если есть видео, использую видео, если видео нет, а фон есть, использую фон.

Пока мое приложение находится в моем Настройка.js, оно асинхронно загружает все активы и настраивает мое приложение.

Вот код, который я использую для сохранения своих активов в оконных/глобальных переменных, которые будут вызываться на всех экранах моего приложения.

let dirs = RNFetchBlob.fs.dirs;
RNFetchBlob.fs.ls(dirs.DocumentDir)
        .then( (files) => {
          for(var i = 0; i < files.length; i++) {
            let fileName = files[i].split('.');

            if (fileName[0] === 'background') {
              window.local_background = dirs.DocumentDir + '/' + files[i];
              continue;
            }

            if (fileName[0] === 'video') {
              window.local_video = dirs.DocumentDir + '/' + files[i];
              continue;
            }

            if (fileName[0] === 'logo') {
              window.local_logo = dirs.DocumentDir + '/' + files[i];
              continue;
            }
          }

          this.props.navigation.replace('Main');
        })

Когда я перемещаюсь между экранами с помощью реактивная навигация, я использую общий компонент <Image/>, где для источника установлено значение source = {{uri: window.local_background}}, но моя проблема заключается в том, что при переходе по экранам я вижу белую вспышку при переходе к новому экрану, которого еще нет в стеке. Как я могу ускорить/предварительно загрузить его, чтобы он не начинал загрузку после того, как весь другой контент уже отрендерен?

Есть ли лучший способ использовать глобальный фон в приложении?

Мой фон ИМЕЕТ исходит с сервера и не может храниться локально в сборке приложения.