actions - route.js

'use strict';

import type {Action} from './types'

export const PUSH_NEW_ROUTE = "PUSH_NEW_ROUTE";
export const REPLACE_ROUTE = "REPLACE_ROUTE";
export const REPLACE_OR_PUSH_ROUTE = "REPLACE_OR_PUSH_ROUTE";
export const POP_ROUTE = "POP_ROUTE";
export const POP_TO_ROUTE = "POP_TO_ROUTE";

export function replaceRoute(route:string):Action {
  return {
    type: REPLACE_ROUTE,
    route: route
  }
}

export function pushNewRoute(route:string):Action {
  return {
    type: PUSH_NEW_ROUTE,
    route: route
  }
}

export function replaceOrPushRoute(route:string):Action {
  return {
    type: REPLACE_OR_PUSH_ROUTE,
    route: route
  }
}

export function popRoute():Action {
  return {
    type: POP_ROUTE
  }
}

export function popToRoute(route:string):Action {
  return {
    type: POP_TO_ROUTE,
    route: route
  }
}

actions - types.js

'use strict';

import type from '../AppNavigator';

export type Action =
  { type: 'PUSH_NEW_ROUTE', route: string }
    | { type: 'POP_ROUTE' }
    | { type: 'POP_TO_ROUTE', route: string }
    | { type: 'REPLACE_ROUTE', route: string }
    | { type: 'REPLACE_OR_PUSH_ROUTE', route: string }
    | { type: 'OPEN_DRAWER'}
    | { type: 'CLOSE_DRAWER'}
    | { type: 'SET_CHECK_STATE', checkState: boolean }
    | { type: 'STORE_TOPIC', topic: object }

export type Dispatch = (action:Action | ThunkAction | PromiseAction | Array<Action>) => any;
export type GetState = () => Object;
export type ThunkAction = (dispatch:Dispatch, getState:GetState) => any;
export type PromiseAction = Promise<Action>;

AppNavigator.js

'use strict';

import React, { Component } from 'react';
import { BackAndroid, Platform, StatusBar } from 'react-native';
import { connect } from 'react-redux';
import _ from 'lodash/core';
import { Drawer } from 'native-base';
import { closeDrawer } from './actions/drawer';
import { popRoute } from './actions/route';
import { statusBarColor } from './themes/base-theme';

import Navigator from 'Navigator';

import Login from './components/login/';
import SignUp from './components/signup/';
import ForgotPassword from './components/forgotpassword/';
import SplashPage from './components/splashscreen/';
import Home from './components/home/';
import SideBar from './components/sideBar';
import TopicSearch from './components/topicsearch';
import LocationFilter from './components/locationfilter';
import TextSearch from './components/textsearch';
import DetailView from './components/detailview';
import TestPanel from './components/testpanel';

Navigator.prototype.replaceWithAnimation = function (route) {
    const activeLength = this.state.presentedIndex + 1;
    const activeStack = this.state.routeStack.slice(0, activeLength);
    const activeAnimationConfigStack = this.state.sceneConfigStack.slice(0, activeLength);
    const nextStack = activeStack.concat([route]);
    const destIndex = nextStack.length - 1;
    const nextSceneConfig = this.props.configureScene(route, nextStack);
    const nextAnimationConfigStack = activeAnimationConfigStack.concat([nextSceneConfig]);

    const replacedStack = activeStack.slice(0, activeLength - 1).concat([route]);
    this._emitWillFocus(nextStack[destIndex]);
    this.setState({
        routeStack: nextStack,
        sceneConfigStack: nextAnimationConfigStack,
    }, () => {
        this._enableScene(destIndex);
        this._transitionTo(destIndex, nextSceneConfig.defaultTransitionVelocity, null, () => {
            this.immediatelyResetRouteStack(replacedStack);
        });
    });
};

export var globalNav = {};

const searchResultRegexp = /^search\/(.*)$/;

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

        if(currentState){
            while (currentState.children){
                currentState = currentState.children[currentState.index]
            }
        }
        return defaultReducer(state, action);
    }
};

const drawerStyle  = { shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3};

class AppNavigator extends Component {

    constructor(props){

        super(props);
    }

    componentDidMount() {
        globalNav.navigator = this._navigator;

        this.props.store.subscribe(() => {
            if(this.props.store.getState().drawer.drawerState == 'opened')
                this.openDrawer();

            if(this.props.store.getState().drawer.drawerState == 'closed')
                this._drawer.close();
        });

        BackAndroid.addEventListener('hardwareBackPress', () => {
            var routes = this._navigator.getCurrentRoutes();

            if(routes[routes.length - 1].id == 'home' || routes[routes.length - 1].id == 'login') {
                return false;
            }
            else {
                this.popRoute();
                return true;
            }
        });
    }

