react native this.props.navigation is undefined in main APP - react-native

Question

I'm trying to use "this.props.navigation" in my main react native App but it is undefined. In my others components included with TabNavigator and ScreenNavigator it work.
My App.js
const MyTabView = TabNavigator(
{
Projects: { screen: Projects },
Explorer: { screen: Explorer },
Profil: { screen: Profil }, ...
}
);
const StackView = StackNavigator(
{
global: {
screen: MyTabView,
headerMode: "none",
header: null,
navigationOptions: {
header: null
}
},
TermsOfUse: { screen: TermsOfUse },
LegalNotice: { screen: LegalNotice },
Options: { screen: Options }, ...
}
);
export default class App extends React.PureComponent {
constructor (props) {
super(props);
console.log(this.props.navigation); // <---------- UNDEFINED
}
render() {
return (
<Provider store={store}>
<PersistGate
loading={<ActivityIndicator />}
persistor={persistor}>
<View style={styles.fullScreen}>
<StackView />
<Tutorial navigation={this.props.navigation} /> // <---------- this.props.navigation is UNDEFINED
</View>
</PersistGate>
</Provider>
);
}
}

Answer 1

navigation prop is only available on components that are in navigation stack or child components that are using withNavigation HOC.

Answer 2

Your App class is not included in the Navigator stack, due to which, the navigator class cannot provide any navigation props to it, that is why you are getting an undefined error because the navigation object doesn't exist.
Also if you need to open <Tutorial/> as a first screen, include it as the first element in the StackNavigator. That ways, it'll be always called first.
PS: You can additionally provide navigation={this.props.navigation} element to different components, which does not have to be included in the navigator class. For example, you need to open a dropdown element, which provides a sign out option that navigates to a home screen. In this use case, it'll be better to provide the navigation props as you have provided it in the question. But care needs to be taken, that the class providing the prop should have the object present
EDIT
According to your requirement, you need to display a tutorial for each screen that you open. You can do it via two approaches.
Your way - You can declare it in the stack navigator. But your <Tutorial/> component will contain multiple conditions to check for the route and display the appropriate data ( that's what I can think of right now ).
You can declare a common component that only shows the message in a modal. You can then declare an optional prop for each component, and in each of your components, you can check if this optional prop exists, you can show your common display <Tutorial/> component.
This is what I can think of currently. Will update if I have more thoughts :)
Hope this answers.