App.Js

import React from 'react';
import { View, Text, Image } from 'react-native';
import { Button } from 'react-native-elements';
import { StackNavigator, SwitchNavigator } from 'react-navigation'; // Version can be specified in package.json
import { YellowBox } from 'react-native';
import store from './redux/store';
import { Provider, connect } from 'react-redux';
import firebase from 'firebase';
import ModalScreen from './components/Modal';
import HomeScreen from './components/HomeScreen';
import DetailsScreen from './components/Details';
import HeaderComponent from './components/Header';
import CharactersScreen from './screens/Characters/Characters';
import SignInScreen from './screens/SignInScreen';
import AuthLoadingScreen from './screens/AuthLoadingScreen';
import ProfileScreen from './screens/ProfileScreen';
import './ReactotronConfig';
YellowBox.ignoreWarnings([
  'Warning: componentWillMount is deprecated',
  'Warning: componentWillReceiveProps is deprecated',
  'Warning: componentWillUpdate is deprecated',
]);

const AppStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen
    },
    Details: {
      screen: DetailsScreen
    },
    Characters: {
      screen: CharactersScreen
    },
    Profile: {
      screen: ProfileScreen
    }
  },
  {
    initialRouteName: 'Home',
    /* The header config from HomeScreen is now here */
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

const AuthStack = StackNavigator({ SignIn: SignInScreen });

const SwitchStack = SwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'AuthLoading'
  }
)
export class App extends React.Component {
  render() {

  return (
    <Provider store={store}>
      <SwitchStack />
    </Provider>
    );
  }
}

export default App

Characters.js

import React, { Component } from 'react';
import { View, Text} from 'react-native';
import {Button} from 'react-native-elements';

class Characters extends Component {
    componentDidMount(){
        console.log(this.props); // Undefined
    }
    render() {
        return (
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <Text>Some Characters</Text>
                </View>
        );
    }
}

  
  export default Characters;

HomeScreen.js

import React  from 'react';
import { View, Text } from 'react-native';
import { Button } from 'react-native-elements';
import LogoTitle from './LogoTitle';
import firebase from 'firebase';
import { connect } from 'react-redux';
import { getCharacters } from '../redux/actions/index';



class HomeScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      user: null,
      characters: null
    };
  }

  

  async componentDidMount() {
    // await firebase.auth().onAuthStateChanged(user => {
    //   if (user) {
    //     console.log("Logged in", user);
    //     this.setState({ user, loading: false });
        await this.props.getCharacters();
        console.log(this.state, "{I'M A STATE}")
        console.log(this.props, "I'm PROPS")
    //   }
    //   else {
    //     console.log("Not logged in");
    //     this.setState({ loading: false });
    //   }
    // });
  }
  
    static navigationOptions = ({ navigation, navigationOptions }) => {
        const { params } = navigation.state;
        return {
            headerLeft: (<Button
                onPress={() => firebase.auth().signInWithEmailAndPassword('test@test.com', '123456')}
                title="Left"
                color="blue"
              />),
            headerTitle: "Welcome!",
            headerRight: (<Button
                onPress={() => console.log(this.state)}
                title="Right"
                color="red"
            />),
          /* These values are used instead of the shared configuration! */
          headerStyle: {
            backgroundColor: navigationOptions.headerTintColor,
          },
          headerTintColor: navigationOptions.headerStyle.backgroundColor,
        };
      };
     render() {
       const currentUser = firebase.auth().currentUser
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Home Screen</Text>
          <Button
            title="Go to details"
            onPress={() => this.props.navigation.navigate('Details', {
              itemId: 29,
              otherParam: 'something'
            })}
          />
          <Button
            title="Characters"
            onPress={() => this.props.navigation.navigate('Characters')
            }
          />
          <Button
            title="Log Me"
            onPress={() => this.props.getCharacters()}
          />
          <Button
            title="Log Me"
            onPress={() => console.log(this.props)}
          />
        </View>
      );
    }
}

const mapDispatchToProps = dispatch => {
  return {
    getCharacters: characters => dispatch(getCharacters())
  };
};
  


export default connect(null, mapDispatchToProps)(HomeScreen);