react-native-router-flux doesnt route

Question

i started a new react native project. Made a directory which as other "pages" like login or so. And i EXCATLY did everything in here: https://github.com/aksonov/react-native-router-flux/blob/master/docs/MINI_TUTORIAL.md

But i all see is Login title at the top.It just doesnt work and i dont know what to do. Here are the codes:

index.android.js

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import { Actions, Scene, Router } from 'react-native-router-flux';

import Login from './components/Login';
import Home from './components/Home';


export default class Yeni extends Component {
  render() {
return (
    <Router>
      <Scene key="root">
        <Scene key="login" component={Login} title="Login" initial={true} />
        <Scene key="home" component={Home} title="Home" />
      </Scene>
    </Router>
)
  }
}



AppRegistry.registerComponent('Yeni', () => Yeni);

components/Login.js

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

export default class Login extends Component {
  render() {
    return (
      <View>
    <Text>Login page</Text>
  </View>
)
}
}

Answer 1

I think the navBar might be on top of the content of the Login view.

Try moving down the Text a little bit.

export default class Login extends Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <Text style={{marginTop: 70}}>Login page</Text>
            </View>
        )
    }
}

Answer 2

I guess, you forget to create a reducer and pass it to router. Here is my configuration react-native-router-flux check this out in my case it is working like a charm.

import React, {Component} from 'react';
import {Router, Scene, Reducer} from 'react-native-router-flux';

import MainPage from './../nav/mainPage';
import CameraPage from './../nav/cameraPage';
import GalleryPage from './../nav/galleryPage';
import Photo from './../components/photo';
import PhotoPreview from './../components/photoPreview'

const reducerCreate = params=> {
    const defaultReducer = Reducer(params);
    return (state, action)=> {
        return defaultReducer(state, action);
    }
};

// define this based on the styles/dimensions you use
const getSceneStyle = function (/* NavigationSceneRendererProps */ props, computedProps) {
    const style = {
        flex: 1,
        shadowColor: null,
        shadowOffset: null,
        shadowOpacity: null,
        shadowRadius: null
    };

    if (computedProps.isActive) {
       style.marginTop = computedProps.hideNavBar ? 0 : 64;
    }
    return style;
};

export default class App extends Component {
    render() {
        return (
            <Router createReducer={reducerCreate} getSceneStyle={getSceneStyle}>
                <Scene key="root">
                    <Scene key="main"
                           component={MainPage}
                           title="Add Hat"
                           initial={true}/>

                    <Scene key="camera"
                           component={CameraPage}
                           title="Camera"/>

                    <Scene key="gallery"
                           component={GalleryPage}
                           title="Gallery"/>

                    <Scene key="photo"
                           component={Photo}
                           title="Photo"/>

                    <Scene key="photoPreview"
                           component={PhotoPreview}
                           title="Preview"/>
                </Scene>
            </Router>
        )
    }
}

and render function of initial component (MainPage) looks this way:

 import {Actions} from 'react-native-router-flux';

 render(){
    return (
        <View style={styles.container}>
            <TouchableOpacity style={styles.button}
                    onPress={Actions.camera}>
                <Text style={styles.buttonText}>Camera</Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.button}
                    onPress={Actions.gallery}>
                <Text style={styles.buttonText}>Gallery</Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.button}
                    onPress={Actions.photoPreview}>
                <Text style={styles.buttonText}>Test</Text>
            </TouchableOpacity>
        </View>
    )
}