this.props in component does not contain navigation property - reactjs

Question

I want to navigate from one screen to another by this.props.navigation.navigate('Second Screen') but property 'navigation' does not contain in the props. Get error:
Property 'navigation' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'
import React, { Component } from "react";
import styles from "./style";
import { Keyboard, Text, View, TextInput, TouchableWithoutFeedback, KeyboardAvoidingView } from 'react-native';
import { Button } from 'react-native-elements';
export default class SignInScreen extends Component {
render() {
return (
<KeyboardAvoidingView style={styles.containerView} behavior="padding">
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.loginScreenContainer}>
<View style={styles.loginFormView}>
<Text style={styles.logoText}>Book Market</Text>
<TextInput placeholder="Email" placeholderTextColor="#c4c3cb" style={styles.loginFormTextInput} />
<TextInput placeholder="Password" placeholderTextColor="#c4c3cb" style={styles.loginFormTextInput} secureTextEntry={true} />
<Button
buttonStyle={styles.loginButton}
onPress={this.props.navigation.navigate('Home')}
title="Login"
/>
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
);
}
}

Answer 1

You can only access it through the parent element. Pass navigation as a prop to its children to use it
Eg:
<Child navigation={this.props.navigation} />

Answer 2

You can do what was already suggested, pass the navigation prop down to your target component
Ex:
<TargetComponent navigation={this.props.navigation} />
Or you can use withNavigation HOC from react-natigation.
Ex:
import {withNavigation} from 'react-navigation'
...
export default withNavigation(Child)
Hope it helps.

Answer 3

Okay, I find a solution. At first, I need to change extends of my class like
export default class SignInScreen extends Component<{navigation: any}>
Then change onPress action:
<Button
buttonStyle={styles.loginButton}
onPress={() => this.onSignInPress()}
title="Login"
/>
private onSignInPress() {
this.props.navigation.navigate('Home');
}

Answer 4

I know this is an old question, but since the problem of undefined navigation property still exists at least for those who use EXPO managed approach, I'll write my solution hopefully it'll save someone's day.
After searching for hours I found no way to fix this bug and find a way to add navigation property to this.props. Finally, I solved the problem by using NavigationContext in this way:
<NavigationContainer>
<NavigationContext.Provider>
<Stack.Navigator>
...
</Stack.Navigator>
</NavigationContext.Provider>
</NavigationContainer>
Then get the navigation in a consumer:
<NavigationContext.Consumer>
{navigation => {
return (
<Button onPress={() => this.onButtonPress(navigation)} />
);
}}
</NavigationContext.Consumer>
And finally:
onButtonPress(navigation) {
try {
navigation.navigate(RouteNames.FORGOTTEN_PASSWORD_SCREEN);
} catch (e) {
this.setState({ errors: [e.message] });
}
}