Long loading time (splashscreen) in older devices

[wullig]

I’m having some issues with my app. Working on the iOS simulator I’ve never noticed loading problems since the loading it’s almost immediate. Today I released the app on the app store and tested it with different iphones. Older models seems to have a really slow loading, but I can’t find the reason. Once the splash screen disappear the app is super fast in all devices.

Iphone 13 - 4s
Iphone 11 - 6s
Iphone 7 - 18s

The app uses redux and react navigation, everything else are just fairly simple views. On the startup I download some remote JSON which is ~300KB, but the slow loading time is different in all devices, so I imagine is not a slow network issue.

Maybe I have some wrong configurations, but I am using the default one. What are some typical performance problems?

This is my app.json (removed some personal infos)

{
    "expo": {
      "name": " ",
      "slug": "",
      "privacy": "public",
      "platforms": [
        "ios",
        "android"
      ],
      "icon": "./assets/icon.png",
      "plugins": [
        [
          "expo-ads-admob",
          {
            "userTrackingPermission": "This identifier will be used to deliver personalized ads to you."
          }
        ]
      ],
      "version": "0.0.5",
      "orientation": "portrait",
      "splash": {
        "image": "./assets/splash_transparent.png",
        "resizeMode": "contain",
        "backgroundColor": "#212529"
      },
      "updates": {
        "fallbackToCacheTimeout": 0
      },
      "assetBundlePatterns": [
        "assets/*"
      ],
      "ios": {
        "bundleIdentifier": "example.com",
        "supportsTablet": true,
        "googleServicesFile": "./GoogleService-Info.plist",
        "buildNumber": "1.0.2",
        "icon": "./assets/icon_light_1024_darkbg.png",
        "config": {
          "googleMobileAdsAppId": "id"
        }
      },
      "android": {
        "package": "example.com",
        "googleServicesFile": "./google-services.json",
        "config": {
          "googleMobileAdsAppId": "id"
        },
        "versionCode": 5,
        "permissions": [],
        "adaptiveIcon": {
          "backgroundColor": "#212529",
          "foregroundImage": "./assets/icon_light_1024_test.png"
        },
        "icon": "./assets/icon_light_1024_darkbg.png"
      },
      "web": {
        "config": {
          "firebase": {
            "apiKey": "",
            "measurementId": "",
            "appId": "",
            "projectId": ""
          }
        }
      },
      "description": ""
    }
  }
  }

babel.config.js here, shoudln’t really matter

module.exports = function (api) {
	const babelEnv = api.env();

	api.cache(true);
	const plugins = [
		[
			"module-resolver",
			{
				root: ["./"],
				alias: {
					"@constants": "./constants",
					"@components": "./components",
					"@assets": "./assets",
					"@data": "./data",
					"@models": "./models",
					"@navigation": "./navigation",
					"@screens": "./screens",
					"@store": "./store",
					"@utils": "./utils",
					"@lang": "./lang",
				},
			},
		],
	];
	//change to 'production' to check if this is working in 'development' mode
	if (babelEnv !== "development") {
		plugins.push(["transform-remove-console", { exclude: ["error"] }]);
	}
	return {
		presets: ["babel-preset-expo"],
		plugins: plugins,
	};
};

My App.js

import store from "@store/store";
import { fetchFonts } from "@utils/init";
import { fetchLang } from "@utils/lang";
import * as SplashScreen from "expo-splash-screen";
import React, { useCallback, useEffect, useState } from "react";
import { View } from "react-native";
import GlobalFont from "react-native-global-font";
import { Provider } from "react-redux";
import AppNavigator from "./navigation/AppNavigator";

const loadData = async () => {
	// Font.loadAsync({..})
	await fetchFonts();
	GlobalFont.applyGlobal("lato");
	// simple fetch request for 300KB file 
	await fetchLang();
};

export default function App() {
	const [appIsReady, setAppIsReady] = useState(false);

	useEffect(() => {
		async function prepare() {
			try {
				await SplashScreen.preventAutoHideAsync();
				await loadData();
			} catch (e) {
				console.warn(e);
			} finally {
				setAppIsReady(true);
			}
		}

		prepare();
	}, []);

	const onLayoutRootView = useCallback(async () => {
		if (appIsReady) {
			await SplashScreen.hideAsync();
		}
	}, [appIsReady]);

	if (!appIsReady) {
		return null;
	}

	return (
		<View
			style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
			onLayout={onLayoutRootView}
		>
			<Provider store={store}>
				<AppNavigator />
			</Provider>
		</View>
	);
}