Rork アプリのスプラッシュスクリーンをカスタマイズする — expo-splash-screen で起動画面を演出する方法

{
  "expo": {
    "name": "MyApp",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#FFFFFF"
    },
    "ios": {
      "splash": {
        "image": "./assets/splash.png",
        "resizeMode": "contain",
        "backgroundColor": "#FFFFFF",
        "tabletImage": "./assets/splash-tablet.png"
      }
    },
    "android": {
      "splash": {
        "image": "./assets/splash.png",
        "resizeMode": "contain",
        "backgroundColor": "#FFFFFF",
        "mdpi": "./assets/splash-mdpi.png",
        "hdpi": "./assets/splash-hdpi.png",
        "xhdpi": "./assets/splash-xhdpi.png",
        "xxhdpi": "./assets/splash-xxhdpi.png",
        "xxxhdpi": "./assets/splash-xxxhdpi.png"
      }
    }
  }
}

// app/_layout.tsx
import { useEffect, useState } from 'react';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import { View } from 'react-native';
 
// アプリの準備が整うまでスプラッシュスクリーンを非表示にしない
SplashScreen.preventAutoHideAsync();
 
export default function RootLayout() {
  const [appIsReady, setAppIsReady] = useState(false);
 
  useEffect(() => {
    async function prepare() {
      try {
        // フォントの読み込みや初期データ取得など、必要な準備をここで行う
        await Font.loadAsync({
          'CustomFont-Regular': require('../assets/fonts/CustomFont-Regular.ttf'),
        });
 
        // 必要に応じてAPIリクエストや認証チェックも追加できる
        // await checkAuthStatus();
 
        // 意図的に少し待たせたい場合（例：アニメーションを見せたい）
        // await new Promise(resolve => setTimeout(resolve, 1000));
 
      } catch (e) {
        // 準備中のエラーは警告として記録し、アプリは起動させる
        console.warn('アプリ起動準備中にエラーが発生しました:', e);
      } finally {
        // 準備完了フラグをセット
        setAppIsReady(true);
      }
    }
 
    prepare();
  }, []);
 
  const onLayoutRootView = async () => {
    if (appIsReady) {
      // ルートViewが描画されたタイミングでスプラッシュを非表示にする
      await SplashScreen.hideAsync();
    }
  };
 
  if (!appIsReady) {
    // アプリの準備ができるまで何も描画しない（スプラッシュが表示し続ける）
    return null;
  }
 
  return (
    <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
      {/* ここにアプリのルートナビゲーションを配置 */}
    </View>
  );
}

import { useEffect, useRef, useState } from 'react';
import * as SplashScreen from 'expo-splash-screen';
import { Animated, Image, StyleSheet, View } from 'react-native';
 
SplashScreen.preventAutoHideAsync();
 
export default function AnimatedSplash({ children }: { children: React.ReactNode }) {
  const [isAppReady, setIsAppReady] = useState(false);
  const [isSplashAnimationComplete, setIsSplashAnimationComplete] = useState(false);
  const animation = useRef(new Animated.Value(1)).current; // 不透明度 1 からスタート
 
  useEffect(() => {
    async function prepare() {
      // 必要な準備処理
      await new Promise(resolve => setTimeout(resolve, 500));
      setIsAppReady(true);
    }
    prepare();
  }, []);
 
  useEffect(() => {
    if (isAppReady) {
      // アプリ準備完了後、フェードアウトアニメーションを開始
      Animated.timing(animation, {
        toValue: 0,         // 不透明度を 0 にする
        duration: 500,      // 0.5秒かけてフェードアウト
        useNativeDriver: true,
      }).start(async () => {
        // アニメーション完了後にスプラッシュを非表示
        await SplashScreen.hideAsync();
        setIsSplashAnimationComplete(true);
      });
    }
  }, [isAppReady]);
 
  return (
    <View style={{ flex: 1 }}>
      {/* アプリ本体（スプラッシュの下に先に描画しておく）*/}
      {isAppReady && children}
 
      {/* カスタムスプラッシュオーバーレイ */}
      {!isSplashAnimationComplete && (
        <Animated.View
          pointerEvents="none"
          style={[StyleSheet.absoluteFill, { backgroundColor: '#FFFFFF', opacity: animation }]}
        >
          <Image
            source={require('../assets/splash.png')}
            style={{ flex: 1, resizeMode: 'contain' }}
          />
        </Animated.View>
      )}
    </View>
  );
}