React Native TypeScript Stack Navigator Usage

Question

I'm not writing here to ask a question... I'm new to React Native and didn't know TypeScript or JavaScript at all. In React Native, stack screens were working in JS but not in TSX. I did a long research, but I could not come across a simple application designed to understand the logic. I wanted to leave one here so that anyone who needs it like me can look at it without having to search for hours. Here are my codes.

App.tsx //

import NavigationRouter from './src/navigation/types/NavigationRouter';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      <NavigationRouter/>
    </NavigationContainer>
  );
}

NavigationRouter.tsx // Our Navigation Screen

import { StyleSheet } from 'react-native'
import React from 'react'
import {createNativeStackNavigator} from "@react-navigation/native-stack";
import Home from '../../scrrens/Home';
import Profile from '../../scrrens/Profile';

const Stack = createNativeStackNavigator<RootStackParamList>();

const NavigationRouter = () => {
  return (
    <Stack.Navigator>
        <Stack.Screen name="Home" component={Home}/>
        <Stack.Screen name="Profile" component={Profile}/> 
    </Stack.Navigator>
  )
}

export default NavigationRouter

const styles = StyleSheet.create({})

StackParamList.ts // Our type folder

type RootStackParamList = {
    Home: undefined;
    Profile: undefined;
  };

Home.tsx

import { StyleSheet, Text, View, Button } from 'react-native'
import React from 'react'
import {NativeStackScreenProps} from "@react-navigation/native-stack"; 

type HomeProps = NativeStackScreenProps<RootStackParamList,'Home'>;

const Home:React.FC<HomeProps> = ({navigation}) => {
  return (
    <View>
      <Text>Home</Text>
      <Button 
        title='Profil'
        onPress= { () => navigation.navigate('Profile')}/>
    </View>
  )
}

export default Home

const styles = StyleSheet.create({})

Profile.tsx

import { StyleSheet, Text, View,Button } from 'react-native'
import React from 'react'
import {NativeStackScreenProps} from "@react-navigation/native-stack"; 

type ProfileProps = NativeStackScreenProps<RootStackParamList, 'Profile'>;

const Profile:React.FC<ProfileProps> = ({navigation}) => {
  return (
    <View>
      <Text>Profil</Text>
      <Button 
        title='geridon'
        onPress= { () => navigation.navigate('Home')}/>
    </View>
  )
}

export default Profile

const styles = StyleSheet.create({})

Explanation;

1. App.tsx We must call our navigations in '<NavigationContainer>' if dont they are not navigatin.

2. NavigationRouter.tsx We need this for screens can know each other. Additionally, by casting types to this stack, we can write them appropriately in TypeScript. const Stack = createNativeStackNavigator<RootStackParamList>();

3. StackParamList Type for screen and props search for more type script props

4. Home|Profile.tsx we need to define new type like "type HomeProps = NativeStackScreenProps<RootStackParamList,'Home'>;" We assign the NativeStackScreenProps to the "home" within our RootStackParamList types then we can cast it out our const "Home:React.FC<HomeProps>" like this

I try to make a navigation whit react native but when i try to access navigation.navigate it didnt work so i m noticed i m useing type script and it is type secure i need to define the type befor usage .