Long loading time (splashscreen) in older devices

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>
	);
}

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.