import React, { useState } from 'react';

import { ThemeProvider, createTheme } from '@rneui/themed';

import RootNavigator from './src/navigation/RootNavigator';

import { cacheImages, cacheFonts } from './src/helpers/AssetsCaching';

import vectorFonts from './src/helpers/vector-fonts';

import { SafeAreaProvider } from 'react-native-safe-area-context';

import * as SplashScreen from 'expo-splash-screen';

import { useColorScheme } from 'react-native';

SplashScreen.preventAutoHideAsync();

export default () => {

const [isReady, setIsReady] = useState(false);

const colorScheme = useColorScheme();

theme.mode = colorScheme;

React.useEffect(() => {

loadAssetsAsync();

}, []);

const loadAssetsAsync = async () => {

const imageAssets = cacheImages([

require('./assets/images/bg_screen1.jpg'),

require('./assets/images/bg_screen2.jpg'),

require('./assets/images/bg_screen3.jpg'),

require('./assets/images/bg_screen4.jpg'),

require('./assets/images/user-cool.png'),

require('./assets/images/user-hp.png'),

require('./assets/images/user-student.png'),

require('./assets/images/avatar1.jpg'),

]);

const fontAssets = cacheFonts([

...vectorFonts,

{ georgia: require('./assets/fonts/Georgia.ttf') },

{ regular: require('./assets/fonts/Montserrat-Regular.ttf') },

{ light: require('./assets/fonts/Montserrat-Light.ttf') },

{ bold: require('./assets/fonts/Montserrat-Bold.ttf') },

{ UbuntuLight: require('./assets/fonts/Ubuntu-Light.ttf') },

{ UbuntuBold: require('./assets/fonts/Ubuntu-Bold.ttf') },

{ UbuntuLightItalic: require('./assets/fonts/Ubuntu-Light-Italic.ttf') },

]);

await Promise.all([...imageAssets, ...fontAssets]);

setIsReady(true);

};

const onLayoutRootView = React.useCallback(async () => {

if (isReady) {

await SplashScreen.hideAsync();

}

}, [isReady]);

if (!isReady) {

return null;

}

return (

<SafeAreaProvider onLayout={onLayoutRootView}>

<ThemeProvider theme={theme}>

<RootNavigator />

</ThemeProvider>

</SafeAreaProvider>

);

};

const theme = createTheme({

lightColors: {

primary: '#3d5afe',

},

darkColors: {

primary: '#3d5afe',

},

mode: 'dark',

components: {

Text: {

h1Style: {

fontSize: 80,

},

},

},

});