nav.js

nav.js

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import {
  addNavigationHelpers,
  StackNavigator,
  TabNavigator
} from "react-navigation";

/*
import MenuTabScreen from "../components/MenuTab";
import MenuTabDetailScreen from "../components/MenuTab/menuDetail";
import ItemDetailScreen from "../components/MenuTab/itemDetail";

import ShoppingCartTabScreen from "../components/ShoppingCartTab";
import ProfileTabScreen from "../components/ProfileTab";
 
*/
import LoginScreen from "../pages/login";
import RegisterScreen from "../pages/register";
import HomeScreen from "../pages/home";
import ProfileScreen from "../pages/profile";
import TicketScreen from "../pages/tickets";
import NewTicketScreen from "../pages/newticket";
import BadgeScreen from "../pages/badge";
import QrCodeScreen from "../pages/qrcode";
import VerifyScreen from "../pages/verify";
import HelperScreen from "../pages/helper";
import Onboarding from '../pages/onboard';
import CampaignScreen from '../pages/campaign';
import TicketDetailScreen from '../pages/ticket-detail';

import { Colors } from '../constants/style';

import {
  createReduxBoundAddListener,
  createReactNavigationReduxMiddleware,
} from 'react-navigation-redux-helpers';
//import MainScreen from '../components/MainScreen';
//import ProfileScreen from '../components/ProfileScreen';

// Note: createReactNavigationReduxMiddleware must be run before createReduxBoundAddListener
const middleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.nav,
);
const addListener = createReduxBoundAddListener("root");

var navigationOptions = {
  headerTintColor: Colors.themeColor1, // YAY! Proper format!
  headerTitleStyle: { color: Colors.themeColor1 }
};



const HomeContainer = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions
  },
  Campaign: {
    screen: CampaignScreen,
    navigationOptions
  }
}

);
const TicketContainer = StackNavigator({
  Ticket: {
    screen: TicketScreen,
    navigationOptions
  },
  TicketDetail: {
    screen: TicketDetailScreen,
    navigationOptions
  }
}

);


const ProfileContainer = StackNavigator({
  Profile: {
    screen: ProfileScreen,
    navigationOptions
  },
  Detail: {
    screen: HomeScreen,
    navigationOptions
  }
});
const QrCodeContainer = StackNavigator({
  QrCode: {
    screen: QrCodeScreen,
    navigationOptions
  },

});
const BadgeContainer = StackNavigator({
  Badge: {
    screen: BadgeScreen,
    navigationOptions
  },

});

const TabContainer = TabNavigator(
  {
    HomeTab: {
      screen: HomeContainer
    },
    TicketTab: {
      screen: TicketContainer
    },
    QrCodeTab: {
      screen: QrCodeContainer
    },
    BagdgeTab: {
      screen: BadgeContainer
    },
    ProfileTab: {
      screen: ProfileContainer
    }
  },
  {
    tabBarPosition: "bottom",
    // lazy: true,
    animationEnabled: false,
    tabBarOptions: {
      showLabel: false,
      style: {
        backgroundColor: 'white',
      },
      indicatorStyle: {
        opacity: 0
      },
      inactiveTintColor: "#BDBDBD",
      swipeEnabled: false,
      animationEnabled: false,
      activeTintColor: Colors.themeColor2,
      allowFontScaling: true,
      showIcon: true,
    }
  }
);
export const AppNavigator = StackNavigator(
  {
    Onboarding: {
      screen: Onboarding,
      navigationOptions: { header: null }
    },
    Login: {
      screen: LoginScreen,
      navigationOptions: { header: null }
    },
    Register: {
      screen: RegisterScreen,
      navigationOptions: { header: null }
    },
    Verify: { screen: VerifyScreen, navigationOptions },
    Helper: { screen: HelperScreen, navigationOptions },

    NewTicket: { screen: NewTicketScreen, navigationOptions: { header: null } },
    Tab: {
      screen: TabContainer,
      navigationOptions: { header: null }
    }
  },
  {
    //headerMode: "none",
    mode: "modal"
  }
);

const AppWithNavigationState = ({ dispatch, nav }) => (
   <AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav, addListener,})} /> 
);

AppWithNavigationState.propTypes = {
  dispatch: PropTypes.func.isRequired,
  nav: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  nav: state.nav
});

export default connect(mapStateToProps)(AppWithNavigationState);