index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

var MainView = require('./App/MainView');

class tableViewTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MainView />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 30
  },
});

AppRegistry.registerComponent('tableViewTest', () => tableViewTest);

MainView.js

'use strict';
import React from 'react-native';

const {
  StyleSheet,
  Text,
  View,
  ListView,
  TouchableHighlight
} = React;
var moment = require('moment');

const API_ENDPOINT = "http://localhost:3000/items";

var MainView = React.createClass({
  getInitialState() {
    console.log("MainView GetInitialState");
    return {
      items: null,
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2
      })
    };
  },

  componentDidMount() {
    console.log("MainView componentDidMount");
    this.fetchData();
  },

  fetchData() {
    fetch(API_ENDPOINT)
    .then((response)=> response.json())
    .then((responseJson) => {
      console.log("MainView setInitialItemData Success");
      this.setState({
        items: responseJson,
        dataSource: this.state.dataSource.cloneWithRows(responseJson)
      });
    })
    .catch((error)=>{
      console.warn("MainView setInitialItemData Failed");
      console.error(error);
      this.setState({
        items: null
      });
    })
    .done(()=>{
      console.log('ENDED');
    })
  },

  render() {
    if(!this.state.items) {
      return this.renderLoadingView();
    }
    return (
      <View style={styles.mainContainer}>
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderItem.bind(this)}
            renderHeader={this._renderHeader}
            style={styles.listView}
            />
      </View>
    );
  },
  _renderHeader() {
    return (
      <View>
        <Text>Header</Text>
      </View>
    );
  },
  renderItem(item) {
    var stale = <View></View>;
    var consumed = <View></View>;
    var remain_date = moment(item.expired_at).fromNow(true, 'd');
    var itemLength = this.state.items.length;
    return (
      <TouchableHighlight underlayColor="#FFFAAA">
        <View style={styles.itemContainer}>
          <View style={styles.leftItemView}>
            <Text style={styles.remainDateText}>
              {remain_date}
            </Text>
          </View>
          <View style={styles.rightItemView}>
            <Text style={styles.productTitleText}>
              {item.title}
            </Text>
            <Text style={styles.productDetailText}>
              {item.bought_at} {item.place_at}  € {item.price}
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  },
  renderLoadingView() {
    return (
      <View>
        <Text>
          Loading Items...
        </Text>
      </View>
    );
  }
});


var mainFontSize = 16;
var detailFontSize = 12;
var remainFontSize = 16;

var styles = StyleSheet.create({
  listView: {
    flex:1,
    flexDirection: 'column',
  },
  itemContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10
  },
  leftItemView: {
    flex: 1,
    justifyContent: 'center',
    padding: 5,
    marginRight: 10
  },
  rightItemView: {
    flex: 3,
    justifyContent: 'center',
    padding: 5,
    paddingLeft: 10
  },
  remainDateText: {
    fontWeight: 'bold',
    fontSize: remainFontSize
  },
  productTitleText: {
    fontSize: mainFontSize
  },
  productDetailText: {
    color: 'grey',
    fontSize: detailFontSize
  }
});
module.exports = MainView