Problem displaying photo on new screen - React

Issue

I created two files ( profile.js and postImage.js ). The profile.js screen displays a list of photos, similar to the Instagram profile screen. When the user clicked on the photo, the same photo would automatically open in a larger size, but on the postImage.js screen. In the app.js file I imported both screens, but when I try to open the photo, I get an error:

Console Error
The action 'NAVIGATE' with payload {"name":"./postImage","params":{"image":18}} was not handled by any navigator.

Do you have a screen named './postImage'?

If you're trying to navigate to a screen in a nested navigator, see ........

This is what the code from the profile.js screen looks like:

const images = [
  require('../../assets/Users/admin.jpg'),
];

const openImage = (image) => {
  navigation.navigate('./postImage', { image });
};

.........

<View style={styles.Gallery}>
    <ScrollView contentContainerStyle={styles.imageContainer}>
        {[...Array(Math.ceil(images.length / 3))].map((_, i) => (
            <View key={i} style={styles.imageRow}>
                {images.slice(i * 3, i * 3 + 3).map((image, index) => (
                    <TouchableOpacity
                        key={index}
                        onPress={() => openImage(image)}
                        style={styles.imageWrapper}
                    >
                        <Image source={image} style={styles.image} />
                    </TouchableOpacity>
                ))}
            </View>
        ))}
    </ScrollView>
</View>

The code I typed in the postImage.js screen:

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

const PostImage = ({ route }) => {

  const { image } = route.params;

  return (
    <View style={styles.container}>
      <Image source={image} style={styles.image} resizeMode="contain" />
    </View>
  );
};

// Styles and other configurations

export default PostImage;

While in the app.js file I imported screen and called:

import PostImage from './screens/profile/postImage';

............

<Stack.Screen
    name='PostImage'
    component={PostImage}
    options={{
        headerShown: true,
        headerBackVisible: true, // ide the back arrow on the Profile screen
        headerTitle: 'Post Image',
        headerStyle: {
            backgroundColor: '#129990',
        },
        headerTintColor: '#ffffff',
    }}
/>

Solution

The PostImage page/screen is named "PostImage", e.g. from the name='PostImage' prop.

<Stack.Screen
  name='PostImage'
  component={PostImage}
  options={{
    headerShown: true,
    headerBackVisible: true,
    headerTitle: 'Post Image',
    headerStyle: {
      backgroundColor: '#129990',
    },
    headerTintColor: '#ffffff',
  }}
/>

Update the handler to navigate to "PostImage".

const openImage = (image) => {
  navigation.navigate("PostImage", { image });
};

Answered By - Drew Reese