Stack Navigator not showing the screens - react-native

Question

So I've been trying to get the stack navigator to work. According to the console.log('Main') I do actually enter the main screen. Which is what I want. However, the screen just gives me a blank screen with only the header showing. I have no idea what the issue is. I thought it could be with the styling but I've deleted and changed it and nothing seems to be working as well. How I have been navigating was simply doing < ScreenName />. But that won't work because I'm trying to navigate around with buttons as well.
Screenshot of login
Main
App.js
renderComponent() {
if (this.state.loggedIn) {
return (
<Container />
)
} else {
return (
<LoginForm />
)
}
}
render() {
return (
<View>
<Header title='InTouch' />
{this.renderComponent()}
</View>
);
}
}
Screen Container
import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { View, Button } from 'react-native';
import Main from './src/components/Main'
import Upload from './src/components/Upload'
const NavigationStack = createStackNavigator({
Main: {screen: Main },
Upload: {screen: Upload},
},{
navigationOptions: {
gesturesEnabled:false
}
})
const Container = createAppContainer(NavigationStack);
export default Container;
Main.js
export default class Main extends Component<Props> {
state = { currentUser: null}
componentDidMount() {
const { currentUser } = firebase.auth()
this.setState({ currentUser })
}
render() {
console.log("Main")
const { currentUser } = this.state
return (
<View>
<Text>Hello</Text>
<Button title = "Go to upload story" onPress = {() => this.props.navigation.navigate('Upload')} />
<Button
title="Sign out"
onPress={() => firebase.auth().signOut()} />
</View>
);
I just want the Main to show up.

Answer 1

Login screen should be under the stack navigation, and after logging in you can navigate to other screen
try doing it like this
const NavigationStack = createStackNavigator({
Login: {screen: Login }
Main: {screen: Main },
Upload: {screen: Upload},
},{
navigationOptions: {
gesturesEnabled:false
}
})
alternatively you can create separate navigation for login and other screens using switch
const HomeNavigation = createStackNavigator({
Main: {screen: Main },
Upload: {screen: Upload},
},{
navigationOptions: {
gesturesEnabled:false
}
})
const RootNavigation = createSwitchNavigator({
Login: {screen: Login }
Home: {screen: HomeNavigation }
});
and in App.js do
render() {
return (
<RootNavigation/>
);
}