App.js

/* React & React Native imports */
import 'react-native-gesture-handler';
import React, {useState, useEffect} from 'react';
import {SafeAreaProvider} from 'react-native-safe-area-context';

/* Navigator imports */
import auth from '@react-native-firebase/auth';
import {NavigationContainer} from '@react-navigation/native';
import AuthStack from './src/router/authstack';
import RootStack from './src/router/rootstack';

/* Redux */
import reducers from "./src/reducers/rootReducer";
import {applyMiddleware, createStore} from 'redux';
import ReduxThunk from 'redux-thunk';
import { Provider } from 'react-redux';

const App = () => {
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState();

  const store = createStore(reducers, applyMiddleware(ReduxThunk));

  function onAuthStateChanged(user) {
    setUser(user);
    if (initializing) setInitializing(false);
  }

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return () => subscriber(); // unsubscribe on unmount
  }, []);

  if (initializing) return null;

  if (!user) {
    return (
      <NavigationContainer>
        <SafeAreaProvider>
          <AuthStack />
        </SafeAreaProvider>
      </NavigationContainer>
    );
  }
  return (
    <Provider store={store}>
      <NavigationContainer>
        <SafeAreaProvider>
          <RootStack />
        </SafeAreaProvider>
      </NavigationContainer>
    </Provider>
  );
};

export default App;