react native expo blank white screen after splash screen

Question

> app.json

{
  "expo": {
    "name": "Csearch",
    "slug": "Csearch",
    "version": "1.0.0",
    "orientation": "portrait",
    "sdkVersion": "38.0.0",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#2e64ae"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "android": {
      "package": "com.geekonomy.Csearch",
      "versionCode": 1
    },
    "ios": {
      "supportsTablet": true
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

package.json

{
  "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": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/drawer": "^5.8.6",
    "@react-navigation/native": "^5.7.1",
    "@react-navigation/stack": "^5.7.1",
    "expo": "~38.0.8",
    "expo-status-bar": "^1.0.2",
    "firebase": "^7.17.1",
    "native-base": "^2.13.13",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-easy-grid": "^0.2.2",
    "react-native-elements": "^2.0.4",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-maps": "^0.27.1",
    "react-native-reanimated": "~1.9.0",
    "react-native-safe-area-context": "~3.0.7",
    "react-native-screens": "~2.9.0",
    "react-native-web": "~0.11.7",
    "react-router-native": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0"
  },
  "private": true
}

App.js

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {},
      isReady: false,
    };
  }
  authListener() {
    fire.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({ user });
      } else {
        this.setState({ user: null });
      }
    });
  }
  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      ...Ionicons.font,
    });
    this.setState({ isReady: true }, () => {
      this.authListener();
    });
  }

  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }
    return (
      <NativeRouter>
        <BackButton />
        <Switch>
          <Route exact path="/">
            {this.state.user ? <DashBoard /> : <Login />}
          </Route>
          <Route path="/criminalDetails" component={ShowSelectedCriminals}>
            {/* {this.state.user ? <ShowSelectedCriminals /> : <Login />} */}
          </Route>
          <Route path="/gangDetails" component={SelectedGangDetails}>
            {/* {this.state.user ? <SelectedGangDetails /> : <Login />} */}
          </Route>
          <Route path="/gangCriminalDetails" component={GangCriminalDetails}>
            {/* {this.state.user ? <GangCriminalDetails /> : <Login />} */}
          </Route>
          <Route path="/ShowGangs">
            {this.state.user ? <ShowGangs /> : <Login />}
          </Route>
          <Route path="/Showdata">
            {this.state.user ? <Showdata /> : <Login />}
          </Route>
        </Switch>
      </NativeRouter>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Login.js

class Login extends Component {
  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
    this.state = {
      email: "",
      password: "",
    };
  }
  login() {
    fire
      .auth()
      .signInWithEmailAndPassword(this.state.email, this.state.password)
      .then((u) => {
        console.log(u);
      })
      .catch((error) => {
        console.log(error);
      });
  }
  render() {
    return (
      <View style={styles.container}>
        {/* <Image
          style={{
            height: 25,
            width: 25,
          }}
          source={require("../assets/login.png")}
        /> */}
        <Item floatingLabel>
          <Label>Email</Label>
          <Input onChangeText={(email) => this.setState({ email })} />
        </Item>
        <Item floatingLabel last>
          <Label>Password</Label>
          <Input
            secureTextEntry={true}
            onChangeText={(password) => this.setState({ password })}
            placeholder="Password"
          />
        </Item>

        <Item
          style={{
            marginTop: 10,
            marginBottom: 10,
            justifyContent: "center",
            alignItems: "center",
            borderBottomColor: "white",
          }}
        >
          <Button info onPress={this.login}>
            <Text> Login </Text>
          </Button>
        </Item>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#2e64ae",
  },
});
export default Login;

DashBoard.js

