old_contents: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { ListView, StyleSheet } from 'react-native';
  
  import ProductListRow from '../components/ProductListRow';
  
  const styles = StyleSheet.create({
    listView: {
      backgroundColor: 'dimgray',
    },
  });
  
  export default class ProductListView extends Component {
    constructor(props) {
      super(props);
  
      props.loadProducts();
  
      const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1.id !== r2.id,
      });
      this.dataSource = ds.cloneWithRows([]);
    }
  
    shouldComponentUpdate(nextProps) {
      return nextProps.products !== this.props.products;
    }
  
    componentWillUpdate(nextProps) {
      this.dataSource = this.dataSource.cloneWithRows(nextProps.products);
    }
  
    renderRow(row) {
      const { name, image, price } = row;
      return <ProductListRow {...{ name, image, price }} />;
    }
  
    render() {
      return (
        <ListView
          style={styles.listView}
          dataSource={this.dataSource}
          renderRow={row => this.renderRow(row)}
        />
      );
    }
  }
  
  ProductListView.propTypes = {
    products: PropTypes.arrayOf(PropTypes.shape({
      id: PropTypes.number.isRequired,
      name: PropTypes.string.isRequired,
      image: PropTypes.string.isRequired,
      price: PropTypes.number.isRequired,
    })).isRequired,
  };
  
new_contents: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { FlatList, StyleSheet } from 'react-native';
  
  import ProductListRow from '../components/ProductListRow';
  
  const styles = StyleSheet.create({
    listView: {
      backgroundColor: 'dimgray',
    },
  });
  
  export default class ProductListView extends Component {
    constructor(props) {
      super(props);
      props.loadProducts();
    }
  
    renderRow(row) {
      const { name, image, price } = row;
      return <ProductListRow {...{ name, image, price }} />;
    }
  
    render() {
      return (
        <FlatList
          style={styles.listView}
          data={this.props.products}
          renderItem={({item}) => this.renderRow(item)}
        />
      );
    }
  }
  
  ProductListView.propTypes = {
    products: PropTypes.arrayOf(PropTypes.shape({
      id: PropTypes.number.isRequired,
      name: PropTypes.string.isRequired,
      image: PropTypes.string.isRequired,
      price: PropTypes.number.isRequired,
    })).isRequired,
  };
  
subject: use flat list