index.android.js

/**
 * @flow
 */

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


class ArtistRow extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={artist_row_styles.row_container}>
        <Image source={{uri: this.props.pic}} style={artist_row_styles.thumbnail}/>
        <View>
          <Text style={artist_row_styles.name}>{this.props.name}</Text>
          <Text style={artist_row_styles.genre}>{this.props.genre}</Text>
        </View>
      </View>
    );
  }
}

const artist_row_styles = StyleSheet.create({
  row_container: {
    flex: 1,
    flexDirection: 'row',
    margin: 10,
  },
  thumbnail: {
    width: 50,
    height: 50,
    margin: 5
  },
  name: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 20,
  },
  genre: {
    color: 'red',
    margin: 10,
  },
});

export default class ArtistList extends Component {
  constructor(props) {
    var x:int = 0;
    x.length
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        {name: 'Scotty and the Reverbs',
         genre: 'Rock',
         location: 'Durham, NC',
         pic: 'https://gp1.wac.edgecastcdn.net/802892/http_public_production/artists/images/149/original/resize:248x186/crop:x0y0w800h600/BF7A56BB-6FD6-46BB-A0F1-14C5542FF1FB-6197-00000F368AE237CD.jpg?1478787906'},
        {name: 'Gianna Salvato',
         genre: 'Pop / Soul',
         location: 'New York, NY',
         pic: 'https://gp1.wac.edgecastcdn.net/802892/http_public_production/artists/images/854872/original/crop:x44y0w636h478/resize:140x105/1447689070_artist_854872-1447689053.jpg?1466654377'},
        {name: 'Brie',
          genre: 'Pop / Indie',
          location: 'Los Angeles, CA',
          pic: 'https://gp1.wac.edgecastcdn.net/802892/http_public_production/artists/images/1760661/original/crop:x0y106w568h426/resize:140x105/artist_1760661-1464461203.jpg?1467204235'},
        {name: 'Krigarè',
          genre: 'Pop / Indie',
          location: ' Nashville, TN',
          pic: 'https://gp1.wac.edgecastcdn.net/802892/http_public_production/artists/images/336138/original/crop:x0y638w2913h2185/resize:140x105/Album_cover_.jpg?1483563743'},
        {name: 'Twelve24',
          genre: 'Dance',
          location: 'Dance Manchester, ENG, UK',
          pic: 'https://gp1.wac.edgecastcdn.net/802892/http_public_production/artists/images/4427866/original/crop:x0y389w3199h2399/resize:140x105/1433515353_Twelve24barBWsquare3.jpg?1467588247'},
      ])
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <ArtistRow name={rowData.name}
                                              genre={rowData.genre}
                                              pic={rowData.pic}/>
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    backgroundColor: '#F5FCFF',
  }
});

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