const Drawer = createDrawerNavigator();
const DashBoardStack = createStackNavigator();
const ShowGangsStack = createStackNavigator();
const ShowCriminalsStack = createStackNavigator();
const DashBoardStackScreen = ({ navigation }) => (
  <DashBoardStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: "#2e64ae",
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold",
      },
    }}
  >
    <DashBoardStack.Screen
      name="DashBoard"
      component={InitialDb}
      options={{
        title: "CSearch",
        headerLeft: () => (
          <TouchableOpacity onPress={() => navigation.openDrawer()}>
            <Entypo name="menu" size={24} color="black" />
          </TouchableOpacity>
        ),
        headerRight: () => (
          <TouchableOpacity onPress={() => fire.auth().signOut()}>
            <AntDesign name="logout" size={24} color="black" />
          </TouchableOpacity>
        ),
      }}
    />
  </DashBoardStack.Navigator>
);
const ShowGangsStackStackScreen = ({ navigation }) => (
  <ShowGangsStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: "#2e64ae",
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold",
      },
    }}
  >
    <ShowGangsStack.Screen
      name="ShowGangs"
      component={ShowGangs}
      options={{
        title: "CSearch",
        headerLeft: () => (
          <TouchableOpacity onPress={() => navigation.openDrawer()}>
            <Entypo name="menu" size={24} color="black" />
          </TouchableOpacity>
        ),
        headerRight: () => (
          <TouchableOpacity onPress={() => fire.auth().signOut()}>
            <AntDesign name="logout" size={24} color="black" />
          </TouchableOpacity>
        ),
      }}
    />
  </ShowGangsStack.Navigator>
);
const ShowCriminalsStackScreen = ({ navigation }) => (
  <ShowCriminalsStack.Navigator
    screenOptions={{
      headerStyle: {
        backgroundColor: "#2e64ae",
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold",
      },
    }}
  >
    <ShowCriminalsStack.Screen
      name="ShowCriminals"
      component={ShowData}
      options={{
        title: "CSearch",
        headerLeft: () => (
          <TouchableOpacity onPress={() => navigation.openDrawer()}>
            <Entypo name="menu" size={24} color="black" />
          </TouchableOpacity>
        ),
        headerRight: () => (
          <TouchableOpacity onPress={() => fire.auth().signOut()}>
            <AntDesign name="logout" size={24} color="black" />
          </TouchableOpacity>
        ),
      }}
    />
  </ShowCriminalsStack.Navigator>
);
export default class DashBoard extends React.Component {
  render() {
    return (
      <>
        {/* <Image
          style={{ width: 400, height: 400, borderRadius: 400 / 2 }}
          source={require("../assets/login.png")}
        /> */}
        <NavigationContainer>
          <BackButton />
          <Drawer.Navigator initialRouteName="DashBoard">
            <Drawer.Screen name="DashBoard" component={DashBoardStackScreen} />
            <Drawer.Screen
              name="ShowGangs"
              component={ShowGangsStackStackScreen}
            />
            <Drawer.Screen
              name="ShowCriminals"
              component={ShowCriminalsStackScreen}
            />
          </Drawer.Navigator>
        </NavigationContainer>
      </>
    );
  }
}

Here, in the above code, while running it in metro bundler, using expo run android command, the app is running properly in expo without any issue or error. But When I build the apk using expo build:android, and try to install it in my physical device, then it's showing the splash screen and after that it is showing the white blank screen. Not routing to Login component or DashBoard component either

Solution

There are numerous solutions proposed but to actually understand your problem, you need to take a look at how Expo recommends debugging production issues.

Specifically, what I did was to run expo start --no-dev --minify and see if you can reproduce the issue. (Note: this doesn't refresh when you change your code so you'd need to quit the Expo Go app and re-launch it to see the changes.)

For my issue, I was able to reproduce locally using the above method, and I was missing keyExtractor={(_, id) => id.toString()} in FlatList.

Comments

[Angel Venchev]

I am having the same issue but if I kill the app on the device it will start the second time.

[Angel Venchev]

I got my problem fixed. The issue was related to preloading some fonts and images in the App.js file in case you still haven't solved it

[Kumawat]

what was the fix? Did you remove them or what? Please help

[MANOJ H M]

@ManishKumawat after removing map library from expo it worked

[justacoder]

@MANOJHM which map library?

[Nick Sinai]

@AngelVenchev this was my problem, thanks!

[J. Jerez]

hi Taku, what version of the sdk are you using?