Как отладить страницу белого экрана (без отображения содержимого) в приложении RN Expo без сообщений об ошибках

Я создавал приложение в React Native Expo. Во-первых, я включил Facebook Login, просто скопировав и вставив асинхронный код входа в Login.js и добавив this.login() в componentWillMount. Это сработало - всплывающее окно входа в Facebook появлялось при загрузке приложения. Я смог войти в свою учетную запись FB с сообщением об успешном завершении.

Однако, как только я попытался включить Firebase, особенно где-то между передачей кода между моей страницей Home.js и страницей Login.js, я начал получать этот белый экран при загрузке страницы.

В терминале нет ошибок; за исключением сообщения о том, что FacebookAppID и facebookDisplayName не принадлежат app.json.

Я попытался добавить другой цвет фона (черный) в CSS, который работает, но все равно контента нет.

Удаление FacebookAppID и facebookDisplayName из app.json ничего не дало.

Обновление моего ключа приложения на правильный (мне не хватало последнего числа).

Несколько раз перезапускал терминал, выставлял код веб-терминала x и построитель метро.

Обновлен мой код, чтобы каждый файл в моем каталоге Screens имел импорт {connect} и {login}, а также операторы functionMapStateToProps и export по умолчанию для подключения по умолчанию.

Я попытался изменить вкладку в TabNavigator.js на страницу входа и использовать «Вход» в качестве начальногоRouteName, но получил ошибку, что Login.js не является компонентом React.

Первая страница, которая должна появиться перед любой другой, - это вход в Facebook... Так что, похоже, проблема в этом.

App.js

import React from 'react';
import Login from './screens/Login';
import reducers from './redux/reducers';
import thunkMiddleware from 'redux-thunk';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
const middleware = applyMiddleware(thunkMiddleware);
const store = createStore(reducers, middleware);

export default class App extends React.Component {
  render() {
    return (
      <Provider store = {store}>
     <Login/>
     </Provider>
    );
  }
}

------ конец App.js ------------

Логин.js

import React from 'react';
import styles from '../styles'
import RootNavigator from '../navigation/RootNavigator';
import { connect } from 'react-redux';
import { login } from '../redux/actions';
import * as firebase from 'firebase';
import firebaseConfig from '../config/firebase.js';
firebase.initializeApp(firebaseConfig)

import { 
  Text, 
  View,
  TouchableOpacity
} from 'react-native';

class Login extends React.Component 
  state = {}

  componentWillMount() {
    firebase.auth().onAuthStateChanged((user) => {
      if (user != null) {
        this.props.dispatch(login(true))
        console.info("We are authenticated now!" + JSON.stringify(user));
      }
    });
  }

  login = async () => {
    const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync('YourAppKeyGoesHere', {
        permissions: ['public_profile'],
      });
    if (type === 'success') {
      // Build Firebase credential with the Facebook access token.
      const credential = await firebase.auth.FacebookAuthProvider.credential(token);

      // Sign in with credential from the Facebook user.
      firebase.auth().signInWithCredential(credential).catch((error) => {
        // Handle Errors here.
        Alert.alert("Try Again")
      });
    }
  } 

  render() {
    if (this.props.loggedIn){
      return (
        <RootNavigator/>
      )
    } else {
      return (
        <View style = {styles.container}>
          <TouchableOpacity onPress = {this.login.bind(this)}>
            <Text>{this.props.loggedIn}</Text>
          </TouchableOpacity>
        </View>
      )      
    }
  }
}

function mapStateToProps(state) {
  return {
    loggedIn: state.loggedIn
  };
}

export default connect(mapStateToProps)(Login);

--------- конец Login.js ----------

Home.js

import React from 'react';
import styles from '../styles';
import { connect } from 'react-redux';
import { login } from '../redux/actions';

import { 
  Text, 
  View,
  Alert
} from 'react-native';

class Home extends React.Component {
  state = {}

  componentWillMount() {

  }


  render() {
    return (
     <View>
      <Text>Home</Text>
     </View>
    )
  }
}

function mapStateToProps(state) {
  return {
    loggedIn: state.loggedIn
  };
}

export default connect(mapStateToProps)(Home);

-----конец Home.js ------

редукционная папка

действия.js

export function login(){
    return function(dispatch){
        dispatch({ type: 'LOGIN', payload: input });
    }
}

----конец действий.js ----

редукторы.js

export default reducers = (state = {
    loggedIn: false,
}, action) => {
    switch (action.type) {
        case 'LOGIN': {
            return { ...state, loggedIn: action.payload  }
        }
    }
    return state;
}

------ конец редукторов.js ------ ----- конец папки с редуксом ------

-----папка навигации (реагирующая навигация) ------- ---RootNavigator.js---

import React from 'react';
import TabNavigator from './TabNavigator';

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

const AppNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator,
    },
  }
);

const AppContainer = createAppContainer(AppNavigator);

export default class RootNavigator extends React.Component {
  render() {
    return <AppContainer/>;
  }
}

----конец RootNavigator.js-----

----TabNavigator.js----

import React from 'react';
import Home from '../screens/Home';
import Profile from '../screens/Profile';
import Matches from '../screens/Matches';


import {
    createDrawerNavigator,
    createStackNavigator,
    createBottomTabNavigator,
    createAppContainer,
    createMaterialTopTabNavigator,
} from 'react-navigation';

export default createBottomTabNavigator(
  {
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: 'Profile',
      },
    },
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: 'Home',
      }
    },
    Matches: {
      screen: Matches,
      navigationOptions: {
        tabBarLabel: 'Matches',
      },
    },
  },
  {
    navigationOptions: {
      header: null
    },
    tabBarPosition: 'top',
    initialRouteName: 'Home',
    animationEnabled: true,
    swipeEnabled: true,
    tabBarOptions: {
      style: {
        height: 75,
        backgroundColor: 'blue'
      },
    }
  }
);

-----конец TabNavigator----