products.js

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ActivityIndicator,
  Image,
  ListView
} from 'react-native'
import { Entypo } from '@expo/vector-icons';

import { getCategoryProducts } from '../data'

export default class ProductsScreen extends React.Component {

  constructor() {
    super();
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      loading: true,
      dataSource: this.ds.cloneWithRows([]),
    };
  }

  async componentDidMount() {
    const products = await getCategoryProducts(this.props.id);
    this.setState({
      dataSource: this.ds.cloneWithRows(products),
      loading: false
    });
  }
  
  renderItem = (rowData) => {
    return (
      <TouchableOpacity onPress= {
        () => {
          Actions.products(rowData)
        }}>
        <View style={styles.itemContainer} >
          <Image
            style={styles.image} 
            source={{
              uri: 'http://lorempixel.com/600/400/cats/'
            }}
          />
          <Text style={styles.itemTitle} >{rowData.name}</Text>
          <Entypo name="chevron-thin-right" size={20} />
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    if(this.state.loading) {
      return (
        <View style={styles.loadingContainer} >
          <ActivityIndicator />
        </View>
      )
    }

    return (
      <View style={styles.container} >
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderItem}
          enableEmptySections
        />
      </View>
    )
  }
}


const styles = StyleSheet.create({

  loadingContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  container: {
    flex: 1,
    paddingTop: 66
  },
  itemContainer: {
    flexDirection: 'row',
    height: 50,
    padding: 10,
    borderBottomWidth: 1,
    borderColor: '#eaeaea',
    alignItems: 'center'
  },
  itemTitle: {
    flex: 1
  },
   image: {
     width: 40,
     height: 40,
     marginRight: 6,
     borderRadius: 20
   }
})