importing a screen from the same JS file - react-native

Question

I have consulted every question in StackOverflow regarding this problem with no success. I continuously get the following error `Route 'Home' should declare a screen.
This error seems to indicate that I must import a component into my working file if I want to use it as a screen, is that the case? If so, Why? That's probably what's wrong with my code, otherwise, I'm not sure what is wrong here: I would like to understand why this isn't working, I have consulted multiple guides on the subject.
my index.android.js:
import './app/index.js'
my index.js (not in full):
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Button, Image, TextInput }
from 'react-native';
import { StackNavigator } from 'react-navigation';
const RallyMobileNavigator = StackNavigator({
Home: { screen: RallyMobile },
LogIn: { screen: LogIn }
},{
initialRouteName: 'Home'
});
class RallyMobile extends Component {
static navigationOptions = {
title: 'Welcome',
};
state = {
initialPosition: {},
lastPosition: {},
userData: [],
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Button
onPress={() => navigate('LogIn')}
title='Sign In'
/>
</View>
<View style={styles.EventListContainer}>
<EventList
location={this.state.lastPosition.location ?
this.state.lastPosition.location :
this.state.initialPosition.location}
/>
</View>
</View>
);
};
};
class LogIn extends Component {
state = {
userName: '',
password: ''
}
static navigationOptions = {
title: 'Sign In',
};
logInUser = () => {
console.log("test");
}
render() {
return(
<View>
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Username"
onChangeText={(text) => this.setState({userName})}
/>
<TextInput
style={{height: 40}}
placeholder="Password"
onChangeText={(text) => this.setState({password})}
/>
</View>
<View>
<button
onPress={logInUser()}
title='Sign In'
/>
</View>
</View>
)
}
}
AppRegistry.registerComponent('RallyMobile', () => RallyMobileNavigator);

Answer 1

Move
const RallyMobileNavigator = StackNavigator({
Home: { screen: RallyMobile },
LogIn: { screen: LogIn }
},{
initialRouteName: 'Home'
});
To just above
AppRegistry.registerComponent('RallyMobile', () => RallyMobileNavigator);
Credit:
https://github.com/react-community/react-navigation/issues/571#issuecomment-284207331