The component for route app must be a react component - navigation-drawer

Question

I have below code base
Getting this error
The component for route app must be a react component
I saw many questions like this on SO, and solutions there but being a beginner not able to resolve yet, tried with adding export / export default with each class
but not working
https://snack.expo.io/#mparvez19861/drawer-navigation?session_id=snack-session-hyLuO4xPa
import React, { Component } from 'react';
import { View, Text, TouchableHighlight, Image } from 'react-native';
import { createDrawerNavigator } from 'react-navigation';
import {
ActivityIndicator,
AsyncStorage,
Button,
StatusBar,
StyleSheet
} from 'react-native';
import { createStackNavigator, createSwitchNavigator, createAppContainer } from
'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'
class HeaderNavigationBar extends Component {
render() {
return (
<View style={{
height: 70,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center'
}}>
<TouchableHighlight style={{ marginLeft: 10, marginTop: 15 }}
onPress={() => { this.props.navigation.openDrawer() }}>
{/* <Image
style={{ width: 32, height: 32 }}
source={{uri: 'https://png.icons8.com/ios/2x/menu-filled.png'}}
/> */}
<Icon name='md-menu' size={35} />
</TouchableHighlight>
</View>
);
}
}
export class HomeScreen extends Component {
render() {
return (
<View style={{
flex: 1,
flexDirection: 'column',
}}>
<HeaderNavigationBar {...this.props} />
<View style={{
flex: 1,
backgroundColor: '#4885ed',
alignItems: 'center',
justifyContent: 'center'
}}>
<Text style={{ fontWeight: 'bold', fontSize: 22, color: 'white' }}>
This is Home Screen
</Text>
</View>
</View>);
}
}
export class InfoScreen extends Component {
render() {
return (<View style={{
flex: 1,
flexDirection: 'column',
}}>
<HeaderNavigationBar {...this.props} />
<View style={{
flex: 1,
backgroundColor: '#4734ac',
alignItems: 'center',
justifyContent: 'center'
}}>
<Text style={{ fontWeight: 'bold', fontSize: 22, color: 'white' }}>
This is Info Screen
</Text>
</View>
</View>);
}
}
class SignInScreen extends React.Component {
static navigationOptions = {
title: 'Please sign in',
};
render() {
return (
<View style={styles.container}>
<Button title="Sign in!" onPress={this._signInAsync} />
</View>
);
}
_signInAsync = async () => {
await AsyncStorage.setItem('userToken', 'abc');
this.props.navigation.navigate('App');
};
}
class AuthLoadingScreen extends React.Component {
constructor() {
super();
this._bootstrapAsync();
}
// Fetch the token from storage then navigate to our appropriate place
_bootstrapAsync = async () => {
const userToken = await AsyncStorage.getItem('userToken');
// This will switch to the App screen or Auth screen and this loading
// screen will be unmounted and thrown away.
this.props.navigation.navigate(userToken ? 'App' : 'Auth');
};
// Render any loading content that you like here
render() {
return (
<View style={styles.container}>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
);
}
}
const AuthStack = createStackNavigator({ SignIn: SignInScreen });
const drNav = createDrawerNavigator(
{
Home: {
screen: HomeScreen
},
Info: {
screen: InfoScreen
}
}
)
export default createAppContainer(createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: drNav,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
));
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Any help appreciated
Thanks