Getting this.props.someFunction as undefined when calling a redux function with react-navigation stack navigator react-native

Question

I am not sure if this is an issue with my code, or not but I have a problem when trying to access a redux dispatch function which is connected to component over react-navigation stack navigator I get an error saying:

TypeError: storeUser is not a function

But when calling component without stack navigator I can access the dispatch function.

Code for calling dispatch function with stack navigator:

UnAuthenticatedStack Stack Navigator :

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack'
import { Login } from '../../../screens/Login';
import { Register } from '../../../screens/Register';

const Stack = createStackNavigator();


export function UnAuthenticatedStack({navigation, route}) { 
    return (
      <Stack.Navigator key="unauthenticated-stack" initialRouteName="Login" screenOptions={{ header: () => { return null } }}>
          <Stack.Screen name="Login" component={Login}></Stack.Screen>
          <Stack.Screen name="Register" component={Register}></Stack.Screen>
      </Stack.Navigator>
  );
}

App:

import 'react-native-gesture-handler';
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
import { connect } from 'react-redux'
import Commands from './services/data/local/reducers/Commands';
import { NavigationContainer } from '@react-navigation/native'
import {UnAuthenticatedStack} from './services/navigation/stack-navigation/UnAuthenticatedStack'

class App extends React.Component {

  constructor(props) {
    super(props)
    //console.disableYellowBox = true;
  }

  render() {
    return (
        <NavigationContainer>
          <UnAuthenticatedStack></UnAuthenticatedStack>
        </NavigationContainer>
      );
  }
};



const mapStateToProps = (state) => {
  return {
    user: state.user,
    settings: state.settings
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    storeUser: (user) => dispatch({type: Commands.list.store_user_data, payload: user}),
    setLang: (lang) => dispatch({type: Commands.list.set_language, payload: lang})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Login:

import React, { Component } from 'react';
import { View, ScrollView, KeyboardAvoidingView, Text, Image } from 'react-native';
import { connect } from 'react-redux'

export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
        lang: "en"
    };
  }

  render() {
    const {storeUser} = this.props
    console.log(storeUser)
    return (
        <View><Text>This is login screen</Text></View>
     )

  }

};

const mapDispatchToProps = (dispatch) => {
  return {
    storeUser: (userSessionData) => dispatch({type: Commands.list.store_user_data, payload: userSessionData})
  }
}

const mapStateToProps = (state) => {
  return {
    user: state.user
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

And this is the code when I call the component directly without wrapping it on NavigationContainer:

App:

import 'react-native-gesture-handler';
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
import { connect } from 'react-redux'
import Commands from './services/data/local/reducers/Commands';
import { NavigationContainer } from '@react-navigation/native'
import {UnAuthenticatedStack} from './services/navigation/stack-navigation/UnAuthenticatedStack'

class App extends React.Component {

  constructor(props) {
    super(props)
    //console.disableYellowBox = true;
  }

  render() {
    return (
        <Login></Login>
      );
  }
};

Update: I tried to log storeUser at first scenario and i get it as undefined but in second scenario when calling Login component on App component I can see the storeUser defined on the output.

Answer 1

After hours of trials and debugging, it turns out that I was importing Login screen in UnAuthenticatedStack stack navigator as:

import { Login } from '../../../screens/Login'

when it should've been the following since I am exporting Login component with export default :

import Login from '../../../screens/Login'