Skip to content

Conversation

gameboyVito
Copy link

@gameboyVito gameboyVito commented Feb 19, 2017

Rewrote the state of PUSH_ROUTE to make it immutable, so that we can use the 'direction' payload to change the PUSH direction of the NavigationCardStack. Sometimes, we need to use Modal that will push from the bottom to top, instead of right to left. This commit can fix this issue and make the PUSH_ROUTE being handled in an immutable way. Here is a simple example to reproduce the case.

index.ios.js

render() {
        let { navigation } = this.props;
        let direction = 'horizontal';
        if (navigation.direction) {
            direction = 'vertical';
        }
        return (
            <Container>          
                <NavigationCardStack
                    enableGestures={false}
                    direction={direction}
                    navigationState={this.props.navigation}
                    renderScene={this.renderScene}
                />
           </Container>
        );
    }

const mapStateToProps = state => ({
    tabNavigation: state.tabReducer,
    navigation: state.navigationReducer
});

NavigationAction.js

import {actions} from "react-native-navigation-redux-helpers";

const {
    replaceAt,
    popRoute,
    pushRoute,
} = actions;

export default function navigateTo(homeRoute, nextRoute, data, direction) {
    return (dispatch, getState) => {
        const navigation = getState().navigationReducer;
        const currentRouteKey = navigation.routes[navigation.routes.length - 1].key;

        //dispatch(closeDrawer());

        //if (currentRouteKey !== homeRoute && nextRoute !== homeRoute) {
        if (!homeRoute) {
            dispatch(replaceAt(currentRouteKey, {key: nextRoute, index: 1}, navigation.key));
        } else if (currentRouteKey !== homeRoute && nextRoute === homeRoute) {
            dispatch(popRoute(navigation.key));
        } else if (currentRouteKey === homeRoute && nextRoute !== homeRoute) {
            dispatch(pushRoute({key: nextRoute, index: 1, data: data, direction: direction}, navigation.key));
        }
    };
}

NavigationReducer

import {cardStackReducer} from 'react-native-navigation-redux-helpers';

//direction : horizontal vertical
const initialState = {
    key: 'global',
    index: 0,
    routes: [
        {
            key: 'homePage',
            index: 0
        },
    ]
};

export default cardStackReducer(initialState);

To use it, just simply call this.

import navigateTo from "../../actions/navigationAction";

this.props.navigateTo(homeRoute, nextRoute, data, direction);  //direction: horizontal or vertical

@tquiroga
Copy link

tquiroga commented Mar 15, 2017

It would be nice to have the direction indeed. I've a dirty fix:

    let direction = 'horizontal';
    if (navigation.routes[navigation.routes.length - 1].key.indexOf('.modal') !== -1) {
      direction = 'vertical';
    }

        <NavigationCardStack
          direction={direction}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants