router.ios.js

/* eslint react/prop-types: 0 */
import React from 'react';
import { StackNavigator, TabNavigator } from 'react-navigation';
import LoginScene from './scenes/login.scene';
import HomeScene from './scenes/home.scene';
import PaymentMethodsScene from './scenes/payment.methods.scene';
import MoreMenu from './scenes/more.scene';
import { Icon } from 'react-native-elements';
import TransactionHistoryScene from './scenes/transaction.history.scene';
import { headerStyle, titleStyle } from './styles/header.style';

export const HomeNavigator = StackNavigator(
  {
    HomeScene: {
      screen: HomeScene,
      navigationOptions:{
        title:'Tienda',
      }
    }
  },{
    headerMode: 'screen',
    navigationOptions: {
      header: { visible: true }
    }
  }
);

export const PaymentMethodsNavigator = StackNavigator(
  {
    PaymentMethodsScene: {
      screen: PaymentMethodsScene,
      navigationOptions:{
        title:'Medios de Pago',
      }
    }
  },{
    headerMode: 'screen',
    navigationOptions: {
      header: { visible: true }
    }
  }
);


export const TransactionHistoryNavigator = StackNavigator({
    PaymentMethodsScene: {
      screen: TransactionHistoryScene,
      navigationOptions:{
        header: () => ({
            style:headerStyle,
            titleStyle:titleStyle
        }),
        title: 'Historial'
      }
    }
});


export const MoreMenuNavigator = StackNavigator(
  {
    MoreMenu: {
      screen: MoreMenu,
      navigationOptions:{
        title:'Más',
      }
    }
  },
);


export const MainTabNavigator = TabNavigator(
  {
    HomeNavigator: {
      screen: HomeNavigator,
      navigationOptions: {
        tabBar: {
          icon: ({tintColor}) => (<Icon name="shopping-bag" type="font-awesome" color={tintColor} />)
        }
      }
    },
    TransactionHistoryNavigator: {
      screen: TransactionHistoryNavigator,
      navigationOptions: {
        tabBar: {
          icon: ({tintColor}) => (<Icon name="history" type="font-awesome" color={tintColor} />)
        }
      }
    },
    More: {
      screen: MoreMenuNavigator,
      navigationOptions: {
        tabBar: {
          icon: ({tintColor}) => (<Icon name="bars" type="font-awesome" color={tintColor} />)
        }
      }
    },
  },{
    tabBarOptions: {
      activeTintColor: '#000'
    }
  }
);

export const RootIOS = StackNavigator(
  {
    LoginScene: { screen: LoginScene },
    MainNavigator: { screen: MainTabNavigator }
  },{
    headerMode: 'screen',
    navigationOptions: {
      header: { visible: false }
    }
  }
);