React Native's Navigator is not working - reactjs

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

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.

Answer 2

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.