React-Native Navigator Android Error

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

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}
        />
      );
    }
  }
}

Answer 2

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}
         />
       );
     }    
 }