    popRoute() {
        this.props.popRoute();
    }

    openDrawer() {
        this._drawer.open();
    }

    closeDrawer() {
        if(this.props.store.getState().drawer.drawerState == 'opened') {
            this._drawer.close();
            this.props.closeDrawer();
        }
    }

    render() {
        return (
            <Drawer
                ref={(ref) => this._drawer = ref}
                type='overlay'
                content={<SideBar navigator={this._navigator} />}
                tapToClose={true}
                acceptPan={false}
                onClose={() => this.closeDrawer()}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                negotiatePan={true}>
                <StatusBar
                    hidden={true}
                    backgroundColor={statusBarColor}
                    barStyle='light-content'
                />
                <Navigator
                    ref={(ref) => this._navigator = ref}
                    configureScene={(route) => {
                        return Navigator.SceneConfigs.FadeAndroid;
                    }}
                    initialRoute={{id: (Platform.OS === 'android') ? 'splashscreen' : 'login', statusBarHidden: true}}
                    renderScene={this.renderScene}
                />
            </Drawer>
        );

    }

    renderScene(route, navigator) {
        switch (route.id) {
            case 'splashscreen':
                return <SplashPage navigator={navigator} {...route.passProps}/>;
            case 'login':
                return <Login navigator={navigator} {...route.passProps}/>;
            case 'signup':
                return <SignUp navigator={navigator} {...route.passProps}/>;
            case 'forgotpassword':
                return <ForgotPassword navigator={navigator} {...route.passProps}/>;
            case 'home':
                return <Home navigator={navigator} {...route.passProps}/>;
            case 'topicsearch':
                return <TopicSearch navigator={navigator} {...route.passProps} />;
            case 'locationfilter':
                return <LocationFilter navigator={navigator} {...route.passProps} />;
            case 'textsearch':
                return <TextSearch navigator={navigator} {...route.passProps} />;
            case 'detailview':
                return <DetailView navigator={navigator} {...route.passProps} />;
            case 'testpanel':
                return <TestPanel navigator={navigator} {...route.passProps}/>;
            default :
                return <Login navigator={navigator} {...route.passProps}/>;
        }
    }
}

function bindAction(dispatch) {
    return {
        closeDrawer: () => dispatch(closeDrawer()),
        popRoute: () => dispatch(popRoute())
    }
}

const mapStateToProps = (state) => {
    return {
        drawerState: state.drawer.drawerState
    }
}

export default connect(mapStateToProps, bindAction) (AppNavigator);

reducer-route.js

'use strict';

import type {Action} from '../actions/types';
import {globalNav} from '../AppNavigator';
import { PUSH_NEW_ROUTE, POP_ROUTE, POP_TO_ROUTE, REPLACE_ROUTE, REPLACE_OR_PUSH_ROUTE } from '../actions/route';
import { REHYDRATE } from 'redux-persist/constants'

export type State = {
  routes: Array<string>
}

const initialState = {
  routes: ['login']
};

export default function (state:State = initialState, action:Action): State {

  if (action.type === PUSH_NEW_ROUTE) {
    globalNav.navigator.push({id: action.route});
    return {
      routes: [...state.routes, action.route]
    };
  }

  if (action.type === REPLACE_ROUTE) {
    globalNav.navigator.replaceWithAnimation({id: action.route});
    let routes = state.routes;
    routes.pop();
    return {
      routes: [...routes, action.route]
    };
  }

  // For sidebar navigation
  if (action.type === REPLACE_OR_PUSH_ROUTE) {
    let routes = state.routes;

    if(routes[routes.length - 1] == 'home') {
      // If top route is home and user navigates to a route other than home, then push
      if(action.route != 'home')
        globalNav.navigator.push({id: action.route});

      // If top route is home and user navigates to home, do nothing
      else
        routes = [];
    }

    else {
      if(action.route == 'home') {
        globalNav.navigator.resetTo({id: 'home'});
        routes = [];
      }
      else {
        globalNav.navigator.replaceWithAnimation({id: action.route});
        routes.pop();
      }

    }

    return {
      routes: [...routes, action.route]
    };
  }

  if (action.type === POP_ROUTE) {
    globalNav.navigator.pop();
    let routes = state.routes;
    routes.pop();
    return {
      routes: routes
    }
  }

  if (action.type === POP_TO_ROUTE) {
    globalNav.navigator.popToRoute({id: action.route});
    let routes = state.routes;
    while (routes.pop() !== action.route) {}
    return {
      routes: [...routes, action.route]
    }
  }

  if (action.type === REHYDRATE) {
    const savedData = action['payload']['route'] || state;
    return {
      ...savedData
    }
  }

  return state;
}