Issue on loading component with TabBarIOS through Navigator - react-native

Question

I've been trying to load up a component through RenderScene function under Navigator. If the route doesn't contain any corresponding object based on the route.object I would fire up the navigator to return the view with the tabBarIOS, the code on the second snippet is how the TabView looks.
render: function() {
var initialRoute = {login: true};
return (
<Navigator
ref="navigator"
style={styles.container}
configureScene={(route) => {
if(Platform.OS === 'android') {
return Navigator.SceneConfigs.FloatFromBottomAndroid;
}
//
else {
return Navigator.SceneConfigs.FloatFromBottom;
}
}}
initialRoute={initialRoute}
renderScene={this.renderScene}
navigationBar={
<Navigator.NavigationBar
routeMapper={NavigationBarRouteMapper}
style={styles.navBar}
/>
}
/>
);
},
renderScene: function(route, navigator) {
if(route.login) {
return (
<LoginScreen
navigator={navigator}
onLogin={route.callback}
/>
);
}
return (
<HomeTab navigator={navigator}/>
);
}
The component with the tabs and supposedly the homepage after logging in is this
import React, { Component } from 'react';
import {
AppRegistry,
TabBarIOS,
StyleSheet
} from 'react-native';
var Welcome = require('./welcome.ios');
var More = require('./more.ios');
export default class TabBarIOSSpike extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'welcome'
};
}
render() {
return (
<TabBarIOS selectedTab={this.state.selectedTab}>
<TabBarIOS.Item
selected={this.state.selectedTab === 'welcome'}
icon={{uri:'featured'}}
onPress={() => {
this.setState({
selectedTab: 'welcome',
});
}}>
<Welcome/>
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === 'more'}
icon={{uri:'contacts'}}
onPress={() => {
this.setState({
selectedTab: 'more',
});
}}>
<More/>
</TabBarIOS.Item>
</TabBarIOS>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
I've been getting the weird error below. By the way, I've tested loading the hometab as the homepage and it works fine, only in this case if its wired up from the navigator that it occurs.
Unhandled JS Exception: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `Navigator`.