Trouble implementing splash animation into Expo app

Question

I want to have an animation as my splash screen in my React Native expo app. I'm using the expo-splash-screen library to try to implement this, but all I'm getting when I launch my app is a blank white screen instead of the animation. Any ideas why?

Here's how I've set up my app.

App.js

import 'react-native-gesture-handler';
import React, { useCallback } from 'react'
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { MyStack } from './routes/homeStack';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen'

export default function App() {

  const [ fontsLoaded ] = useFonts({
    'Sofia-Pro': require('./assets/Sofia_Pro_Regular.otf'),
    'Helvetica-Neue': require('./assets/HelveticaNeue-Medium.otf'),
    'NunitoSans': require('./assets/NunitoSans-Bold.ttf'),
    'LatoRegular': require('./assets/Lato-Regular.ttf')
  })

  

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

  if (!fontsLoaded) {
    return null;
  }

  return (
    <NavigationContainer onLayout={onLayoutRootView}>
      <MyStack/>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

app.config.js

import "dotenv/config";

export default {
  expo: {
    name: "Gig Fort",
    slug: "gig-fort",
    version: "3.0.0",
    orientation: "portrait",
    icon: "./assets/icon.png",
    userInterfaceStyle: "light",
    splash: {
      image: "./assets/gigFort_splash_animation.json",
      resizeMode: "contain",
      // backgroundColor: "#ffffff",
    },
    updates: {
      fallbackToCacheTimeout: 0,
    },
    assetBundlePatterns: ["**/*"],

    android: {
      googleServicesFile: "./google-services.json",
      icon: "./assets/icon.png",
      package: "******",
      config: {
        googleMaps: {
          apiKey: "******"
        }
      },
      versionCode: 3
    },
    web: {
      favicon: "./assets/favicon.png",
    },
    extra: {
      firebaseApiKey: process.env.FIREBASE_API_KEY,
      eas: {
        projectId: "******",
      },
    },
  },
};

I've read that GIF files are not supported in React Native, so I converted my animation to JSON, which I've verified as being valid JSON. I've also checked that the 'image' property in 'app.config'json' is pointing to the right file.

Trouble implementing splash animation into Expo app

0 Answers0