Im running an expo managed react native project and I can't figure this out for the life of me. When I first initialized Expo I had the typical splash screen show, but now, I can't see my splash screen at all it just shows a blank white screen (No errors either). Everything else works perfectly in terms of post splash loading, but i really need help getting the splash to show.
What I've Tried:
- Running on iOS simulator, iOS device, Android simulator (Same thing)
- Remove node_modules and package-lock.json and run 'npm i'
- Cleared cache for both Expo and npm
- Replaced app.js return statement with just <View><Text>...</Text></View> and still nothing.
Here's my setup:
package.json
{"name": "placeholder","version": "1.0.0","description": "placeholder","main": "node_modules/expo/AppEntry.js","type": "commonjs","private": true,"scripts": {"type:check": "npx tsc","format:check": "prettier --check \"src/**/*\"","format:write": "prettier --write \"src/**/*\"","lint:check": "eslint \"App.tsx\" \"src/**/*\"","lint:fix": "eslint --fix \"App.tsx\" \"src/**/*\"","start": "expo start","android": "expo start --android","ios": "expo start --ios","web": "expo start --web" },"engines": {"node": "16.x" },"dependencies": {"@react-native-async-storage/async-storage": "~1.17.3","@react-navigation/drawer": "^6.4.3","@react-navigation/native": "^6.0.11","@react-navigation/native-stack": "^6.7.0","@react-navigation/stack": "^6.2.2","@reduxjs/toolkit": "^1.8.4","dotenv": "^16.0.1","expo": "~46.0.6","expo-status-bar": "~1.4.0","react": "18.0.0","react-dom": "18.0.0","react-native": "0.69.4","react-native-gesture-handler": "~2.5.0","react-native-reanimated": "~2.9.1","react-native-screens": "~3.15.0","react-native-web": "~0.18.7","react-redux": "^8.0.2","styled-components": "^5.3.5","expo-screen-orientation": "~4.3.0","expo-splash-screen": "~0.16.1","react-native-safe-area-context": "4.3.1" },"devDependencies": {"@babel/core": "^7.12.9","@redux-devtools/core": "^3.13.1","@types/react": "~18.0.14","@types/react-native": "~0.69.1","@types/react-redux": "^7.1.24","@types/styled-components": "^5.1.26","@types/styled-components-react-native": "^5.1.3","@typescript-eslint/eslint-plugin": "^5.33.1","eslint": "^8.22.0","eslint-config-standard-with-typescript": "^22.0.0","eslint-plugin-import": "^2.26.0","eslint-plugin-n": "^15.2.4","eslint-plugin-promise": "^6.0.0","eslint-plugin-react": "^7.30.1","eslint-plugin-react-hooks": "^4.6.0","prettier": "^2.7.1","typescript": "^4.7.4" }}app.json
{"expo": {"name": "placeholder","slug": "placeholder","version": "1.0.0","orientation": "portrait","icon": "./assets/images/icon.png","userInterfaceStyle": "light","splash": {"image": "./assets/images/splash.png","resizeMode": "cover","backgroundColor": "#1D1A1F" },"updates": {"fallbackToCacheTimeout": 0 },"assetBundlePatterns": ["**/*"],"ios": {"supportsTablet": true,"requireFullScreen": true },"android": {"adaptiveIcon": {"foregroundImage": "./assets/images/adaptive-icon.png","backgroundColor": "#1D1A1F" } },"web": {"favicon": "./assets/images/favicon.png" } }}babel.config
module.exports = function (api) { api.cache(true) return { presets: ['babel-preset-expo'], plugins: ['react-native-reanimated/plugin'] }}app.tsx
import 'react-native-gesture-handler'import Constants from 'expo-constants'import { useState, useEffect } from 'react'import { useFonts } from 'expo-font'import * as SplashScreen from 'expo-splash-screen'import * as ScreenOrientation from 'expo-screen-orientation'import AsyncStorage from '@react-native-async-storage/async-storage'import { SafeAreaProvider } from 'react-native-safe-area-context'import { Provider } from 'react-redux'import { ThemeProvider } from 'styled-components/native'import store from './src/redux/store'import { lightTheme, darkTheme } from './src/res/theme/theme'import Loading from './src/screens/loading/loading'import { logger } from './src/logger/logger'import Application from './src/components/application/application'// Function to keep the splash screen visible while we fetch resourcesSplashScreen.preventAutoHideAsync() .then((data) => logger.log(`SplashScreen.preventAutoHideAsync() succeeded: ${data.toString()}`)) .catch(logger.warn)logger.log('NODE_ENV: ', Constants?.manifest?.extra?.env) //eslint-disable-lineexport const App = (): JSX.Element => { const [fontsLoaded] = useFonts({ SedgwickAveDisplay: require('./assets/fonts/sedgwick-ave-display/SedgwickAveDisplay-Regular.ttf'), QuicksandRegular: require('./assets/fonts/Quicksand/static/Quicksand-Regular.ttf'), QuicksandSemiBold: require('./assets/fonts/Quicksand/static/Quicksand-SemiBold.ttf'), QuicksandBold: require('./assets/fonts/Quicksand/static/Quicksand-Bold.ttf') }) const [loading, setLoading] = useState(true) const [theme, setTheme] = useState('light') const selectedTheme = theme === 'dark' ? darkTheme : lightTheme // Load the app here useEffect(() => { // Hide splash screen after 2 seconds setTimeout(() => { SplashScreen.hideAsync() .then((data) => logger.log(`SplashScreen.hideAsync() succeeded: ${data.toString()}`)) .catch(logger.warn) }, 2000) ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP) .then(() => { logger.log('ScreenOrientation.lockAsync() succeeded') return AsyncStorage.getItem('@theme') }) .then((data) => { if (data) setTheme(data) setLoading(false) }) .catch((e) => { logger.warn(e) setLoading(false) }) }, []) if (loading || !fontsLoaded) { return <Loading /> } return (<SafeAreaProvider><Provider store={store}><ThemeProvider theme={selectedTheme}><Application /></ThemeProvider></Provider></SafeAreaProvider> )}export default AppAny help with this would be greatly appreciated, thank you!