ProductList

Our home screen displays a list of products available to be purchased:

/*** src/screens/ProductList.js ***/

import React from 'react';
import { ScrollView, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {
  Spinner,
  Icon,
  List,
  ListItem,
  Thumbnail,
  Body,
  Text,
} from 'native-base';
import * as ProductActions from '../reducers/products';

class ProductList extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    tabBarIcon: () => <Icon name="home" />,
  };

  componentWillMount() {
    this.props.fetchProducts();
  }

  onProductPress(product) {
    this.props.navigation.navigate('ProductDetail', { product });
  }

  render() {
    return (
      <ScrollView>
        {this.props.loading && <Spinner />}
        <List>
          {this.props.products.map(p => (
            <ListItem...