home.js

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

import { Actions } from 'react-native-router-flux'
 
import { getAllCategories } from '../data'

export default class HomeScree 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 categories = await getAllCategories();
    this.setState({
      dataSource: this.ds.cloneWithRows(categories),
      loading: false
    });
  }

  renderItem = (rowData) => {
    return (
      <TouchableOpacity onPress= {
        () => {
          Actions.products(rowData)
        }}>
        <View style={styles.itemContainer} >
          <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
  }
})