react-native Navigator issues - react-native

Question

sorry i'm getting this error element type is invalid :expected a string(for built-in components) or a class/function (for composite components)but got:undefined.check the render method of 'Navigator'.
here's the code;
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableHighlight
} from 'react-native';
import ButtonPage from './jara/initialpage';
import NotePage from'./jara/Notescreen';
import HomeScreen from './jara/HomePage';
var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
if(index > 0) {
return (
<TouchableHighlight
underlayColor="transparent"
onPress={() => { if (index > 0) { navigator.pop() } }}>
<Text style={ styles.leftNavButtonText }>Back</Text>
</TouchableHighlight>
);
}
else { return null }
},
RightButton(route, navigator, index, navState) {
if (index <= 0) return (
<ButtonPage
onPress ={() => {
navigator.push({
});
}}
customText = 'create Note'
/>
);
},
Title(route, navigator, index, navState) {
return (
<Text style={ styles.title }>Home Page</Text>
);
}
};
class NavProject extends Component{
renderScene(route,navigator){
return(
<route.component navigator = {navigator}/>
);
}
render(){
return(
<View style = {styles.MainContainer}>
<View style = {styles.container}>
<ButtonPage/>
</View>
<Navigator
initialRoute ={{page: 'Home'}}
renderScene ={this.renderScene.bind(this)}
navigationBar ={
<Navigator.NavigationBar
routeMapper = {NavigationBarRouteMapper}
/>
}
configScene ={(route,navigator) =>
Navigator.sceneConfigs.floatFromRight}
/>
</View>
);
}
}
class ReactNote extends Component{
renderScene(route,navigator){
if(index <= 0){
return(
<View style = {styles.container}>
<HomeScreen
onPress={() =>{
navigator.push({});
}}
/>
</View>
);
}
else if(index > 0){
return(
<View styles ={styles.scontainer}>
<NotePage
onPress={() =>{
navigator.pop();
}}
/>
/>
</View>
);
}
}
}
const styles = StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems:'center',
},
container:{
backgroundColor:'blue',
flex:1,
},
scontainer:{
backgroundColor:'lightblue',
flex:1,
}
});
AppRegistry.registerComponent('NavProject', ()=> NavProject);

Answer 1

I later found out that the renderScene works similarly to the NavigationRouteMapper, where for the individual component pages that were referenced, as shown above.Had to have similar navigation controls.and by that i mean 'navigator.push({});' and 'navigator.pop();' in their respective pages. worked for me.plus i got rid of the renderScene.bind(this) and just wrote the code directly under the renderScene props either, way I think it works.