Error: Cannot find native module 'ExpoSplashScreen', js engine: hermes

Question

I'm building a react native expo app. I wanted to use custom font for my project, as "expo-app-loading" is deprecated i am trying to use "expo-splash-screen" instead. On importing "expo-splash-screen" im getting an error stating

ERROR Error: Cannot find native module 'ExpoSplashScreen', js engine: hermes"

Also sometimes its showing this error also.

Invariant Violation: "main" has not been registered. This can happen if: * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project. * A module failed to load due to an error and "AppRegistry.registerComponent" wasn't called., js engine: hermes

Here is the code:

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { FlatList, Image, ScrollView, StyleSheet, Text, View } from 'react-native';
import { useFonts } from 'expo-font';
import AppLoading from "expo-app-loading";
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

export default function App() {
  

  let [fontsLoaded] = useFonts(
    { 'Poppins': require('./assets/fonts/Poppins-Bold.ttf') })


  if (!fontsLoaded) {
    return (
      <AppLoading/>
    );
  }

  return (
    <View>
      <StatusBar style="auto" />
      <View style={styles.container}>
        <Text style={{fontFamily:'Poppins'}}>{'State, Country'}</Text>
        <Text style={{fontSize: 10 ,fontFamily:'Poppins'}}>{'Now'}</Text>
        <Image source={require('./assets/icons/cloudy.png')} style={{ height: 80, width: 80, marginTop: 80 }} />
        <Text style={{fontSize: 90 ,fontFamily:'Poppins'}}>{'23°'}</Text>
        <Text style={{fontSize: 15 ,fontFamily:'Poppins'}}>{'Mostly cloudy'}</Text>
        <Text style={{fontSize: 15,fontFamily:'Poppins', marginTop: 50 }}>{'Wind'}</Text>
        <View style={{display: 'flex', flexDirection: 'row', gap: 12, marginTop: 8 }}>
          <Image source={require('./assets/icons/wind.png')} style={{ height: 18, width: 18 }} />
          <Text style={{fontSize: 12, fontFamily:'Poppins' }}>{'km/s'}</Text>
        </View>
      </View>
      <View style={styles.glassDiv}>
        <View style={{display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'Day, Mon date'}</Text>
          <Image source={require('./assets/icons/cloudy.png')} style={{ height: 20, width: 20 }} />
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'28°'}</Text>
        </View>
        <View style={{display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'Day, Mon date'}</Text>
          <Image source={require('./assets/icons/cloudy.png')} style={{ height: 20, width: 20 }} />
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'28°'}</Text>
        </View>
        <View style={{display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'Day, Mon date'}</Text>
          <Image source={require('./assets/icons/cloudy.png')} style={{ height: 20, width: 20 }} />
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'28°'}</Text>
        </View>
        <View style={{display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'Day, Mon date'}</Text>
          <Image source={require('./assets/icons/cloudy.png')} style={{ height: 20, width: 20 }} />
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'28°'}</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    top: 50,
    textAlign: 'center'
  },
  glassDiv: {
    marginTop:130, 
    margin:25, 
    gap:20, 
    padding:10, 
    borderRadius:8,
    fontSize:15 
  }
});

Can any one help me out. Thanks you.

I tried installing "expo-splash-screen" using npx expo install expo-splash-screen and also expo install expo-splash-screen. The installing is successful but the error still persists.

Answer 1

1.Invariant Violation might be caused by your host check your host through your terminal (you must be connected to same wi-fi if you're working wireless)

2. you can try refactoring your code like this

    const [fontsLoaded] = useFonts({
      'Poppins': require('./assets/fonts/Poppins-Bold.ttf')
    })

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

and then use this function with your root view

<View onLayout={onLayoutRootView}>
//rest of your code...
</View>