App.tsx

import React from 'react';
import { ThemeProvider } from 'styled-components';
import AppLoading from 'expo-app-loading';
import 'react-native-gesture-handler';
import { StatusBar } from 'react-native';

import { theme } from './src/global/styles/theme';
import { Routes } from './src/routes';
import { AuthProvider, useAuth } from './src/hooks/auth';

import {
  useFonts,
  Poppins_400Regular,
  Poppins_500Medium,
  Poppins_700Bold
} from '@expo-google-fonts/poppins';

export default function App() {
  const [ fontsLoaded ] = useFonts({
    Poppins_400Regular,
    Poppins_500Medium,
    Poppins_700Bold
  })

  const { userStorageLoading } = useAuth();

  if(!fontsLoaded || userStorageLoading){
    return <AppLoading/>
  }
  
  return (
    <ThemeProvider theme={theme}>
        <StatusBar barStyle="light-content" />
        
        <AuthProvider>
          <Routes />
        </AuthProvider>
    </ThemeProvider>
  );
}