react navigation not rendering screens - react-native

Question

I currently building a simple react native app which has two screens. I am using a react navigation to navigate between screens and when I tried following this guide https://reactnavigation.org/docs/en/hello-react-navigation.html, It doesn't render anything, just displaying a blank screen. Maybe I'm missing something that's why it doesn't render. Here's my js files:
App.js
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Login from './src/components/screens/login';
import Order from './src/components/screens/order';
const AppNavigator = createStackNavigator(
{
Login: Login,
Order: Order
},
{
initialRouteName: 'Login',
}
);
export default class Sales extends Component {
render() {
return (
<View>
<App />
</View>
);
}
}
login.js
class Login extends Components {
static navigationOptions = {
headerShown: false,
};
render() {
return(
<View>
<Button title="Login"
onPress={() => this.props.navigation.navigate('Order')}
/>
</View >
);
}
}
order.js
class Order extends Component {
static navigationOptions = {
headerShown: false,
};
render() {
return (
<View>
<View style={styles.button}>
<Button
title="Create Order"
color='#65639E'
/>
</View>
</View>
);
}
}

Answer 1

const AppNavigator = createStackNavigator(
{
Login: Login,
Order: Order
},
{
initialRouteName: 'Login',
}
);
export default class Sales extends Component {
render() {
return (
<View>
<App /> // this is worng.. As there is no app component. Never wrap
//AppNavigator inside a view
</View>
);
}
}
The right thing should be. Just trying to tempelate your requirement.
class Login extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Login Screen</Text>
</View>
);
}
}
class Order extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Order Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Login: Login,
Order: Order
});
export default createAppContainer(AppNavigator);
I hope I'm able to make my point. If any confusion do mention in the comment. More than happy to help you out.

Answer 2

export default class Sales extends Component {
render() {
return (
<View>
<App /> // This code right here
</View>
);
}
}
You're rendering <App /> but you don't have an App Component. Maybe try using <Login />

Answer 3

try this
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Login from './src/components/screens/login';
import Order from './src/components/screens/order';
const AppNavigator = createStackNavigator(
{
Login: Login,
Order: Order
},
{
initialRouteName: 'Login',
}
);
class Sales extends Component {
render() {
return (
<View>
<AppNavigator /> --> pass here your navigation
</View>
);
}
}
export default createAppContainer(AppNavigator);