React Native with Firebase auth and database initializeApp errors

Question

I managed to get auth working with my react native expo app. I can log in, register a new user complete with adding the displayName to the user and all is good.

After logging in, I added the following code to a screen so I could display the logged in user's displayName or email address

MoreScreen.js

import React from 'react'
import firebase from 'firebase/app'
import Background from '../components/Background'
import Button from '../components/Button'
import Paragraph from '../components/Paragraph'
import { logoutUser } from '../api/auth-api'

const auth = firebase.auth()
const user = auth.currentUser
console.log(user)

export default function MoreScreen() {
  return (
    <Background>
      <Paragraph>Logged in as {user.displayName}</Paragraph>
      <Button mode="outlined" onPress={() => logoutUser()}>
        Logout
      </Button>
    </Background>
  )
}

The auth-API file uses firebase.auth().signOut() to log the user out. The problem arises when I click the logout button and log back in with a different account, the displayName is still showing from the previously logged-in account. So, the signOut() function isn't doing its job.

That's problem part 1. Problem part 2 comes when I stop the metro server and restart it, I get the same No Firebase App has been initialized as the user in this question got.

Error: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp()

The accepted answer from that question stated that I need to initialize the app before importing any other screens and then the error will be no more. However, linting won't let me put the initializeApp line above importing other screens.

App.js

import React from 'react'
import { Provider } from 'react-native-paper'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { MaterialCommunityIcons } from '@expo/vector-icons'
import firebase from 'firebase/app'
import { firebaseConfig } from './src/core/config'
import { theme } from './src/core/theme'
import {
  StartScreen,
  LoginScreen,
  RegisterScreen,
  ResetPasswordScreen,
  HomeScreen,
  AuthLoadingScreen,
  MoreScreen,
  OrdersScreen,
  ItemsScreen,
  DrawerScreen,
} from './src/screens'

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}

const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()

export default function App() {
  return (
    <Provider theme={theme}>
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="AuthLoadingScreen"
          screenOptions={{
            headerShown: false,
          }}
        >
          <Stack.Group>
            <Stack.Screen
              name="AuthLoadingScreen"
              component={AuthLoadingScreen}
            />
            <Stack.Screen name="StartScreen" component={StartScreen} />
            <Stack.Screen name="LoginScreen" component={LoginScreen} />
            <Stack.Screen name="RegisterScreen" component={RegisterScreen} />
            <Stack.Screen
              name="HomeScreen"
              component={BottomNavigation}
              screenOptions={{
                headerShown: false,
              }}
            />
            <Stack.Screen
              name="ResetPasswordScreen"
              component={ResetPasswordScreen}
            />
          </Stack.Group>
          <Stack.Group screenOptions={{ presentation: 'modal' }}>
            <Stack.Screen name="DrawerScreen" component={DrawerScreen} />
          </Stack.Group>
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  )
}

function BottomNavigation() {
  return (
    <Tab.Navigator
      screenOptions={() => ({
        headerShown: false,
        tabBarActiveTintColor: theme.colors.primary,
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen
        name="Dashboard"
        component={HomeScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons
              name="view-dashboard"
              size={24}
              color={color}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Items"
        component={ItemsScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="package" size={24} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Orders"
        component={OrdersScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons
              name="clipboard-list"
              size={24}
              color={color}
            />
          ),
        }}
      />
      <Tab.Screen
        name="More"
        component={MoreScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="more" size={24} color={color} />
          ),
        }}
      />
    </Tab.Navigator>
  )
}

How can I layout my code differently so that it initializes the app in the App.js file but still allows me to view user details on a different screen or get data from firestore on another screen without the error showing up? And also, how do I get the signOut function to actually sign the user out completely?