logging props shows "navigation" key but props.navigation = undefined

[adrianbartyczak]

Description

Logging props shows the functions of the "navigation" node. Logging props.navigation however shows undefined.

And I don't know why but adding JSON.stringify(props) within console.log() shows an empty object.

E.g.
console.log(props) =
{"props": {"navigation": {"addListener": [Function addListener], "canGoBack": [Function canGoBack], "dangerouslyGetParent": [Function dangerouslyGetParent], ...}, "route": {"key": "Log In-B7zJiA6C2vAed-BE_c3lM", "name": "Log In", "params": undefined}}}

console.log(props.navigation) =
undefined

console.log(JSON.stringify(props)) =
{"props":{"navigation":{},"route":{"key":"Log In-B7zJiA6C2vAed-BE_c3lM","name":"Log In"}},"data":{}}

React Native version:

System:
OS: Linux 5.8 Arch Linux
CPU: (8) x64 Intel(R) Core(TM) i7-8705G CPU @ 3.10GHz
Memory: 2.25 GB / 15.36 GB
Shell: 5.0.18 - /bin/bash
Binaries:
Node: 14.13.0 - /usr/bin/node
Yarn: 1.22.5 - /usr/bin/yarn
npm: 6.14.7 - /usr/bin/npm
Watchman: 4.9.0 - /usr/bin/watchman
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 11.0.8 - /usr/bin/javac
Python: 3.8.5 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.3 => 0.63.3
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

1. Run console.log(props)
2. Run console.log(props.navigation)
3. Run console.log(JSON.stringify(props))

Expected Results

I expect the props.navigation node to contain functions and variables.

Code example:

index.js

import React from 'react';
import { AppRegistry } from 'react-native';
import App from './src/App';
import { name as appName } from './app.json';

const Main = () => (
  <App />
);

AppRegistry.registerComponent(appName, () => Main);

App.js

import 'react-native-gesture-handler';
import React from 'react';
import MainStackNavigator from './navigation/MainStackNavigator';

const App = () => {
  return (
    <MainStackNavigator/>
  );
};

export default App;

MainStackNavigator.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../platform/home/HomeScreen';
import LogInScreen from '../platform/log-in/LogInScreen';

const Stack = createStackNavigator();

const MainStackNavigator = (props) => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName='Log In'>
        <Stack.Screen
          name='Log In'
          component={LogInScreen}/>
        <Stack.Screen
          name='Home'
          component={HomeScreen}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default MainStackNavigator;

And in my component I just run the console.log statements.