import React, {
    Component,
    PropTypes,
} from 'react-native';
import { connect } from 'react-redux/native';
import { changeRoute, fetchProductsIfNeeded } from '../actions/PostersActions';
import * as routes from '../routes/PostersRoutes';

export class PostersNavigator extends Component {
    showProductList() {
        const { route } = routes.productListRoute(this.props);
        this.props.changeRoute(route);
    }

    showProductDetail(productId) {
        const { route, routeDatas } = routes.productDetailRoute(this.props, productId);
        this.props.changeRoute(route, routeDatas);
    }

    bindActions(props) {
        const { route, routeDatas } = props;

        switch (route.name) {
        case routes.PRODUCT_LIST:
            routeDatas.fetchProductsIfNeeded = () => {
                this.props.fetchProductsIfNeeded();
            };
            routeDatas.showProductPage = (product) => {
                this.showProductDetail(product);
            };
            break;
        case routes.PRODUCT_DETAIL:
            routeDatas.onBack = () => {
                this.showProductList();
            };
            break;
        default:
            break;
        }

        return { route, routeDatas };
    }

    render() {
        const { route, routeDatas } = this.bindActions(this.props);

        return (
            <route.component {...routeDatas} />
        );
    }
}

PostersNavigator.propTypes = {
    route: PropTypes.object.isRequired,
    routeDatas: PropTypes.object.isRequired,
    changeRoute: PropTypes.func.isRequired,
    fetchProductsIfNeeded: PropTypes.func.isRequired,
};

export default connect((state) => state, {
    changeRoute,
    fetchProductsIfNeeded,
})(PostersNavigator);

@@ -39,16 +39,48 @@
 pTypes,%0A
+    Navigator,%0A    BackAndroid,%0A
 %7D from '
@@ -322,16 +322,1130 @@
 onent %7B%0A
+    constructor(props) %7B%0A        super(props);%0A        this.bindEventListnener();%0A%0A        const %7B route, routeDatas %7D = this.bindActions(this.props);%0A        this.route = route;%0A        this.routeDatas = routeDatas;%0A    %7D%0A%0A    componentWillReceiveProps(nextProps) %7B%0A        if (nextProps === this.props %7C%7C !this.navigator) %7B%0A            return;%0A        %7D%0A%0A        const %7B route, routeDatas %7D = this.bindActions(nextProps);%0A%0A        if (this.route !== route) %7B%0A            this.route = route;%0A            this.routeDatas = routeDatas;%0A            this.navigator.push(route);%0A            return;%0A        %7D%0A%0A        if (this.routeDatas !== routeDatas) %7B%0A            this.routeDatas = routeDatas;%0A            this.navigator.replace(this.route);%0A        %7D%0A    %7D%0A%0A    bindEventListnener() %7B%0A        BackAndroid.addEventListener('hardwareBackPress', () =%3E %7B%0A            if (!this.navigator) %7B%0A                return false;%0A            %7D%0A%0A            if (this.route.name === routes.PRODUCT_LIST) %7B%0A                return false;%0A            %7D%0A%0A            this.navigator.pop();%0A            return true;%0A        %7D);%0A    %7D%0A%0A
     show
@@ -2182,16 +2182,55 @@
 DETAIL:%0A
+            if (!this.navigator) %7B%0A    
         
@@ -2269,32 +2269,36 @@
                 
+    
 this.showProduct
@@ -2309,32 +2309,36 @@
 ();%0A            
+  
+  
 %7D;%0A            b
@@ -2340,252 +2340,754 @@
     
-break;%0A        default:%0A            break;%0A        %7D%0A%0A        return %7B route, routeDatas %7D;%0A    %7D%0A%0A    render() %7B%0A        const %7B route, routeDatas %7D = this.bindActions(this.props);%0A%0A        return (%0A            %3Croute.component %7B...routeDatas%7D
+%7D else %7B%0A                routeDatas.onBack = () =%3E %7B%0A                    this.navigator.pop();%0A                %7D;%0A            %7D%0A            break;%0A        default:%0A            break;%0A        %7D%0A%0A        return %7B route, routeDatas %7D;%0A    %7D%0A%0A    renderScene(route, navigator) %7B%0A        if (!this.navigator) %7B%0A            this.navigator = navigator;%0A        %7D%0A%0A        const %7B routeDatas %7D = this;%0A%0A        return (%0A            %3Croute.component %7B...routeDatas%7D /%3E%0A        );%0A    %7D%0A%0A    render() %7B%0A        const %7B route %7D = this;%0A%0A        return (%0A            %3CNavigator%0A                initialRoute=%7Broute%7D%0A                configureScene=%7B() =%3E Navigator.SceneConfigs.FadeAndroid%7D%0A                renderScene=%7Bthis.renderScene.bind(this)%7D%0A           
  /%3E%0A

Use native Navigator