App.tsx

import React, { useState } from 'react';

import useCachedResources from '~hooks/useCachedResources';
import useColorScheme from '~hooks/useColorScheme';

import * as eva from '@eva-design/eva';
import { ApplicationProvider, Layout, Text } from '@ui-kitten/components';
import { useFonts } from 'expo-font';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import { default as mapping } from './mapping.json';
import Navigation from './navigation';
import { theme } from './theme';

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  const [fontsLoaded] = useFonts({
    'OpenSans-Regular': require('./assets/fonts/OpenSans-Regular.ttf'),
  });

  if (!fontsLoaded && !isLoadingComplete) {
    return null;
  } else {
    return (
      <ApplicationProvider {...eva} theme={theme} customMapping={mapping}>
        <SafeAreaProvider>
          <Navigation colorScheme={colorScheme} />
          <StatusBar />
        </SafeAreaProvider>
      </ApplicationProvider>
    );
  }
}