How to use props in React Native Navigation

Question

I know that my issue can be solved by using props, but I don't know what exactly should I do. I'm making a navigation between screens and my buttons are individual components, I have no problem when I just copying code of the buttons and paste it to the main screen, but I want to have them separetely, however in such a case - navigation isn't working. I want to navigate you to the "About" screen when you click the button.

Home Screen

import { View, Text, ImageBackground, StyleSheet } from "react-native";
import React from "react";

const image = { uri: "https://i.ibb.co/JtnTCS1/BG.png" };

// State
import { useState } from "react";

// Fonts
import AppLoading from "expo-app-loading";
import { useFonts } from "expo-font";

// Components
import PlayButton from "../components/PlayButton";
import AboutButton from "../components/AboutButton";
import SettingsButton from "../components/SettingsButton";

// Navigation
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

// font
import { FONTFAMILY } from "../theme";

// On Press

const Home = () => {
  const [fontsLoaded] = useFonts({
    Musketeer: require("../assets/fonts/Pixel-Musketeer.otf"),
  });

  if (!fontsLoaded) return null;

  return (
    <View className="bg-mainRed flex-1 justify-center items-center flex-col">
      <ImageBackground
        source={image}
        resizeMode="cover"
        className="flex-1 justify-center w-screen"
      >
        <View className="mb-16">
          <Text
            style={FONTFAMILY.musketeer}
            className="text-brightGreen text-notsobig text-center mb-16"
          >
            KING'S DUNGEON
          </Text>
          <View className="flex flex-col">
            <PlayButton></PlayButton>
            <AboutButton></AboutButton>
            <SettingsButton></SettingsButton>
          </View>
          <Text
            style={FONTFAMILY.musketeer}
            className="text-brightGreen text-small mt-10 text-center"
          >
            Made By Ruslan Makhamtov
          </Text>
        </View>
      </ImageBackground>
    </View>
  );
};

const styles = StyleSheet.create({
  ForText: {
    fontSize: "75px",
  },
});

export default Home;

About Screen

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

// font
import { FONTFAMILY } from "../theme";
import AppLoading from "expo-app-loading";
import { useFonts } from "expo-font";

const About = () => {
  const [fontsLoaded] = useFonts({
    Musketeer: require("../assets/fonts/Pixel-Musketeer.otf"),
  });

  if (!fontsLoaded) return null;

  return (
    <View className="bg-mainRed flex-1">
      <Text>About</Text>
    </View>
  );
};

export default About;

About Button

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

// font
import { FONTFAMILY } from "../theme";

// OnPress

const PlayButton = ({ navigation }) => {
  const OnPress = () => navigation.navigate("About");
  return (
    <View className="mt-6" onPress={OnPress}>
      <TouchableOpacity className="flex justify-center items-center">
        <View className="bg-darkGreen border-solid border-4 border-darkGreen rounded w-9/12">
          <View className="bg-darkGreen border-solid border-4 border-green rounded justify-center items-center h-16">
            <Text
              style={FONTFAMILY.musketeer}
              className="text-greenText text-middleSize"
            >
              About
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default PlayButton;

Answer 1

If HomeScreen is a screen defined inside a navigator, then the navigation object will be passed to it as props. You can then pass it down to its children.

const Home = ({navigation}) => {

    ...
    
    <AboutButton navigation={navigation} />
}

It might make sense here to encapsulate the navigation logic inside the button component itself in order to prevent changing it by other components. In this case you could use the useNavigation hook. No props involved here.

function AboutButton() {
    const navigation = useNavigation()

    ...
}