React Native Navigator : Expected a component class, got [object Object] - react-native

Question

the error which is shown in the title gets displayed when I try to load a new Component through the Navigator component.
My View with the Navigator component looks as following:
render(){
return(
<Navigator
initialRoute={{name: 'Feed', component: Feed}}
renderScene={(route, navigator) => {
if(route.component){
return React.createElement(route.component, {navigator, ...this.props})
}
}
}
/>
)
}
}
The initialRoute renders the correct View perfectly.
The child Component Feed that gets rendered contains a list of Buttons which update the Navigator and cause it to render a new component as following:
updateRoute(route){
this.props.globalNavigator(route)
this.props.navigator.push({
name: route.displayLabel,
component: route.label
})
}
render(){
return(
<View style={styles.bottomNavSection}>
{
this.state.navItems.map((n, idx) => {
return(
<TouchableHighlight
key={idx}
style={this.itemStyle(n.label, 'button')}
onPress={this.updateRoute.bind(this, n)}
>
<Text
style={this.itemStyle(n.label, 'text')}
>
{n.displayLabel}
</Text>
</TouchableHighlight>
)
})
}
</View>
)
}
Note that the function updateRoute(route) receives the name of the new component as following: onPress={this.updateRoute.bind(this, n)}. Where n equals to {displayLabel: 'Start', label: 'Feed', icon: ''}, for example.
Edit
Content of my Profil.js Component:
import React, { Component } from 'react'
import ReactNative from 'react-native'
import API from '../lib/api'
import BottomNavigation from '../components/BottomNavigation'
const {
ScrollView,
View,
Text,
TouchableHighlight,
StyleSheet,
} = ReactNative
import { connect } from 'react-redux'
class Profil extends Component {
constructor(props){
super(props)
}
render(){
return(
<View style={styles.scene}>
<ScrollView style={styles.scrollSection}>
<Text>Profil</Text>
</ScrollView>
<BottomNavigation {...this.props} />
</View>
)
}
}
const styles = StyleSheet.create({
scene: {
backgroundColor: '#0f0f0f',
flex: 1,
paddingTop: 20
},
scrollSection: {
flex: .8
}
})
function mapStateToProps(state){
return {
globalRoute: state.setGlobalNavigator.route
}
}
export default connect(mapStateToProps)(Profil)

Answer 1

The issue was that onPress={this.updateRoute.bind(this, n)} wasn't containing the proper component reference but instead was containing the component name as String.
Fixed it by altering the function :
updateRoute(route){
this.props.globalNavigator(route)
this.props.navigator.push({
name: route.displayLabel,
component: route.component
})
}
and enhancing the state with the component reference and importing the component in the beginning of the document.
this.state = {
navItems: [
{displayLabel: 'Start', label: 'Feed', icon: start, component: Feed},
]
}

Answer 2

I think you forget to export your component.