A
A
Albert Ushakov2021-11-07 19:12:34
React Native
Albert Ushakov, 2021-11-07 19:12:34

Why is React Native showing a white screen when running an android app?

When run on the emulator and on the same Expo phone, everything works. After publishing to the market or creating an apk file and installing, the application opens and remains a white screen and no longer loads. As if something is interfering at the launch level of the application itself. Doesn't even reach the SplashScreen window.
What could be the problem, have you experienced this?
No errors are displayed in the emulator. Is it possible to somehow track this error directly in the production release?
Main boot files:
index.js

import { registerRootComponent } from 'expo';
import App from './App';
registerRootComponent(App);

App.jsx
// Import React and Component
import * as React from 'react';
// Import Navigators from React Navigation
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Import Screens
import Splash from './Screen/Splash';
import Login from './Screen/Login';
import Register from './Screen/Register';
import Policy from './Screen/Policy';
import NavigationRoutes from './Screen/NavigationRoutes';

const Stack = createStackNavigator();

const Auth = () => {

  return (
    <Stack.Navigator initialRouteName="Login">
      <Stack.Screen
        name="Login"
        component={Login}
        options={{
          animationEnabled: false, headerShown: false, cardStyle: { backgroundColor: '#ffffff' }
        }}
      />
      <Stack.Screen
        name="Register"
        component={Register}
        options={{
          headerShown: false, cardStyle: { backgroundColor: '#ffffff' }
        }}
      />
      <Stack.Screen
        name="Policy"
        component={Policy}
        options={{
          title: 'Политика конфиденциальности',
          headerStyle: {
            elevation: 0,
            shadowOpacity: 0,
          },
          cardStyle: { backgroundColor: '#ffffff' }
        }}
      />
    </Stack.Navigator>
  );
}

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Splash">
          <Stack.Screen
            name="Splash"
            component={Splash}
            options={{ animationEnabled: false, headerShown: false, cardStyle: { backgroundColor: '#ffffff' } }}
          />
          <Stack.Screen
            name="Auth"
            component={Auth}
            options={{ animationEnabled: false, headerShown: false }}
          />
          <Stack.Screen
            name="NavigationRoutes"
            component={NavigationRoutes}
            options={{ animationEnabled: false, headerShown: false }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
};

package.json
{
  "name": "app",
  "scripts": {
    "start": "expo start",
    "android": "expo run-android",
    "ios": "expo run-ios",
    "eject": "expo eject",
    "build:android": "expo build:android",
    "upgrade": "expo upgrade",
    "publish": "expo publish"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^12.0.0",
    "@react-native-async-storage/async-storage": "^1.15.11",
    "@react-native-community/netinfo": "6.0.2",
    "@react-native-community/push-notification-ios": "^1.10.0",
    "@react-navigation/bottom-tabs": "5.11.2",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "expo": "^43.0.0",
    "expo-ads-admob": "~11.0.3",
    "expo-asset": "~8.4.3",
    "expo-constants": "~12.1.3",
    "expo-font": "~10.0.3",
    "expo-image-picker": "~11.0.3",
    "expo-linking": "~2.4.2",
    "expo-location": "~13.0.4",
    "expo-notifications": "~0.13.3",
    "expo-splash-screen": "~0.13.5",
    "expo-status-bar": "~1.1.0",
    "expo-updates": "~0.10.5",
    "expo-web-browser": "~10.0.3",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.2",
    "react-native-elements": "^3.2.0",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-hyperlink": "0.0.19",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-masked-text": "^1.13.0",
    "react-native-material-menu": "^1.2.0",
    "react-native-payments": "^0.8.4",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.8.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-star-view": "^1.1.3",
    "react-native-tab-view": "^2.15.2",
    "react-native-web": "0.17.1",
    "react-native-webview": "11.13.0",
    "redux": "^4.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.64.12",
    "jest-expo": "^43.0.0",
    "typescript": "~4.3.5"
  },
  "private": true
}

ps I realized that the error was before loading SplashScreen (Download window). At the moment of opening the application or redirecting to the download window, the problem.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question