Why is my navigation not working in React Native using Typescript?

Issue

So, I am trying to navigate to HomeScreen on button onPress Eveent which is in my Splashscreen like shown in the image below.enter image description here So, I have created a screen named DisplayImage and then added it to Splashscreen screen and then put it in the App.tsx file. So whenever i click on the Button nothing happens, sometimes, the App get's closed. Where am i going wrong in my approach, do I have to add always in App.tsx file? Below is my code

DisplayImage.tsx

import {NavigationContainerProps} from '@react-navigation/native';
import React from 'react';
import {
  Image,
  ImageSourcePropType,
  StyleSheet,
  View,
  TouchableOpacity,
  Text,
  StyleProp,
  ViewStyle,
} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from './Homescreen';
const Stack = createNativeStackNavigator();

// Removed unnecessary import of createNativeStackNavigator

interface AppButtonProps {
  onPress: () => void;
  title: string;
}

const AppButton: React.FC<AppButtonProps> = ({onPress, title}) => (
  <TouchableOpacity onPress={onPress} style={styles.appButtonContainer}>
    <Text style={styles.appButtonText}>{title}</Text>
  </TouchableOpacity>
);

interface DisplayImageProps {
  source: ImageSourcePropType;
  style?: StyleProp<ViewStyle>;
}

const DisplayImage: React.FC<DisplayImageProps> = ({source, style}) => {
  return (
    <View style={[styles.imageContainer, style]}>
      <Image source={source} style={styles.image} />
      <View style={styles.spacer} />
      <AppButton title="Hey there!" onPress={() => NavigationDone} />
    </View>
  );
};

const NavigationDone: React.FC<NavigationContainerProps> = ({}) => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  imageContainer: {
    width: 150,
    height: 150,
    justifyContent: 'center',
    alignItems: 'center',
    marginHorizontal: 100,
    marginTop: 200,
  },
  image: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
    borderRadius: 10,
  },
  appButtonContainer: {
    elevation: 8,
    backgroundColor: '#009688',
    borderRadius: 10,
    paddingVertical: 10,
    paddingHorizontal: 12,
  },
  appButtonText: {
    fontSize: 18,
    color: '#fff',
    fontWeight: 'bold',
    alignSelf: 'center',
    textTransform: 'uppercase',
  },
  spacer: {
    height: 50,
  },
});

export default DisplayImage;

SplashScreen.tsx

import React from 'react';
import DisplayImage from './DisplayImage';

const SplashScreen = () => {
  return <DisplayImage source={require('../images/cherry.png')} />;
};

export default SplashScreen;

HomeScreen

import React from 'react';
import {Text, View} from 'react-native';

const HomeScreen = () => {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
};

export default HomeScreen;

App.tsx

import React from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import SplashScreen from './src/screens/Splashscreen';

function App(): React.JSX.Element {
  return (
    <SafeAreaView style={styles.safe}>
      <SplashScreen />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: {
    height: '100%',
    width: '100%',
  },
});

export default App;

Solution

To switch screens in React Native, you must use the navigation.navigate or navigation.push method.

If that happens, the app screen will move normally.

This is the modified source code.

DisplayImage.tsx

import {NavigationContainerProps} from '@react-navigation/native';
import React from 'react';
import {
  Image,
  ImageSourcePropType,
  StyleSheet,
  View,
  TouchableOpacity,
  Text,
  StyleProp,
  ViewStyle,
} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from './Homescreen';
const Stack = createNativeStackNavigator();

// Removed unnecessary import of createNativeStackNavigator

interface AppButtonProps {
  onPress: () => void;
  title: string;
}

const AppButton: React.FC<AppButtonProps> = ({onPress, title}) => (
  <TouchableOpacity onPress={onPress} style={styles.appButtonContainer}>
    <Text style={styles.appButtonText}>{title}</Text>
  </TouchableOpacity>
);

interface DisplayImageProps {
  source: ImageSourcePropType;
  style?: StyleProp<ViewStyle>;
}

const DisplayImage: React.FC<DisplayImageProps> = ({source, style}) => {
  return (
    <View style={[styles.imageContainer, style]}>
      <Image source={source} style={styles.image} />
      <View style={styles.spacer} />
      <AppButton title="Hey there!" onPress={() => NavigationDone()} />
    </View>
  );
};

const NavigationDone: React.FC<NavigationContainerProps> = ({ navigation }) => {
  const GotoHome = () => {
    navigation.push('Home');  //You can use navigation.navigate if you want.
  }

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  imageContainer: {
    width: 150,
    height: 150,
    justifyContent: 'center',
    alignItems: 'center',
    marginHorizontal: 100,
    marginTop: 200,
  },
  image: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
    borderRadius: 10,
  },
  appButtonContainer: {
    elevation: 8,
    backgroundColor: '#009688',
    borderRadius: 10,
    paddingVertical: 10,
    paddingHorizontal: 12,
  },
  appButtonText: {
    fontSize: 18,
    color: '#fff',
    fontWeight: 'bold',
    alignSelf: 'center',
    textTransform: 'uppercase',
  },
  spacer: {
    height: 50,
  },
});

export default DisplayImage;

Update

Since there was a problem with the existing code, I am re-uploading the new code.

App.tsx

import React from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import SplashScreen from './src/screens/Displayscreen';
import HomeScreen from './Homescreen';
const Stack = createNativeStackNavigator();

function App(): React.JSX.Element {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Splash" component={SplashScreen}/>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create( {
  safe: {
    height: '100%',
    width: '100%',
  },
});

export default App;

DisplayImage.tsx

import {NavigationContainerProps} from '@react-navigation/native';
import React from 'react';
import {
  Image,
  ImageSourcePropType,
  StyleSheet,
  View,
  TouchableOpacity,
  Text,
  StyleProp,
  ViewStyle,
} from 'react-native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {useNavigation} from '@react-navigation/native';

// Removed unnecessary import of createNativeStackNavigator

interface AppButtonProps {
  onPress: () => void;
  title: string;
}

const AppButton: React.FC<AppButtonProps> = ({onPress, title}) => (
  <TouchableOpacity onPress={onPress} style={styles.appButtonContainer}>
    <Text style={styles.appButtonText}>{title}</Text>
  </TouchableOpacity>
);

interface DisplayImageProps {
  source: ImageSourcePropType;
  style?: StyleProp<ViewStyle>;
}

const DisplayImage: React.FC<DisplayImageProps> = ({source, style}) => {
  const navigation = useNavigation();

  return (
    <View style={[styles.imageContainer, style]}>
      <Image source={source} style={styles.image} />
      <View style={styles.spacer} />
      <AppButton title="Hey there!" onPress={() => navigation.navigate('Home')}/>
    </View>
  );
};

const styles = StyleSheet.create({
  imageContainer: {
    width: 150,
    height: 150,
    justifyContent: 'center',
    alignItems: 'center',
    marginHorizontal: 100,
    marginTop: 200,
  },
  image: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover',
    borderRadius: 10,
  },
  appButtonContainer: {
    elevation: 8,
    backgroundColor: '#009688',
    borderRadius: 10,
    paddingVertical: 10,
    paddingHorizontal: 12,
  },
  appButtonText: {
    fontSize: 18,
    color: '#fff',
    fontWeight: 'bold',
    alignSelf: 'center',
    textTransform: 'uppercase',
  },
  spacer: {
    height: 50,
  },
});

export default DisplayImage;

Answered By - Beom