**This is the App.tsx file of an app I'm making (React Native Typescript). I want to add fade in/out transitions between some images.
When I run this code, nothing shows up on the screen (I use a Mac):**
import React, { useEffect, useState } from 'react';import { View, StyleSheet, Image, Dimensions } from 'react-native';import Animated, { Easing } from 'react-native-reanimated';import { StatusBar } from 'expo-status-bar';import { NavigationContainer, useNavigation } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';import StartScreen1 from './src/components/SOTSStartScreen1.tsx';import StartScreen2 from './src/components/SOTSStartScreen2.tsx';import StartScreen3 from './src/components/SOTSStartScreen3.tsx';import RiaLogoScreen from './assets/images/ShadowsOnTheSandsLoadingScreen2.png';import ShadowsOnTheSandsLoadingScreen from './assets/images/ShadowsOnTheSandsLoadingScreen.png';import HomePage from './src/components/ShadowsOnTheSandsHomePage';import Settings from './src/components/ShadowsOnTheSandsSettings';import ShadowsOnTheSandsChapter1 from './src/stories/Story-ShadowsOnTheSands/ShadowsOnTheSandsChapter1.tsx';const { Value, timing } = Animated;const Stack = createStackNavigator();function App() { const navigation = useNavigation(); const [username, setUsername] = useState(''); const fadeAnim = new Value(1); // Initial opacity 1 (fully visible) useEffect(() => { console.log("Starting fade animation"); // Debug statement const timer = setTimeout(() => { timing(fadeAnim, { toValue: 0, duration: 1000, // 1 second duration for fade out easing: Easing.inOut(Easing.ease), }).start(() => { console.log("Fade animation completed"); // Debug statement navigation.navigate('ShadowsOnTheSandsLoadingScreen'); }); }, 5000); return () => clearTimeout(timer); }, [fadeAnim, navigation]); const screenWidth = Dimensions.get('window').width; const screenHeight = Dimensions.get('window').height; return (<View style={styles.container}><StatusBar style="auto" /><Animated.Image source={RiaLogoScreen} style={[styles.image, { width: screenWidth, height: screenHeight, opacity: fadeAnim }]} /><ShadowsOnTheSandsChapter1 username={username} /></View> );}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'black', }, image: { resizeMode: 'contain', },});function Main() { return (<NavigationContainer><Stack.Navigator><Stack.Screen name="App" component={App} /><Stack.Screen name="ShadowsOnTheSandsLoadingScreen" component={ShadowsOnTheSandsLoadingScreen} /><Stack.Screen name="StartScreen1" component={StartScreen1} /><Stack.Screen name="StartScreen2" component={StartScreen2} /><Stack.Screen name="StartScreen3" component={StartScreen3} /><Stack.Screen name="HomePage" component={HomePage} /><Stack.Screen name="Settings" component={Settings} /><Stack.Screen name="ShadowsOnTheSandsChapter1" component={ShadowsOnTheSandsChapter1} /></Stack.Navigator></NavigationContainer> );}export default Main;**This is my original code, which is actually working as expected when I run it:**
This code is without the fading transitions/animations.
import React, { useEffect, useState } from 'react';import { View, StyleSheet, Image, Dimensions } from 'react-native';import { StatusBar } from 'expo-status-bar';import { NavigationContainer, useNavigation } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';import HomePage from './src/components/ShadowsOnTheSandsHomePage';import Settings from './src/components/ShadowsOnTheSandsSettings';import StartScreen1 from './src/components/SOTSStartScreen1.tsx';import StartScreen2 from './src/components/SOTSStartScreen2.tsx';import StartScreen3 from './src/components/SOTSStartScreen3.tsx';import RiaLogoScreen from './assets/images/ShadowsOnTheSandsLoadingScreen2.png';import ShadowsOnTheSandsLoadingScreen from './assets/images/ShadowsOnTheSandsLoadingScreen.png';import ShadowsOnTheSandsChapter1 from './src/stories/Story-ShadowsOnTheSands/ShadowsOnTheSandsChapter1.tsx';const Stack = createStackNavigator();function App() { const navigation = useNavigation(); const [username, setUsername] = useState(''); useEffect(() => { const timer = setTimeout(() => { navigation.navigate('ShadowsOnTheSandsLoadingScreen'); }, 5000); // Navigate to ShadowsOnTheSandsLoadingScreen after 5 seconds // Clear the timer return () => clearTimeout(timer); }, [navigation]); // Include navigation in the dependency array useEffect(() => { const timer = setTimeout(() => { navigation.navigate('StartScreen1'); }, 5000); // Navigate to StartScreen1 after 5 seconds // Clear the timer return () => clearTimeout(timer); }, [navigation]); // Include navigation in the dependency array const screenWidth = Dimensions.get('window').width; const screenHeight = Dimensions.get('window').height; return (<View style={styles.container}><StatusBar style="auto" /><Image source={RiaLogoScreen} style={[styles.image, { width: screenWidth, height: screenHeight }]} /><ShadowsOnTheSandsChapter1 username={username} /></View> );}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'black', }, image: { resizeMode: 'contain', },});function Main() { return (<NavigationContainer><Stack.Navigator><Stack.Screen name="App" component={App} /><Stack.Screen name="StartScreen1" component={StartScreen1} /><Stack.Screen name="StartScreen2" component={StartScreen2} /><Stack.Screen name="StartScreen3" component={StartScreen3} /><Stack.Screen name="HomePage" component={HomePage} /><Stack.Screen name="Settings" component={Settings} /><Stack.Screen name="ShadowsOnTheSandsChapter1" component={ShadowsOnTheSandsChapter1} /> </Stack.Navigator></NavigationContainer> );}export default Main;