React native: TypeError: null is not an object (evaluating 'SplashScreen.preventAutoHide')

The AppLoading component is not available in the bare workflow. As @gaurav-roy said you have to refactor your code.

1. Install the expo-splash-screen package with npm install expo-splash-screen

2. Add a splash-screen to your Android and iOS projects. Run npm run expo-splash-screen --help and follow the instructions of this CLI tool. (Because of a bug you might have to run the command again with the -p "ios" flag if it only adds the SplashScreen for Android after running it.

3. Change your code inside App.tsx in a similar way as in this example.

   If you're working with hooks you probably want to add an useEffect hook with an empty dependency list which runs an async function. Here an example of how it could be done:

const App = (props: Props) => {
  const [isLoadingComplete, setLoadingComplete] = useState(false);
  
  const init = async () => {
  try {
    // Keep on showing the SlashScreen
    await SplashScreen.preventAutoHideAsync();
    await loadResourcesAsync();
  } catch (e) {
    console.warn(e);
  } finally {
    setLoadingComplete(true);
    // Hiding the SplashScreen
    await SplashScreen.hideAsync();
  }
  
  useEffect(() => {
    init();
  }, []);

  const renderApp = () => {
    if (!isLoadingComplete && !props.skipLoadingScreen) {
      return null;
    }

    return (
      <Main />
    );
  };
  return <StoreProvider>{renderApp()}</StoreProvider>;
}

As its evident from docs , SplashScreen is an inbuilt api for expo apps, and since you ejected it , it throws an error since it cant be used.

You can see this in the docs expo splashscreen .

First you should download npm i expo-splash-screen

And then change your import statement to :

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

Hope it helps. feel free for doubts

After looking through this SO page and then digging into some links, especially this expo page where they kind of provide a solution for this, I was able to get my app running after about 3 hours of struggle. They haven't added any functional component example, so I am sharing my code below in case someone came here looking for the solution.

import { Asset } from "expo-asset";
import * as Font from "expo-font";
import React, { useState, useEffect } from "react";
import { Platform, StatusBar, StyleSheet, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import * as SplashScreen from 'expo-splash-screen';

import AppNavigator from "./navigation/AppNavigator";

export default props => {
  const [isLoadingComplete, setLoadingComplete] = useState(false);

  const theme = {
    ...DefaultTheme,
    roundness: 2,
    colors: {
      ...DefaultTheme.colors,
      primary: "#E4002B",
      accent: "#E4002B",
    },
  };

  useEffect(() => {
    async function asyncTasks() {
      try {
        await SplashScreen.preventAutoHideAsync();
      } catch (e) {
        console.warn(e);
      }
      await loadResourcesAsync()
      setLoadingComplete(true);
    }

    asyncTasks()
  }, []);

  return (
    !isLoadingComplete && !props.skipLoadingScreen ? null :
    <View style={styles.container}>
      {Platform.OS === "ios" && <StatusBar barStyle="default" />}
      <AppNavigator />
    </View>
  );
}

async function loadResourcesAsync() {
  await Promise.all([
    Asset.loadAsync([
      require("./assets/images/logo.png") // Load your resources here (if any)
    ]),
    Font.loadAsync({
      // You can remove this if you are not loading any fonts
      "space-mono": require("./assets/fonts/SpaceMono-Regular.ttf"),
    }),
  ]);
  await SplashScreen.hideAsync();
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
});

This solved it for me for an ejected expo app. Looks like expo was referencing it wrongly. https://github.com/expo/expo/issues/7718#issuecomment-610508510

What worked for me was updating node_modules/expo/build/launch/splashScreen.js to the following as suggested by adamsolomon1986 in the repo (issue #7718):

import { NativeModules } from 'react-native';
import* as SplashScreen from 'expo-splash-screen'
export function preventAutoHide() {
    if (SplashScreen.preventAutoHide) {
        SplashScreen.preventAutoHide();
    }
}
export function hide() {
    if (SplashScreen.hide) {
        SplashScreen.hide();
    }
}
//# sourceMappingURL=SplashScreen.js.map