React Native Router + goToLink

App.js

import React, { Component } from 'react';

import Router from './Router';

import NewDocument from './NewDocument';
import DocumentsList from './DocumentsList';


export default class App extends Component {
    
    state = {
        documents: [],
        newDocument: {
            
        },
    };

    render() {
        return (
            <Router>
                <NewDocument
                    name="new"
                    title='Nový doklad'
                    document={this.state.newDocument}
                />
                <DocumentsList
                    name="list"
                    title='Seznam dokladů'
                    documents={this.state.documents}
                />
            </Router>
        );
    }
}

NavBar.js

import React from 'react';
import {
    Text,
    Button,
    Navigator,
} from 'react-native';

const { NavigationBar } = Navigator;

const createLeftButton = ({ goToLink }) => (route, navigator, index, navState) => {
    return (
        <Button
            title="vše"
            onPress={() => goToLink('list')}
        />
    );
};

const createRightButton = ({ goToLink }) => (route, navigator, index, navState) => {
    return (
        <Button
            title="nový"
            onPress={() => goToLink('new')}
        />
    );
};

const createTitle = () => (route, navigator, index, navState) => {
    return (
        <Text>{route.props.title}</Text>
    );
};

export default function NavBar({ navigator, navState, link }) {
    const goToLink = link(navigator);

    return (
        <NavigationBar
            navigator={navigator}
            navState={navState}
            routeMapper={{
                LeftButton: createLeftButton({ goToLink }),
                RightButton: createRightButton({ goToLink }),
                Title: createTitle(),
            }}
        />
    );
}

NewDocument.js

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

import { documentType } from '../types';

const {
    arrayOf,
} = PropTypes;

export default class DocumentsList extends Component {

    static propTypes = {
        documents: arrayOf(documentType)
    } 

    render() {
        return <Text style={{ padding: 50 }}>Seznam dokumentů</Text>;
    }
}

Router.js

import React, { Component } from 'react';
import {
    Navigator,
} from 'react-native';

const { NavigationBar } = Navigator;

import NavBar from './NavBar';

export default class Router extends Component {

    defaultRoute() {
        const route = Object.create(this.props.children[0], {});
        // console.log(Object.isExtensible(route)); // === true

        return route;
    }

    scene() {
        return (route, navigator) => {
            return React.cloneElement(route, {
                goToLink: this.link(navigator)
            });
        }
    }

    link(navigator) {
        let routesByName = {};

        this.props.children.forEach(route => (
            routesByName[route.props.name] = route
        ));

        return routeName => navigator.replace(
            Object.create(routesByName[routeName], {})
        );
    }

    render() {
        const goToLink = navigator => this.link(navigator)

        return (
            <Navigator
                initialRoute={this.defaultRoute()}
                renderScene={this.scene()}
                navigationBar={<NavBar link={goToLink} />}
            />
        );
    }
}