`react-navigation` between different screens, getting 500 error - react-native

Question

I followed the documentation but still getting the dreaded 500 error
I added the screens below with code, please advise on what I am missing.
the app.js page is loaded in the index.js
https://snack.expo.io/#brody182/tab-navigation-with-screen-components
react-native#.55
react-navigation#2.5.2
App.js
import React, { Component } from 'react';
import AppNavigator from './components/app.navigator';
import { StyleProvider } from 'native-base';
import getTheme from './native-base-theme/components';
import CustomTheme from './native-base-theme/variables/custom.material';
export default class App extends Component {
render() {
return (
<StyleProvider style={getTheme(CustomTheme)}>
<AppNavigator/>
</StyleProvider>
);
}
}
app.navigator.js
import React from 'react';
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation'; // Version can be specified in package.json
import HomeScreen from './components/HomeScreen';
import SettingsScreen from './components/SettingsScreen';
import DetailsScreen from './components/DetailsScreen';
const HomeStack = StackNavigator({
Home: { screen: HomeScreen },
Details: { screen: DetailsScreen },
});
const SettingsStack = StackNavigator({
Settings: { screen: SettingsScreen },
Details: { screen: DetailsScreen },
});
export default TabNavigator(
{
Home: { screen: HomeStack },
Settings: { screen: SettingsStack },
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'Settings') {
iconName = `ios-options${focused ? '' : '-outline'}`;
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
return <Icon name={iconName} size={25} color={tintColor} />;
},
}),
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
animationEnabled: false,
swipeEnabled: false,
}
);
The screen pages are all similar except the names
settingsScreen.js , detailScreen.js, homeScreen.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export default class SettingsScreen extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
<Button
title="Go to Home"
onPress={() => this.props.navigation.navigate('Home')}
/>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}