React Native Expo Standalone App Crash in Splash Screen

Question

i have been working on an app for days and now after building standalone apk it will crash on splash screen. tried everything and nothing worked? can it be related to one of the packages? like react-native-web? or one else ?

im using eas build to build aab and then convert it to apk using bundle tool gui.

this is the command im using for my build: eas build -p android

app.json

{
  "expo": {
    "name": "Area Meter",
    "slug": "areaMeter",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon@3x.png",
    "splash": {
      "image": "./assets/splash.png"
    },
    "userInterfaceStyle": "light",
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "config": {
        "googleMapsApiKey": "AIzaSyAwM0JWIZvJTk5Zdy-bvaVdnWkvmJzF5Ag"
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "areameter.mahi.ir"
    },
    "extra": {
      "eas": {
        "projectId": "f805d370-e497-4cea-ab88-f7ed142c6747"
      }
    }
  }
}

app.js

// Modules
import react, { useEffect } from "react";
import { ThemeProvider } from "styled-components";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";
import { MapContext } from "./src/context/maps.context";
import { I18nManager } from "react-native";

// Theming
import { theme } from "./src/theme/index";
import { useFonts as useDancingScript } from "expo-font";
I18nManager.allowRTL(false);

// Components
import { HomeScreen } from "./src/features/Home/screens/home.screen";
import { SettingsScreen } from "./src/features/Settings/screens/settings.screen";
import { AboutScreen } from "./src/features/About/screens/about.screen";

// Navigation
const Tab = createBottomTabNavigator();
const TAB_ICONS = {
  home: ["home", "map"],
};

const tabBarIcon =
  (iconName) =>
  ({ size, color, focused }) => {
    let onFocus = focused ? 1 : 0;
    return <Ionicons name={iconName[onFocus]} size={size} color={color} />;
  };

const screenOptions = ({ route }) => {
  const iconName = TAB_ICONS[route.name];
  return {
    tabBarIcon: tabBarIcon(iconName),
    tabBarActiveTintColor: "#a4133c",
    tabBarInActiveTintColor: "gray",
    tabBarHideOnKeyboard: true,
  };
};

const Tabs = () => (
  <Tab.Navigator screenOptions={screenOptions}>
    <Tab.Screen name="home" component={HomeScreen} />
  </Tab.Navigator>
);

export default function App() {
  const [dancingScriptLoaded] = useDancingScript({
    DancingScriptRegular: require("./src/theme/fonts/DancingScript/DancingScript-Regular.ttf"),
    DancingScriptMedium: require("./src/theme/fonts/DancingScript/DancingScript-Medium.ttf"),
    DancingScriptSemiBold: require("./src/theme/fonts/DancingScript/DancingScript-Bold.ttf"),
    DancingScriptBold: require("./src/theme/fonts/DancingScript/DancingScript-SemiBold.ttf"),
  });

  if (!dancingScriptLoaded) {
    return null;
  }

  return (
    <React.Fragment>
      <MapContext.Provider
        value={{
          mapType: "satellite",}}      >
        <NavigationContainer>
          <ThemeProvider theme={theme}>
            <Tabs />
          </ThemeProvider>
        </NavigationContainer>
      </MapContext.Provider>
    </React.Fragment>
  );
}

Answer 1

I have wasted hours of debugging and now found out how you can get a log of your errors on your standalone production build.

Follow the steps:

1. Delete any android and ios folders.
2. Use -> "eas config" to reconfigure your eas settings or update and choose preview build first.
3. delete any package.lock and yarn.lock
4. recreate yarn.lock only using the "yarn" command.
5. now start building internal distribution built using eas build --p android --profile preview.
6. Look at your eas build logs as soon as any error log appears related to any react native component. Go to your package.json replace that with expo alternative also change it into your files wherever it is used.
7. Check the dev build if all ok follow the same until the eas build is successful.
8. You will get a.apk that is debuggable and you can connect with your pc to download scripts using ADB and TCP port (if required).