[FIXED] How to make a smooth transition or display a loader while loading a lot of locally stored static content in React Native?

Issue

I have a React Native screen with ScrollView displaying countries with their phone country codes.

const CountryCodes = () => {

import countries from "../../utils/countries";

 return (
    <ScrollView>
      {countries.map((country) => {
        return renderItem(country);
      })}
    </ScrollView>
  );
 };

the countries.js file is just an array of country data (c. 200 objects), together with require statements for the related assets, like this:

const countries = [{
    letterCode: "ad",
    phoneCode: "376",
    name: "Andorra",
    flag: require("../assets/flags/ad.png"),
  }]

I am using the Stack Navigator from React Navigation. The problem that I have is that when I am navigating to the CountryCodes screen, the screen is freezing (while, I assume, all the static flag images are loading) and after ~1 second it properly displays the ScrollView with all the countries.

Is there a way to make the transition smoother? I tried displaying a loader while the countries are loading, but the screen just keeps freezing with no chance to display anything in the meantime. This issue is the same when using FlatList.

Please see the GIF below for reference.

Solution

This lead me to a lot of frustration, but I managed to work out a sort of a hack to accomplish the goal with the use of setTimeout, like this:

onPress={() => {
  setLoading(true);
  setTimeout(() => {
    navigation.navigate("Select Country")
  }, 0);
}}

When wrapped like this, the setLoading is executed first (and a lading screen appears) and only after after that the navigation.navigate is called and the Select Country screen appears after all the data is loaded.

Answered By - Aleister Crowley
Answer Checked By - - Marilyn (ReactFix Volunteer)