scroller.js

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  ListView,
  View,
  Image
} from 'react-native';
import Dimensions from 'Dimensions';

var API = require('./api');

class ScrollerItem extends Component {
  constructor() {
    super();
    var size = Dimensions.get('window').width;
    this.state = {
      size: size,
    };
  }

  render() {
    var height = this.state.size / this.props.item.width * this.props.item.height;
    return(
      <View>
        <Text style={styles.welcome}>
          {this.props.item.title}
        </Text>
        <Image
          source={{uri: this.props.item.link}}
          style={{width: this.state.size, height:height }}
        />
      </View>
    );
  }
}

export default class Scroller extends Component {
  constructor() {
    super();
    this.state = {
      dataSource: null
    }
  }

  componentWillMount() {
    API.get('/gallery/hot/viral/0.json')
    .then(function(json) {
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      this.setState({
        dataSource: ds.cloneWithRows(json.data),
      })
    }.bind(this))
  }

  renderLoadingData() {
    return(
      <Text style={styles.welcome}>
        Loading Data
      </Text>
    );
  }

  renderList() {
    return(
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) =>
          <ScrollerItem
            item={rowData}
          />}
        />
    );
  }

  render() {
    if (this.state.dataSource) {
      return this.renderList();
    } else {
      return this.renderLoadingData();
    }
  }
}

const styles = StyleSheet.create({
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});