React-Navigation is not working need perfect solution - reactjs

Question

I'm using React-Navigation with create react native app with expo sdk.
This is my my app.js page code:
import React from 'react';
import Expo from 'expo';
import { StyleSheet, Text, View } from 'react-native';
import { TabNavigator } from 'react-navigation';
import Home from './Components/Home';
import Settings from './Components/Settings';
class App extends React.Component {
render() {
const MainNavigation = TabNavigator({
Home: { screen: Home },
Settings: { screen: Settings },
});
return (
<View>
<MainNavigation />
</View>
);
}
}
export default App;
In app page i'm exporting two components name home and settings page
Home.js page code:
import React from 'react';
import { StyleSheet, View, Text, Platform } from'react-native';
class Home extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Home',
headerStyle: {
marginTop: Platform.OS === 'android' ? 24 : 0
}
};
};
render () {
return (
<View>
<Text> Home Page </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default Home;
and Setting.js page code is:
import React from 'react';
import { View, Text, Platform } from'react-native';
class Settings extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Settings',
headerStyle: {
marginTop: Platform.OS === 'android' ? 24 : 0
}
};
};
render () {
return (
<View>
<Text> Settings Page </Text>
</View>
);
}
}
export default Settings;
My problem is that i'm trying to use tab navigator on my app with this two pages named Home.js and Settings.js
But it is not working and after expo sdk load its open with blank page (even no error returning)! Can anyone tell me what is my mistake on this codes or what is the issue that tab navigator is not coming or showing or working!!!!