i'm new to react-native!i'm struck with errors! i have created three java Script files i.e,Tool bar,Mysettings screen, and a stack navigator..the idea here is- there is button with settings icon in toolbar once the button is clicked it should navigate to settings screen..but it's not happening! it shows an error when the button is clicked. i have dropped the screenshot of my error and code as well! could you help me in figuring out this error!

[amulyaAmmu]

1)StackNavigator.js

`import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import {createStackNavigator} from 'react-navigation';

import MySettingsScreen from '../screens/MySettingsScreen';
import Toolbar from '../lib/Toolbar'

class App extends Component {

render() {
return (

);

}
}

const AppStackNavigator = createStackNavigator ({
MySettingsScreen: {
screen:MySettingsScreen,
},
Toolbar: {
screen:Toolbar,
},
},

)

export default AppStackNavigator;

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:'#fafafa',
alignItems: 'stretch',
justifyContent: 'flex-start',
},

});`

2)MySettingsScreen.js
`import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';

class MySettingsScreen extends Component {

render() {
return (

	<View style={styles.container}>
		<Text>settings</Text>
		</View>
);

}
}

export default MySettingsScreen;

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:'#fafafa',
alignItems: 'stretch',
justifyContent: 'flex-start',
},

});`

3)Toolbar.js

`import React, { Component } from 'react'
import {
View,
Text,
TouchableOpacity,
StyleSheet,
Image,
} from 'react-native'

import { Typo } from './Typography'
import { getColor } from './helpers'
import Icon from 'react-native-vector-icons/Ionicons';

export default class Toolbar extends Component {

render() {
const {
color,
title
} = this.props;

return (
    <View style={[ styles.toolbar, { backgroundColor: getColor(color) } ]}>
     <Image source={require('../images/logo.png')} style={{ width: 98, height: 22 }} />
	  <TouchableOpacity 
		onPress={() => this.props.navigation.navigate('Settings')}>
          <Icon style={styles.me} name="ios-settings" size={30}
				/>
        </TouchableOpacity>

    </View>
	
)

}
}

const styles = StyleSheet.create({
toolbar: {
flexDirection: 'row' ,
height: 56,
justifyContent: 'space-between',
alignItems:'center'

},
title: {
marginLeft: 16,
color: 'white' ,
},
me: {
color: 'white' ,
alignItems: 'center',

marginRight: 16

},
})`