feed-component.js

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

const { CardStack: NavigationCardStack } = NavigationExperimental;

class Feed extends Component {
  render() {
    return (
      <NavigationCardStack
        direction={'horizontal'}
        navigationState={this.props.navigation}
        onNavigate={this._onNavigate}
        renderScene={this._renderScene.bind(this)}
        style={styles.main}
      />
    );
  }

  _renderScene(props) {
    if (props.scene.navigationState.key === 'list') {
      return (
        <View style={{marginTop: NavigationHeader.HEIGHT}}>
          <Items onSelectItem={this._onSelectItem.bind(this)} />
        </View>
      );
    }

    if (props.scene.navigationState.key === 'details') {
      return (
        <View style={{marginTop: NavigationHeader.HEIGHT}}>
          <ItemDetails />
        </View>
      );
    }
  }

  _onAddItem() {
    this.props.onNavigate({
      type: 'push',
      route: {
        key: 'new',
        title: 'Main Screen',
        showBackButton: true
      }
    });
  }

  _onSelectItem() {
    this.props.onNavigate({
      type: 'push',
      route: {
        key: 'details',
        title: 'Item details',
        showBackButton: true
      }
    });
  }
}

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

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

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