undefined is not an object (evaluting_'this2.pros.navigation') - react-native

Question

App.js
import {DrawerNavigator} from 'react-navigation';
import SettingsScreen from './src/components/SettingsScreen';
import UploadsScreen from './src/components/UploadsScreen';
const DrawerExample = DrawerNavigator(
{
First:{
path:'/',
screen:UploadsScreen,
},
Second:{
path:'/sent',
screen:SettingsScreen,
},
},
{
initialRouteName:'First',
DrawerPosition:'left'
}
);
export default DrawerExample;
2.SettingScreen.js
export default class SettingsScreen extends Component{
static navigationOptions ={
tabBarLabel: 'Screen1',
drawerIcons: () =>{
return (
<Image style={{width:5, height:5}}
source={require('../images/notification-icon.png')} />
);
}
}
render(){
return <View style={
{
flex:1,
justifyContent:'center',
alignItems:'center'
}
}>
<Text style={{fontSize:30, color:'green'}}>
Screen1
</Text>
<Button
onPress={() => this.pros.navigation.navigate('DrawerOpen')}
title="Open DrawNavigator"
/>
</View>
}
}
3.Uploadscreen.js
export default class UploadsScreen extends Component{
static navigationOptions ={
tabBarLabel: 'Screen2',
drawerIcons: () =>{
return (
<Image style={{width:5, height:5}}
source={require('../images/home-icon.png')} />
);
}
}
render
(){
return <View style={
{
flex:1,
justifyContent:'center',
alignItems:'center'
}
}>
<Text style={{fontSize:30, color:'blue'}}>
Screen1
</Text>
<Button
onPress={() => this.pros.navigation.navigate('DrawerOpen')}
title="Open DrawNavigator"
/>
</View>
}
}
navigating to any page it shows the same error undefined is not an
object (evaluting_'this2.pros.navigation') while trying the other
method routing flux it show the same and in drawer navigation its
same i am stuck Anybody knws the solution please let me knw....