White screen on IOS build

Expo Application Services (EAS)
1

I used the command eas build -p ios to generate a build for my app, but when I start the app I get a white screen. when running the expo-doctor command everything seems to be normal. I already updated Expo and migrated to eas recently. The AppStore test team reported this error to me, I don’t have a macbook to test the compilation. Any tips?

package.json

{
“name”: “teviapp”,
“version”: “1.0.0”,
“main”: “node_modules/expo/AppEntry.js”,
“scripts”: {
“start”: “expo start”,
“android”: “expo start --android”,
“ios”: “expo start --ios”,
“web”: “expo start --web”,
“eject”: “expo eject”
},
“dependencies”: {
“@expo-google-fonts/inter”: “^0.2.2”,
“@expo-google-fonts/rajdhani”: “^0.2.2”,
“@react-native-async-storage/async-storage”: “1.18.2”,
“@react-navigation/material-top-tabs”: “^6.2.3”,
“@react-navigation/stack”: “^6.2.3”,
“@sentry/react-native”: “5.5.0”,
“axios”: “^0.27.2”,
“date-fns”: “^2.29.2”,
“expo”: “^49.0.0”,
“expo-application”: “~5.3.0”,
“expo-camera”: “~13.4.2”,
“expo-constants”: “~14.4.2”,
“expo-device”: “~5.4.0”,
“expo-font”: “~11.4.0”,
“expo-linear-gradient”: “~12.3.0”,
“expo-navigation-bar”: “~2.3.0”,
“expo-splash-screen”: “~0.20.5”,
“expo-status-bar”: “~1.6.0”,
“expo-system-ui”: “~2.4.0”,
“expo-updates”: “~0.18.12”,
“lottie-react-native”: “5.1.6”,
“react”: “18.2.0”,
“react-dom”: “18.2.0”,
“react-native”: “0.72.4”,
“react-native-gesture-handler”: “~2.12.0”,
“react-native-iphone-x-helper”: “^1.3.1”,
“react-native-paper”: “^4.12.4”,
“react-native-shimmer-placeholder”: “^2.0.9”,
“react-native-tab-view”: “^3.1.1”,
“react-native-vector-icons”: “^9.2.0”,
“react-native-web”: “~0.19.6”,
“react-native-webview”: “13.2.2”
},
“devDependencies”: {
“@babel/core”: “^7.20.0”,
“@types/react”: “~18.2.14”,
“typescript”: “^5.1.3”
},
“private”: true
}

my app.tsx

import React,{useEffect,useState,useCallback}from 'react';
import * as Font from 'expo-font';
import Routes from './src/routes';
import { StatusBar } from 'expo-status-bar';
import * as SplashScreen from 'expo-splash-screen';
import {View,StyleSheet}from 'react-native';
import { AuthProvider } from './src/context/authContext';
import {NavigationContainer}from '@react-navigation/native';
import {Inter_600SemiBold,Inter_400Regular} from '@expo-google-fonts/inter';
import {Rajdhani_300Light,Rajdhani_500Medium}from '@expo-google-fonts/rajdhani';
import { LogBox } from 'react-native';
import {checkUpdate} from './src/global/premisses/premisses'

export default function App() {
  LogBox.ignoreLogs([
    "Sending"
  ])
  const [appIsReady, setAppIsReady] = useState(false);
  useEffect(() => {
    async function prepare() {
      try {
        // await SplashScreen.preventAutoHideAsync();
        await Font.loadAsync({
          Inter_600SemiBold:Inter_600SemiBold,
          Inter_400Regular:Inter_400Regular,
          Rajdhani_300Light:Rajdhani_300Light,
          Rajdhani_500Medium:Rajdhani_500Medium
        });
        await checkUpdate()
      } catch (e) {
        console.log(e)
      } finally {
        setAppIsReady(true);
      }
    }
    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);
  
  if (!appIsReady) {
    return <></>
  }
  return (
    <NavigationContainer>
      <AuthProvider>
        <View  onLayout={onLayoutRootView}  style={styles.container} >
          <StatusBar 
              style='dark'
            />
            <Routes/>
        </View>
      </AuthProvider>
    </NavigationContainer>
  );
}
const styles = StyleSheet.create({
  container:{
    flex:1,
  }
});
2

are you using a development build or expo go to develop your app? if expo go, i’d suggest migrating to a development build, it is much closer to the real world result and will likely surface whatever issue you are encountering

3

I’m using expo go , how do I make this migration and can I test the IOS build on windows?

4

you’ll need an iphone to test it. Development builds: Introduction - Expo Documentation

1 Like
5

I did what you told me, I migrated to development build to be able to visualize the error, and to my surprise on the first attempt the error appeared steps that I did to simulate the error.
npx expo prebuild --clean
expo run:android
I found out that it wasn’t just on IOS the error on ANDROID also occurred.
this gives the error:

Invariant Violation: requireNativeComponent: “RNCSafeAreaProvider” was not found in the UIManager.

steps to resolve this error

npm install react-native-safe-area-context
then I included SafeAreaProvider in my app.tsx

import { SafeAreaProvider } from ‘react-native-safe-area-context’;

return (

  <NavigationContainer>
    <SafeAreaProvider>
      <AuthProvider>
        <View onLayout={onLayoutRootView} style={styles.container}>
          <StatusBar style='dark' />
          <Routes />
        </View>
      </AuthProvider>
    </SafeAreaProvider>
  </NavigationContainer>
);

after resolving the error I returned to the expo go to develop

6

good to hear! i’d recommend staying with development builds though - expo go isn’t intended to be used for ‘real apps’ - it’s more for prototypes and learning

1 Like
8

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