Blank white screen using react navigation in IOS

Question

I want to run a new project in react native app. I get no error but my application in my emulator shows nothing but the blank page.

First I wrote react-native init AwesomeProject for creating new project.

Then I tried to implement my react navigation as below:

import { createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation';

import Home from './MainTabNavigator';
import SignInScreen from './SignInScreen';
import Setting from './SettingScreen';
import Articles from './ArticleScreen';
import SignUp from './SignUpScreen';
import Category from './SelectCategory';

export default createAppContainer(createSwitchNavigator({
        Auth: SignInScreen,
        Main: Home,
        Setting: Setting,
        SignUp: SignUp,
        SelectCategory: Category
    },
    {
      initialRouteName:'Auth',
    }
));

also I implemented my package.json as below and then use npm install

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "axios": "0.18.0",
    "native-base": "^2.0.6",
    "react": "16.8.3",
    "react-native": "0.59.1",
    "react-native-animatable": "1.3.0",
    "react-native-autoheight-webview": "^1.0.1",
    "react-native-banner-carousel": "1.0.3",
    "react-native-elements": "0.19.1",
    "react-native-form-builder": "^1.0.16",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-html-to-text": "^0.0.5",
    "react-native-image-header-scroll-view": "0.8.2",
    "react-native-keyboard-aware-scroll-view": "^0.8.0",
    "react-native-paper": "2.2.8",
    "react-native-webview": "^5.2.1",
    "react-native-webview-autoheight": "^1.0.6",
    "react-navigation": "^3.5.1"
  },
  "devDependencies": {
    "@babel/core": "7.4.0",
    "@babel/runtime": "^7.4.2",
    "babel-jest": "24.5.0",
    "jest": "24.5.0",
    "metro-react-native-babel-preset": "0.53.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

But when I run react-native run-ios I get a white blank page.

also my App.js is like below:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import AppNavigator from './navigation/AppNavigator';


type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <AppNavigator/>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

If I write <Text>Hello</Text> in my app.js, then my blank page show this page insite itself. Here you can see it: https://ibb.co/3vFS8jV

what should I do?

Answer 1

The problem is the class of View in App.js.

Notice that if you give a backgroundColor to your app.js, then your app.js will not show your navigator.

In fact, your container cover your AppNavigator.