React navigation broken within function call - reactjs

Question

I'm new to react native and I can only seem to find documentation for how to navigate between screens in the return() method for react native. I'm wondering what the syntax is for navigation in a function call. The line I am having trouble with is line 37 (in the login function).
import React, {Component} from 'react';
import {
View,
Text,
TouchableHighlight,
TouchableOpacity,
TextInput
} from 'react-native';
import Input from './Input';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {firebaseApp} from './App';
import {Tabs} from './Router';
export default class LoginScreen extends Component {
constructor(props) {
super(props)
this.state = {
email: '',
password: '',
status: ''
}
this.login = this.login.bind(this);
}
login(){
console.log("Logging in");
firebaseApp.auth().signInWithEmailAndPassword(this.state.email, this.state.password).catch(function(error) {
console.log(error.code);
console.log(error.message);
})
this.props.navigation.navigate('TabNav');
console.log("Navigate to Home");
}
render() {
var styles = require('./Styles');
const {navigate} = this.props.navigation;
return(
<View style={styles.loginContainer}>
<Text style={styles.loginHeader}>PRINCETON EVENTS</Text>
<TextInput
style={styles.loginInput}
placeholder="Email"
autoCapitalize='none'
onChangeText={(text) => this.setState({email: text})}
value={this.state.email}
returnKeyType='next'/>
<TextInput
secureTextEntry
style={styles.loginInput} placeholder="Password"
onChangeText={(text) => this.setState({password: text})}
value={this.state.password}
autoCapitalize='none'
returnKeyType='go'/>
<TouchableOpacity style={styles.loginButton}>
<Text style={styles.loginText} onPress={this.login}>LOGIN</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.loginButton}
onPress = {() => navigate('CreateAccount')}>
<Text style={styles.loginText}> CREATE ACCOUNT </Text>
</TouchableOpacity>
</View>
);
}
}
This is Router.js
import React from 'react';
import {StackNavigator, TabNavigator} from 'react-navigation';
import InputScreen from './InputPage';
import HomeScreen from './Home';
import DetailsScreen from './Details';
import MyEventsScreen from './MyEvents';
import EditScreen from './EditPage';
import MapScreen from './Map';
import CreateAccountScreen from './CreateAccount';
import LoginScreen from './Login';
export const MyEventsStack = StackNavigator({
MyEvents: {
screen: MyEventsScreen,
navigationOptions: {
header: null
}
},
MyEventsDetails: {
screen: EditScreen,
navigationOptions: {
header: null,
},
},
});
export const EventsStack = StackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
header: null,
},
},
Details: {
screen: DetailsScreen,
navigationOptions: {
header: null,
},
},
});
export const Tabs = TabNavigator({
Home: {screen: EventsStack},
EventMap: {screen: MapScreen},
Input: {screen: InputScreen},
MyEvents:{screen: MyEventsStack},
},{
tabBarOptions: {
activeTintColors: '#e91e63',
}
});
export const LoginNav = StackNavigator({
Login: { screen: LoginScreen,
navigationOptions: {
header: null,
},
},
CreateAccount: { screen: CreateAccountScreen,
navigationOptions: {
header: null,
}
},
});
/*export const SuccessLoginNav = StackNavigator({
Main: { screen: Tabs,
navigationOptions: {
header: null,
}
},
});*/
export const Root = StackNavigator({
TabNav: {
screen: Tabs,
}
}, {headerMode: 'none'});

Answer 1

In login, you're declaring a function but neither invoking it or assigning it to anything:
() => this.props.navigation.navigate('Home');
Essentially that line does nothing. Try removing the anonymous function declaration:
this.props.navigation.navigate('Home');