ios – The way to make clean transitions between the splash display screen and the principle display screen?

all! I am engaged on a React Native venture, however I am new to this tech stack. Presently, I need to make the transitions between the splash display screen and the principle display screen a lot smoother, and I’ve looked for options from ChatGpt, however they aren’t working. How can I repair this situation?

Right here is my code:

import { StatusBar } from 'expo-status-bar';
import { Animated, StyleSheet, Textual content, View } from 'react-native';
import { Hyperlink, NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaProvider } from 'react-native-safe-area-context';


import HomeScreen from "./src/screens/HomeScreen";
import ProfileScreen from "./src/screens/ProfileScreen";
import AlertScreen from "./src/screens/AlertScreen";

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useEffect, useState, useCallback, useRef } from 'react';

import * as SplashScreen from "expo-splash-screen";
// Maintain the splash display screen seen whereas we fetch assets
SplashScreen.preventAutoHideAsync();


export default perform App() {
  const [appIsReady, setAppIsReady] = useState(false);
  const opacity = useRef(new Animated.Worth(1)).present;

  const Stack = createNativeStackNavigator();
  const Tab = createBottomTabNavigator();

  const screenOptions = ({ route }) => ({
    tabBarIcon: ({ foucused, coloration, dimension }) => {
      let iconName;
      if (route.title === "House") {
        iconName = foucused ? "ios-home" : "ios-home-outline";
      } else if (route.title === "Alert") {
        iconName = foucused ? "ios-alert-circle" : "ios-alert-circle-outline";
      } else {
        iconName = foucused ? "person-circle" : "person-circle-outline";
      }

      return <Ionicons title={iconName} dimension={dimension} coloration={coloration} />;
    },
    tabBarInactiveTintColor: 'grey',
  });
  useEffect(() => {
    const prepareApp = async () => {
      // 执行其他异步的准备操作
      strive {
        // await new Promise(resolve => setTimeout(resolve, 2000));
      } catch (e) {
        console.warn(e);
      } lastly {
        // Inform the applying to render
        setAppIsReady(true);
      }
    };
    prepareApp();
  }, []);

  const hideSplashScreen = async () => {
    await SplashScreen.hideAsync();
  };

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      Animated.timing(opacity, {
        toValue: 0,
        period: 1000,
        useNativeDriver: true,
      }).begin(hideSplashScreen);
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }
  return (
    <Animated.View onLayout={onLayoutRootView} fashion={{ flex: 1 }}>
      < NavigationContainer>
        < Tab.Navigator initialRouteName="House" screenOptions={screenOptions} >
          <Tab.Display screen title="House" element={HomeScreen} choices={{ title: "首页" }} />
          <Tab.Display screen title="Alert" element={AlertScreen} choices={{ title: "告警", tabBarBadge: 3 }} />
          <Tab.Display screen title="Profile" element={ProfileScreen} choices={{ title: "我" }} />
          {/* 添加其他导航屏幕 */}
        </Tab.Navigator >
        <StatusBar animated={true} fashion="mild" />
      </NavigationContainer >
    </Animated.View>
  );
}

const types = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'heart',
    justifyContent: 'heart',
  },

});

And that is the package deal.json for my venture:

{
  "title": "comnova-net",
  "model": "1.0.0",
  "predominant": "node_modules/expo/AppEntry.js",
  "scripts": {
    "begin": "expo begin",
    "android": "expo begin --android",
    "ios": "expo begin --ios",
    "internet": "expo begin --web"
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "expo": "~48.0.15",
    "expo-splash-screen": "~0.18.2",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.7",
    "react-native-safe-area-context": "^4.5.3",
    "react-native-screens": "^3.20.0",
    "react-native-splash-screen": "^3.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "non-public": true
}

If there’s any issues with my description, please let me know.