**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;