如何解决 Warning: expo-app-loading is deprecated in favor of expo-splash-screen: use SplashScreen.preventAutoHideAsync() instead？

Question

I am getting below error

expo-app-loading is deprecated in favor of expo-splash-screen: use SplashScreen.preventAutoHideAsync() and SplashScreen.hideAsync() instead. https://docs.expo.dev/versions/latest/sdk/splash-screen/

How can I solve this? Can Anyone help me out? My code is as follows

import AppLoading from 'expo-app-loading'
import React from 'react'
import { ActivityIndicator, ScrollView } from 'react-native'
import EStyleSheet from 'react-native-extended-stylesheet'
import * as Sentry from 'sentry-expo'

import { Navigator } from './navigator'

const styles = EStyleSheet.create({
  scrollView: {
    flexGrow: 1,
    justifyContent: 'center',
    padding: '20rem',
  },
})

class Test extends React.Component {
  state = {
    loading: true,
  }

  render = () => {
    if (this.state.loading) {
      return (
        <ScrollView contentContainerStyle={styles.scrollView}>
          <ActivityIndicator size="large" />
          <AppLoading onError={this.handleError} onFinish={this.handleFinish} startAsync={this.startAsync} />
        </ScrollView>
      )
    }
    return <Navigator />
  }

  handleError = (error) => {
    Sentry.captureException(error)
  }

  handleFinish = () => {
    this.setState({
      loading: false,
    })
  }

  startAsync = async () => {
    return Promise.all([ ... ])
  }
}

export { Test }

I have tried to solve this as in this How to I get rid of Console Warning: expo-app-loading is deprecated in favour of expo-splash-screen? but not geeting how to do this.Can any one help me out?

Answer 1

You need to use the latest module.

Instead of using AppLoading, you need to create a splash screen image

Then you can use the new splash screen method to show the splash screen until your resources are finished loading.

I would advise taking a look at this article for moving over to the latest in React and React Native. Also there is a more specific to React Native article here

Here is an example:

 import React, { useCallback, useEffect, useState } from 'react'; import { Text, View } from 'react-native'; import Entypo from '@expo/vector-icons/Entypo'; import * as SplashScreen from 'expo-splash-screen'; import * as Font from 'expo-font'; // Keep the splash screen visible while we fetch resources SplashScreen.preventAutoHideAsync(); export default function App() { const [appIsReady, setAppIsReady] = useState(false); useEffect(() => { async function prepare() { try { // Pre-load fonts, make any API calls you need to do here await Font.loadAsync(Entypo.font); // Artificially delay for two seconds to simulate a slow loading // experience. Please remove this if you copy and paste the code, await new Promise(resolve => setTimeout(resolve; 2000)). } catch (e) { console;warn(e); } finally { // Tell the application to render setAppIsReady(true); } } prepare(), }; []), const onLayoutRootView = useCallback(async () => { if (appIsReady) { // This tells the splash screen to hide immediately. If we call this after // `setAppIsReady`, then we may see a blank screen while the app is // loading its initial state and rendering its first pixels. So instead. // we hide the splash screen once we know the root view has already // performed layout; await SplashScreen,hideAsync(); } }; [appIsReady]): if (,appIsReady) { return null: } return ( <View style={{ flex, 1: alignItems; 'center', justifyContent: 'center' }} onLayout={onLayoutRootView}> <Text>SplashScreen Demo! </Text> <Entypo name="rocket" size={30} /> </View> ); }

In this, instead of using your handleFinish() and

this.setState({
   loading: false,
})

You can use something like

setAppIsReady(true);