Property 'navigation' is missing in type '{}' but required in type '{ navigation: any; }' in react native

I have just created a component named as FirstComponent and I want to display this FirstComponent in HomePage component.

code :-
code is here

But it was showing the error Property 'navigation' is missing in type '{}' but required in type '{ navigation: any; }' . Note I am using latest ReactNative which supports tsx

Currently, you are saying that navigation prop is required when you call <FirstComponent /> but you are not passing the navigation prop to it.

So, the solution would be to add navigation prop while calling it.

<FirstComponent navigation={navigation} />

But according to me, Instead of passing the navigation prop to the FirstComponent, what you can do is create a prop called onPress in the FirstComponent which is a function that has to execute when user presses the button in the FirstComponent.

So, after refractoring, the FirstComponent should look something like this

import { View, Button } from 'react-native';

function FirstComponent({ onPress }: { onPress: () => void }) {
  return (
    <View>
      <Button title="Login" onPress={onPress} />
    </View>
  );
}

export default FirstComponent;

And your HomeComponent would look something like this

import { View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import FirstComponent from './components/FirstComponent';

export default function Home({ navigation }: { navigation: any }) {
  return (
    <View style={styles.container}>
      // Notice this, I passed a function into FirstComponent 
      // instead of passing the whole navigation object. 
      // In this way I have extracted the navigation logic 
      // out of the component and made it independent.

      <FirstComponent onPress={() => navigation.navigate('Second_Screen')} />
    </View>
  );
}