React Native's Navigator is not working

Question

Navigator is not working, it's empty.I'm getting a blank page, Home component is not showing up. I tried other components and got the same result.

Addding this so I can post the question Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 import React, { Component } from 'react';

           import {
     AppRegistry,
       View,
      Text,
  StyleSheet,
   Navigator
   } from 'react-native';
  import Login from './components/Login';
  import Home from './components/Home';
  import LoginForm from './components/LoginForm';

  export default class App extends Component {

  renderScene(route, navigator) {
  console.log(route);
  if(route.name == 'login') {
    return <Login navigator={navigator} />
  }
  if(route.name == 'home') {
    return <Home navigator={navigator} />
  }

 }
  render() {
  return (
  <View style={styles.container}>
  <Navigator
      initialRoute={{name: 'home'}}
      renderScene={this.renderScene.bind(this)}
    />
    </View>
   );
  }
  }
  const styles = StyleSheet.create({
  container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
    backgroundColor: '#4fb0c9',
   }
   });

Answer 1

Sample code for navigator

import SplashScreen from './SplashScreen';   
class AppContainer extends Component {

    render() {
        return (
          <Navigator
            initialRoute={{ id: 'SplashScreen', name: 'Index' }}
            renderScene={this.renderScene.bind(this)}
            configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromRight}
          />
        );
      }

    renderScene = (route, navigator) => {
        if (route.id === 'SplashScreen') {
          return (
            <SplashScreen
              navigator={navigator}
            />
          );
        } 
      }
}

We get navigator as props in components when we are passing navigator in splashScreen.

Answer 2

I haven't tested your code but I can see you didn't use renderScene() in the right way. What I suggest is to move your routes out of App.js file and create a routes.js in this way so you are avoiding to have lots of if for your routes:

Route.js

import LoginView from './LoginView';
import HomeView from './HomeView';

let routes = {
  HomeView: {
   name: 'HomeView',
   component: HomeView,
   index: 0
  },
  LoginView: {
    name: 'LoginView',
    component: LoginView,
    index: 1,
    sceneConfig: Navigator.SceneConfigs.PushFromRight //you can change your view transitions here
  },
};

export default Routes;

And in your app.js file you have to

import Routes from './routes';

And update render()

render(){
  <Navigator
      initialRoute={Routes.HomeView}
      sceneStyle={styles.container}
      renderScene={(route, navigator) => {
        const Component = route.component;
        return <Component
          navigator={navigator}  //pass it down to each view so it can be called
          route={route}
        />
      }}
      configureScene={(route) => {
        if (route.sceneConfig) {
          return route.sceneConfig;
        }
        return Navigator.SceneConfigs.FadeAndroid;
      }}
    />
}

Hope it helps you out.