Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

AppLoading foi descontinuado

Olá o AppLoading foi descontinuado e no expo eles indicam a utilização do expo-splash-screen. Mas vendo o exemplo deles eles usam função assíncrona. Teria algo parecido com o AppLoading? Ou alguma ajuda para adaptar o splash-screen nesse projeto?

1 resposta
solução!

Tive o mesmo problema aqui, fiz uns teste de tentativa e erro seguindo a documentação (https://docs.expo.dev/versions/latest/sdk/splash-screen/) até conseguir.

Instalar a biblioteca:

expo install expo-splash-screen

Meu código ficou assim:

import React, { useEffect, useCallback } from 'react';
import { StatusBar, SafeAreaView } from 'react-native';
import {
  useFonts,
  Montserrat_400Regular,
  Montserrat_700Bold,
} from '@expo-google-fonts/montserrat';
import Basket from './src/screens/Basket';
import mock from './src/mocks/basket';
import * as SplashScreen from 'expo-splash-screen';

export default function App() {
  const [fontsLoaded] = useFonts({
    MontserratRegular: Montserrat_400Regular,
    MontserratBold: Montserrat_700Bold,
  });

  useEffect(() => {
    async function prepare() {
      try {
        await SplashScreen.preventAutoHideAsync();
      } catch (e) {
        console.warn(e);
      }
    }
    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) {
    return null;
  }

  return (
    <SafeAreaView style={{ flex: 1 }} onLayout={onLayoutRootView}>
      <StatusBar />
      <Basket {...mock} />
    </SafeAreaView>
  );
}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software