DeclarativeNavigator.js

import _ from 'lodash';
import React, { Component, Navigator, PropTypes, StyleSheet, View } from 'react-native';

import NavigationBar from './navigation-bar';

export default class DeclarativeNavigator extends Component {

    componentWillUpdate(nextProps) {
        const currentStack = this.props.routeStack;
        const currentLength = currentStack.length;

        const newStack = nextProps.routeStack;
        const newLength = newStack.length;

        if (newLength === currentLength) {
            for (let i = 0; i < newLength; i++) {
                if (newStack[i] !== currentStack[i]) {
                    this.navigator.replaceAtIndex(newStack[i], i);
                }
            }
        } else {
            let i = currentLength - 1;
            for (; i >= 0; i--) {
                if (i >= newLength || currentStack[i] !== newStack[i]) {
                    this.navigator.pop();
                }
            }
            for (; i < newLength; i++) {
                this.navigator.push(newStack[i]);
            }
        }
    }

    render() {
        const { renderScene, routeStack } = this.props;
        const { title } = _.last(routeStack);
        return (
            <View style={styles.container}>
                {title ? <NavigationBar title={title} /> : null}
                <Navigator initialRouteStack={routeStack}
                           ref={ref => this.navigator = ref}
                           renderScene={renderScene}
                           sceneStyle={styles.scene} />
            </View>
        );
    }
}

DeclarativeNavigator.propTypes = {
    renderScene: PropTypes.func.isRequired,
    routeStack: PropTypes.array.isRequired
};


const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    scene: {
        flex: 1
    }
});