tab-component.js

import React, { Component } from 'react';
import { TabBarIOS, NavigationExperimental } from 'react-native';
import Feed from '../Feed';
import { connect } from 'react-redux';

const { Reducer: NavigationReducer } = NavigationExperimental;
const { JumpToAction } = NavigationReducer.TabsReducer;

class ApplicationTabs extends Component {
  _renderTabContent(tab) {
    // XX: This is a simplified version of _renderTabContent
    if (tab.key === 'feed') {
      return (
        <Feed />
      );
    }
  }

  render() {
    const children = this.props.navigation.children.map( (tab, i) => {
      return (
        <TabBarIOS.Item key={tab.key}
            icon={tab.icon}
            selectedIcon={tab.selectedIcon}
            title={tab.title} onPress={ () => this.props.onNavigate(JumpToAction(i)) }
            selected={this.props.navigation.index === i}>
            { this._renderTabContent(tab) }
        </TabBarIOS.Item>
      );
    });
    return (
      <TabBarIOS tintColor="black">
        {children}
      </TabBarIOS>
    );
  }
}

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

const mapStateToProps = (state) => {
  return {
    navigation: state.get('tabs')
  };
}

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