global-navigation-component.js

/*
 *
 * GlobalNavigation
 *
 */

import { View, NavigationExperimental } from 'react-native';
import React, { Component } from 'react';
import styles from './styles';
import { connect } from 'react-redux';
import ApplicationTabs from '../ApplicationTabs';

const { CardStack: NavigationCardStack } = NavigationExperimental;

class GlobalNavigation extends Component {
  render() {
    return (
      <NavigationCardStack
        direction={'vertical'}
        navigationState={this.props.navigation}
        onNavigate={this.props.onNavigate}
        renderScene={this._renderScene.bind(this)}
        style={styles.main}
      />
    );
  }
  
  _renderScene(props) {
    // XX: simplified _renderScene
    if (props.scene.navigationState.key === 'applicationTabs') {
      return (
        <View style={{flex: 1}}>
          <ApplicationTabs />
        </View>
      );
    }
  }
}

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    onNavigate: (action) => dispatch(action) 
  };
}

function mapStateToProps(state) {
  return {
    navigation: state.get('globalNavigation')
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(GlobalNavigation);