skip to Main Content

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


  1. Chosen as BEST ANSWER

    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.


  2. (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:

    • your conditional for hiding the splash screen is incomplete and some operation hasn’t finished executing (check any async operations like loading fonts)
    • if you have any other bootstrapping logic between rendering the app and the first screen, go through that as well.

    My suggestion would be to include your App.tsx code or, ideally, some crash logs.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search