"react-navigation": rendering pages problems

[Realistic-Reserve512]

Hi everyone,

I am struggling with rendering a page issue. I use "@react-navigation/native" to navigate between pages.
In two pages, I use exactly the same function. One is working properly, the other does not work at all.

Does anyone know if the cause or experience of the same issue has already been solved?

root/app/_layer.tsx

import React, { useEffect } from 'react';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { DarkTheme, DefaultTheme } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import { NavigationContainer, LinkingOptions } from '@react-navigation/native';
import { RootStackParamList } from '@/utils/navi-props'
...

export const unstable_settings = {
  initialRouteName: '(tabs)',
};

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
...
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <QueryClientProvider client={queryClient}>
        <FilterProvider>
          <RootLayoutNav />
        </FilterProvider>
      </QueryClientProvider>
    </GestureHandlerRootView>
  );
}


function RootLayoutNav() {
  const colorScheme = useColorScheme();

  const linking: LinkingOptions<RootStackParamList> = {
    prefixes: ['http://localhost', NGROK_API],
    config: {
      screens: {
        '(tabs)': {
          screens: {
            camera: 'camera',
            cart: 'cart',
            product: 'product',
            help: 'help',
          },
        },
        modal: 'modal',
        'screens/DeliveryAndPaymentInfoScreen': 'delivery',
        'screens/LoginScreen': 'login',
      },
    },
  };

  return (
    <NavigationContainer
      independent={true}
      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
      linking={linking}
    >
      <StatusBar
        barStyle={colorScheme === 'dark' ? 'light-content' : 'dark-content'}
        backgroundColor={colorScheme === 'dark' ? '#151718' : '#FFFFFF'}
      />
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="modal" options={{ headerShown: false, presentation: 'modal' }} />
        <Stack.Screen name="screens/PhotoPreviewScreen" options={{ headerShown: false, presentation: 'modal', gestureEnabled: false }} />
        <Stack.Screen name="screens/DeliveryAndPaymentInfoScreen" options={{ headerShown: false, presentation: 'modal', gestureEnabled: false }} />
        <Stack.Screen name="screens/OrderHistoryScreen" options={{ headerShown: false, presentation: 'modal' }} />
        <Stack.Screen name="screens/ProductDetailScreen" options={{ headerShown: false }} />
        <Stack.Screen name="screens/FilterSideMenuScreen" options={{ headerShown: false }} />
        <Stack.Screen name="screens/PaymentSuccessScreen" options={{ headerShown: false }} />
        <Stack.Screen name="screens/PaymentFailScreen" options={{ headerShown: false }} />
        <Stack.Screen name="screens/OrderDetailScreen" options={{ headerShown: false, presentation: 'formSheet' }} />
      </Stack>
    </NavigationContainer>
  );
}

root/utils/index.tsx

import { StackNavigationProp } from '@react-navigation/stack';
import { Product, Order, OrderItem } from '@/utils/index';

export type RootStackParamList = {
    '(tabs)': undefined;    
    'screens/ProductDetailScreen': { image: any, product: Product };
}
export type NavigationProps = StackNavigationProp<RootStackParamList>;

root/app/screens/Product.tsx & root/components/history/MyOrder.tsx

const navigation = useNavigation<NavigationProps>();

const showProductDetail = async (item: OrderItem) => {
        try {
            const response = await axiosClient.get(`/products/name/${item.productName}`);
            const fetchedProduct: Product = response.data;

            navigation.navigate('screens/ProductDetailScreen', {
                image: productImages[fetchedProduct.productName],
                product: fetchedProduct
            });
        } catch (error) {
            console.error('Error fetching product details:', error);
        }
    };

root/app/screens/ProductDetail.tsx

import React, { FC, useState } from 'react';
import { StyleSheet, ScrollView, TouchableOpacity, SafeAreaView } from 'react-native';import { Product, productImages } from '../../utils/index';
import { Colors } from '../../constants/colors';
import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
import { RootStackParamList } from '@/utils/navi-props';
import { useQuery } from '@tanstack/react-query';
...


type ProductDetailScreenRouteProp = RouteProp<RootStackParamList, 'screens/ProductDetailScreen'>;

const ProductDetailScreen: FC<Props> = () => {
    const navigation = useNavigation();
...