Hi So i recently deployed an app on the app store. It was launching just fine locally in Expo go without any errors but when I download it from the app store it opens up shows the splash screen for like a sec and then has a blank white screen and stays there. Any ideas what could be wrong. It’s my first app so I’m not sure where to even start. Its a react native expo project.
Expo SDK 46.0.10
below is my package.json
{
"dependencies": {
"@babel/runtime": "^7.18.9",
"@expo-google-fonts/inter": "^0.2.2",
"@expo-google-fonts/nunito-sans": "^0.2.2",
"@expo/config-plugins": "^5.0.1",
"@fawazahmed/react-native-read-more": "^2.3.6",
"@gorhom/bottom-sheet": "^4.2.2",
"@react-native-async-storage/async-storage": "~1.17.3",
"@react-native-community/checkbox": "^0.5.12",
"@react-native-community/datetimepicker": "6.2.0",
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/bottom-tabs": "^6.2.0",
"@react-navigation/material-top-tabs": "^6.2.1",
"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.6.1",
"@react-navigation/stack": "^6.1.1",
"@reduxjs/toolkit": "^1.8.5",
"axios": "^0.27.2",
"chalk": "^5.0.1",
"deprecated-react-native-prop-types": "^2.2.0",
"email-validator": "^2.0.4",
"expo": "^46.0.10",
"expo-app-loading": "~2.1.0",
"expo-auth-session": "~3.7.1",
"expo-av": "~12.0.4",
"expo-calendar": "~10.3.0",
"expo-camera": "~12.3.0",
"expo-dev-client": "~1.2.1",
"expo-firebase-analytics": "~7.1.1",
"expo-font": "~10.2.0",
"expo-image-picker": "~13.3.1",
"expo-linear-gradient": "~11.4.0",
"expo-media-library": "~14.2.0",
"expo-permissions": "^13.2.0",
"expo-random": "~12.3.0",
"expo-splash-screen": "~0.16.2",
"expo-status-bar": "~1.4.0",
"expo-updates": "~0.14.5",
"expo-video-thumbnails": "~6.4.0",
"firebase": "^9.9.3",
"formik": "^2.2.9",
"moment": "^2.29.1",
"nanoid": "^4.0.0",
"react": "18.0.0",
"react-country-region-selector": "^3.6.1",
"react-dom": "18.0.0",
"react-native": "0.69.5",
"react-native-action-button": "^2.8.5",
"react-native-axios": "^0.17.1",
"react-native-bouncy-checkbox": "^2.1.10",
"react-native-bouncy-checkbox-group": "^0.1.0",
"react-native-country-codes-picker": "^1.4.2",
"react-native-country-picker-modal": "^2.0.0",
"react-native-date-picker": "^4.2.5",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "~2.5.0",
"react-native-get-random-values": "^1.8.0",
"react-native-gifted-chat": "^0.16.3",
"react-native-google-places-autocomplete": "^2.4.1",
"react-native-image-crop-picker": "^0.37.3",
"react-native-image-viewing": "^0.2.2",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-keyboard-manager": "^6.5.4-4",
"react-native-maps": "0.31.1",
"react-native-material-dropdown": "^0.11.1",
"react-native-multi-selectbox": "^1.5.0",
"react-native-onboarding-swiper": "^1.2.0",
"react-native-pager-view": "5.4.24",
"react-native-phone-number-input": "^2.1.0",
"react-native-reanimated": "~2.9.1",
"react-native-select-dropdown": "^1.11.0",
"react-native-shimmer-placeholder": "^2.0.8",
"react-native-skeleton-placeholder": "^5.0.0",
"react-native-svg": "12.3.0",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^9.1.0",
"react-native-web": "~0.18.7",
"react-query": "^3.39.0",
"react-redux": "^8.0.1",
"reanimated-bottom-sheet": "^1.0.0-alpha.22",
"redux": "^4.2.0",
"redux-persist": "^6.0.0",
"redux-persist-expo-filesystem": "^2.0.0",
"redux-thunk": "^2.4.1",
"styled-components": "^5.3.5",
"throttle-debounce": "^5.0.0",
"uuid-random": "^1.3.2",
"valid-url": "^1.0.9",
"yup": "^0.32.11"
},
"devDependencies": {
"@babel/core": "^7.12.9"
},
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web"
},
}
import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './redux/reducers';
import Routes from './navigation/Routes';
import { QueryClientProvider, QueryClient } from 'react-query';
import { LogBox } from 'react-native';
let store = createStore(rootReducer, applyMiddleware(thunk));
export default function App() {
LogBox.ignoreLogs(['Setting a timer']);
LogBox.ignoreLogs(['EventEmitter.removeListener'])
const queryClient = new QueryClient({
defaultOptions: { queries: { refetchInterval: false, staleTime: Infinity } }
});
return (
<Provider store={store}>
<QueryClientProvider client={queryClient}>
<Routes />
</QueryClientProvider>
</Provider>
)
}
the the routes component
import React, { useEffect } from 'react';
import { SignedInStack } from './navigation';
import { SignedOutStack } from './navigation';
import { NavigationContainer } from '@react-navigation/native';
import { useDispatch, useSelector } from 'react-redux';
import { userAuthStateListener, } from '../redux/actions/auth';
import AppLoadingScreen from '../screens/AppLoadingScreen';
const Routes = () => {
const user = useSelector(state => state.auth)
const dispatch = useDispatch(); //get the dispatch from the redux state
useEffect(() => {
dispatch(userAuthStateListener());
}, [])
if (!user.loaded) {
return <AppLoadingScreen />
}
return (
<NavigationContainer>
{
user.currentUser !== null ?
<SignedInStack />
:
<SignedOutStack />
}
</NavigationContainer>
);
}
export default Routes
2
Answers
After Hours of debugging and starting with a fresh project I realized I had not installed react native screens. Oddly enough there was no error showing up in the expo crash logs and it was running perfectly. On both ios and android from expo go. Had to set up sentry in the project, unfortunately Testflight also didn't bring up any entries. But thanks to sentry I was finnaly able to see the error
requireNativeComponent: "RNSScreen" was not found in the UIManager.(This should be a comment but my rating is still low).
It’s hard to tell without some crash logs but it looks like a bootstrapping error. some potential culprits that come to mind:
My suggestion would be to include your
App.tsxcode or, ideally, some crash logs.