Example logic behind our detailed post view.

index.ios.js

'use strict';

var React = require('react-native');

var {
  StyleSheet,
  Image,
  Text,
  NavigatorIOS,
  View,
  TouchableHighlight,
} = React;

var api = require("../../Network/api.js");

var RefreshableListView = require("../../Components/RefreshableListView");
var Comment = require("./Elements/Comment");

module.exports = React.createClass({
  render: function(){
    return(
        <RefreshableListView renderRow={(row)=>this.renderListViewRow(row)}
                             renderHeader={this.renderListViewHeader}
                             onRefresh={(page, callback)=>this.listViewOnRefresh(page, callback)}
                             backgroundColor={'#F6F6EF'}
                             renderFooter={this.renderFooter}/>
    );
  },
  renderListViewRow: function(row){
    if(row.count==this.props.post.kids.length){
      return(
        <View style={{paddingBottom: 20}}>
          <Comment data={row}/>
        </View>
      );
    }
    return(
      <Comment data={row}/>
    );
  },
  renderListViewHeader: function(){
    return(
    <View style={styles.headerContainer}>
      <View style={styles.rowDetailsContainer}>
        <View style={styles.leftContainer}>
          <Image
            source={{uri: this.props.post.image}}
            style={styles.thumbnail}
          />
        </View>
        <View style={styles.rightContainer}>
          <Text style={styles.rowTitle}>
              {this.props.post.title}
          </Text>
          <Text style={styles.detail}>
              &#xf19c; {this.props.post.venue_name} - {this.props.post.state}
          </Text>
          <Text style={styles.detail}>
              &#xf133; {this.props.post.day} {this.props.post.dateMD}
          </Text>
          <Text style={styles.detail}>
               &#xf017; {this.props.post.eventStatus == 'Sold Out' ? this.props.post.eventStatus : this.props.post.time}
          </Text>
        </View>
      </View>
      {this.renderPostText()}
      {this.renderSourceButton()}
    </View>
    );
  },
  renderPostText: function(){
    if(!this.props.post.description) return null;

    return(
      <View>
        <Text style={styles.description}>
          {this.props.post.description}
        </Text>
      </View>
    );
  },
  renderSourceButton: function(){
    if(!this.props.post.seatgeekUrl) return null;

    return(
      <TouchableHighlight onPress={() => this.pushSourceWebpage()}
                          underlayColor='#F6F6EF'>
        <Text style={styles.headerSourceLabel}>
          (Source)
        </Text>
      </TouchableHighlight>
    );
  },
  listViewOnRefresh: function(page, callback){
    if(!this.props.post.kids){
      callback([], {allLoaded: true})
    }
    else if(page!=1){
      this.fetchCommentsUsingKids(this.props.post.kids, this.state.lastIndex, 3, callback);
    }
    else{
     this.fetchCommentsUsingKids(this.props.post.kids, 0, 3, callback);
    }
  },
  fetchCommentsUsingKids: function(kids, startIndex, amountToAdd, callback){
    var rowsData = [];
    var endIndex = (startIndex + amountToAdd) < kids.length ? (startIndex + amountToAdd) : kids.length;
    function iterateAndFetch(){
        if (startIndex < endIndex){
            fetch(api.HN_ITEM_ENDPOINT)
            .then((response) => response.json())
            .then((item) => {
                item.count = startIndex+1;
                if(!item.deleted){
                  rowsData.push(item);
                }
                startIndex++;
                iterateAndFetch();
            })
            .done();
        }
        else {
            callback(rowsData, {allLoaded: endIndex==kids.length});
            return;
        }
    }
    iterateAndFetch();
    this.setState({lastIndex: endIndex});
  },
  fixPostText: function(str){
      return String(str).replace(/<p>/g, '\n\n')
                  .replace(/&#x2F;/g, '/')
                  .replace('<i>', '')
                  .replace('</i>', '')
                  .replace(/&#x27;/g, '\'')
                  .replace(/&quot;/g, '\"')
                  .replace(/<a\s+(?:[^>]*?\s+)?href="([^"]*)" rel="nofollow">(.*)?<\/a>/g, "$1");
  },
  renderFooter: function() {
    return (
      <View>
        <ActivityIndicatorIOS
          animating={true}
          size={'large'}/>
      </View>)
  }
});

var styles = StyleSheet.create({
  description: {
    textAlign: 'justify',
    paddingTop: 10,
  },
  headerContainer: {
    flex:1,
    backgroundColor: '#fff',
    flexDirection: 'column',
    paddingRight: 10,
    paddingLeft: 10,
    paddingTop: 6,
  },
  headerTitle:{
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'left',
    marginTop: 5,
    marginBottom: 10,
    color: '#000',
  },
  ticketContainer: {
    marginBottom: 0,
    marginTop: 2,
    height: 50,
    backgroundColor: '#ca221f',
  },
  ticketPrice: {
    color: '#fff',
    fontSize: 36,
    fontFamily: 'Futura-Heavy',
    fontStyle: 'italic',
    letterSpacing: 0,
    fontWeight: '900',
    paddingTop: 8,
    textAlign: 'center'
  },
  fullImage: {
    height: 200,
    marginBottom: 10,
  },
  postText:{
    fontSize: 14,
    marginTop: 5,
    paddingBottom: 0,
  },
  rowDetailsContainer: {
    borderBottomWidth: 1,
    borderColor: '#ccc',
    paddingTop: 5,
    paddingBottom: 5,
    flex: 1,
    height: 160,
  },
  leftContainer: {
    height: 140,
    marginBottom: 5,
    width: 105,
    overflow: 'hidden',
  },
  thumbnail: {
    height: 140,
    left: 0,
    top: 0,
    width: 100,
  },
  rightContainer: {
    bottom: 0,
    height: 0,
    left: 105,
    top: -78,
    width: 230,
    paddingVertical: 0,
    position: 'absolute',
    marginLeft: 5,
    top: 5,
  },
  rowTitle: {
      fontSize: 17,
      fontWeight: 'bold',
      fontFamily: 'fontawesome',
      textAlign: 'left',
      marginTop: 0,
      marginBottom: 7,
      marginRight: 0,
      color: '#333'
  },
  detail: {
    fontSize: 14,
    fontWeight: 'bold',
    fontFamily: 'fontawesome',
    textAlign: 'left',
    marginTop: 0,
    marginBottom: 5,
    marginRight: 0,
    color: '#333'
  },
  rowDetailsLine: {
      fontSize: 12,
      fontFamily: 'fontawesome',
      marginBottom: 4,
      color: '#666',
  },
  headerSourceLabel:{
    fontSize: 15,
    textAlign: 'left',
    color: '#0089FF',
    paddingBottom: 0,
  },
  headerPostDetailsLine: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 0,
    marginTop: 1,
    color: 'black',
  },
  separator: {
    marginBottom: 10,
    marginTop: 10,
    height: 10,
    backgroundColor: '#ca221f',
  },
  headerCommentTitle: {
    color: 'gray',
    marginTop: 10
  },
});