import React, { useState } from 'react'; /*necesitas esto para usar el hook de state*/
import { StyleSheet, Text, View } from 'react-native';

//PARA COMPILAR la APK hay que seguir estos pasos
//https://www.youtube.com/watch?v=hXDMWeD0ERM&t=6117s
//Pero en esencia armas una cuenta de expo.io (ya tienes alexcd2000 y n... ) y ahí se suben los archivos y se compila la apk
//solo corre en la consola (checa en app.json el logo y nombre sean los que quieres)
//expo build:android
//o expo build:ios 
//o expo build:web (que se supone hace una versión web)
//y expo se encarga de todos los pasos. Para publicar en el store es un poco mas de trabajo porque tienes que conseguir un id de play store antes de subirlo, pero en esencia tu apk (que en este caso expo firma como alexcd2000)

//Tienes que instalar esto para que funcione el stack navigator. El stack agrega pestaña sobre pestaña y las tira al regresar, pero no las cambia
//npm install react-navigation
//expo install react-native-gesture-handler react-native-reanimated
//npm install react-navigation-stack
import Navigator from './routes/drawer';//Navigator ya es el elemento que se muesta o la pestaña

//El drawer navigation alterna entre varios stack navigators. La idea del drawer navigation es similar al menu movil de hamburguesa y a diferencia del stack, si cambia entre pestañas. Hay que instalar:
//npm install react-navigation-drawer

import * as Font from 'expo-font';//asi traes fuentes
const getFonts = () => Font.loadAsync({//asi traes las fuentes y las renombras
  'nunito-regular': require('./assets/fonts/Nunito-Regular.ttf'),
  'nunito-bold': require('./assets/fonts/Nunito-Bold.ttf'),
});
import AppLoading from 'expo-app-loading';//esto verifica que si cargue las fuentes, tienes que correr 
//expo install expo-app-loading
//en la terminal porque no viene por default y reiniciar el emulador y la terminal

import Home from "./screens/home";
import About from "./screens/about";
import ReviewDetails from "./screens/review";

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  if (fontsLoaded) {//esto checha si ya cargo la fuente
    return (
      <Navigator/>
    );
  } else {//si no la cargado esta función cambia el estado hasta que este
    return (
   <AppLoading
     startAsync={getFonts}
     onFinish={()=> setFontsLoaded(true)} 
     onError={() => console.log('error loading')}
    />
	);
  }
}