How to pass value between Screens in React Native ?

// Import necessary components from React Native
import {
    Button,     // For creating buttons
    StyleSheet, // For creating styles
    Text,       // For displaying text
    TextInput,  // For creating input fields
    View        // For creating container views
} from 'react-native';

// Import React and useState hook for state management
import React, { useState } from 'react';

// Import useNavigation hook for navigation between screens
import { useNavigation } from '@react-navigation/native';

// Define the HomeScreen functional component
const HomeScreen = () => {
    // Declare a state variable 'message' with an initial value of an empty string
    const [message, setMessage] = useState('');

    // Get the navigation object using the useNavigation hook
    const navigation = useNavigation();

    // Function to navigate to the 'Message' screen and pass the 'message' as a parameter
    const goToMessageScreen = () => {
        navigation.navigate('Message', {
            message, // Pass the current value of 'message' to the 'Message' screen
        });
    };

    // Render the UI of the HomeScreen
    return (
        <View style={styles.container}>
            {/* Display the title */}
            <Text style={styles.title}>GeeksforGeeks</Text>

            {/* Input field for entering a message */}
            <TextInput
                placeholder="Enter your message here" // Placeholder text for the input
                value={message} // Bind the input value to the 'message' state
                onChangeText={(text) => setMessage(text)} // Update the 'message' state on text change
                style={styles.input} // Apply styles to the input field
            />

            {/* Button to submit the message and navigate to the 'Message' screen */}
            <Button
                title="Submit" // Button label
                onPress={goToMessageScreen} // Call the goToMessageScreen function on press
                color="green" // Button color
            />
        </View>
    );
};

// Export the HomeScreen component as the default export
export default HomeScreen;

// Define styles for the HomeScreen component
const styles = StyleSheet.create({
    container: {
        flex: 1, // Take up the full height of the screen
        backgroundColor: '#fff', // Set the background color to white
        alignItems: 'center', // Center align items horizontally
    },
    title: {
        fontSize: 40, // Set font size for the title
        fontWeight: 'bold', // Make the title bold
        color: 'green', // Set the title color to green
        marginTop: 50, // Add margin to the top
    },
    input: {
        width: '75%', // Set the width of the input field to 75% of the container
        padding: 10, // Add padding inside the input field
        marginTop: 20, // Add margin to the top
        color: '#000', // Set the text color to black
    },
});

// Import necessary components and modules from 'react-native' and 'react'
import {
    StyleSheet, // For creating styles
    Text,       // For displaying text
    View        // For creating container views
} from 'react-native';
import React from 'react'; // Import React library
import { useRoute } from '@react-navigation/native'; // Import useRoute hook for accessing route parameters

// Define the MessageScreen functional component
const MessageScreen = () => {
    // Get the current route object using the useRoute hook
    const route = useRoute();

    // Render the UI
    return (
        <View style={styles.container}>
            {/* Display the message passed via route parameters */}
            <Text style={styles.title}>{route.params.message}</Text>
        </View>
    );
};

// Export the MessageScreen component as the default export
export default MessageScreen;

// Define styles for the component
const styles = StyleSheet.create({
    container: {
        flex: 1, // Take up the full screen
        backgroundColor: '#fff', // Set background color to white
        alignItems: 'center', // Center items horizontally
        justifyContent: 'center', // Center items vertically
    },
    title: {
        fontSize: 25, // Set font size
        fontWeight: 'bold', // Make the text bold
        color: 'green', // Set text color to green
        marginTop: 50, // Add margin at the top
    },
});

// Import the NavigationContainer component from the React Navigation library
import { NavigationContainer } from '@react-navigation/native';
// Import the createNativeStackNavigator function to create a stack navigator
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// Import the HomeScreen component
import HomeScreen from './HomeScreen';
// Import the MessageScreen component
import MessageScreen from './MessageScreen';


// Create a stack navigator instance
const Stack = createNativeStackNavigator();

// Define the main App component
export default function App() {
  return (
    // Wrap the entire navigation structure in a NavigationContainer
    <NavigationContainer>
      {/* Define the stack navigator */}
      <Stack.Navigator
        // Set default screen options for all screens in the stack
        screenOptions={{
          // Customize the header background color
          headerStyle: {
            backgroundColor: 'green',
          },
          // Set the header text color
          headerTintColor: '#fff',
        }}>
        {/* Define the Home screen in the stack */}
        <Stack.Screen name="Home" component={HomeScreen} />
        {/* Define the Message screen in the stack */}
        <Stack.Screen name="Message" component={MessageScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}