React-Native Navigator Android Error - react-native

Question

Native app development
This is what I tried
File: index.android.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Navigator,
TouchableHighlight,
Text,
View
} from 'react-native';
var Loader = require('./app/components/Loader');
var Login = require('./app/components/Login');
export default class Demo extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Navigator>
initialRoute = {{
id:'Loader',
}}
renderScene = {(route, navigator) => {
_navigator = navigator;
switch (route.id){
case 'Loader':
return (<Loader navigator={navigator} route={route} title="Loader"/>);
case 'Login':
return (<Login navigator={navigator} route={route} title="Login"/>);
}
}
}
</Navigator>
);
}
}
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,
},
});
AppRegistry.registerComponent('Demo', () => Demo);
My Loader Component :
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image
} from 'react-native'
class Loader extends Component{
constructor(props) {
super(props);
this.state = {
id: 'Loader'
}
}
render(){
return(
<View style={styles.container}>
<Image source={require('../assets/img/ace-logo-white-01.png')} style={styles.logo}/>
<Text style={styles.loadingText}>Loading...</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'red'
},
logo: {
height: 30,
width: 50
},
loadingText: {
flex:1,
fontSize: 25,
paddingTop: 20,
color: 'white'
}
});
module.exports = Loader;
when I run the app I am getting error undefined is not a funtion(evaluating 'this.props.renderScene(route,this)')
I have tried this by watching some tutorials on Youtube but I can't find the answer to my problem.
What I want to do is when the app is launched the Loader component I made should load and then from loader component I redirect user to the Login componet but currently I am not able to load any component as it loads with the error I stated above.

Answer 1

Here is a sample code for you:
render() {
return (
<Navigator
initialRoute={{ id: 'Sample', name: 'Index' }}
renderScene={this.renderScene.bind(this)}
configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromRight}
/>
); }
renderScene = (route, navigator) => {
if (route.id === 'Sample') {
return (
<Sample
navigator={navigator}
/>
);
}
}

Answer 2

You may have made some syntax mistakes with the code given by #JainZz. Try this
import Loader from './app/components/Loader'
export default class Demo extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Navigator
initialRoute={{ id: 'Loader', name: 'Loader' }}
renderScene={this.renderScene.bind(this)}
configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromRight}
/>
);
}
renderScene = (route, navigator) => {
if (route.id === 'Loader') {
return (
<Loader
navigator={navigator}
/>
);
}
}
}