Dashboard.js

import React from 'react';
import {
  AppRegistry,
  Text,
  View,
  Button,
  StyleSheet,
  Image,
  ListView,
  TouchableHighlight,
  Alert
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class Dashboard extends React.Component {

  constructor(props) {
    super(props);

    var dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.course_title !== r2.course_title});

    this.state = {
      dataSource: dataSource.cloneWithRows([
        {'course_id': '0' ,'course_title': 'title0', 'learn_language': 'Emglish0', 'expiration_time' :'time0','oppo_user_obj': {'avatar_file_name':'imageurl0', 'nickname': 'waterever0'}},
        {'course_id': '1', 'course_title': 'title1', 'learn_language': 'Emglish1', 'expiration_time' :'time1','oppo_user_obj': {'avatar_file_name':'imageurl1', 'nickname': 'waterever1'}}
      ])
    };

  }

  rowPressed(avatar_file_name) {
    Alert.alert('Alert Title', avatar_file_name)
  }

  renderRow(rowData, sectionID, rowID) {
    var course_title = rowData.course_title.split(' ')[0];
    return (

      <TouchableHighlight onPress={() => this.rowPressed(rowData.oppo_user_obj.avatar_file_name)}
        underlayColor='#dddddd'>
        <View>
          <View style={styles.rowContainer}>
            <Image style={styles.thumb} source={{ uri: 'https://a499af057572c393815e-e011ef914a29f21f9a22bf73f79926ab.ssl.cf1.rackcdn.com/'+ rowData.oppo_user_obj.avatar_file_name+ '_Avatar_3.jpg' }} />
            <View style={styles.textContainer}>
              <Text style={styles.course_title}>{course_title}</Text>
              <Text style={styles.title}
                    numberOfLines={1}>{rowData.expiration_time}</Text>
            </View>
          </View>
          <View style={styles.separator}/>
        </View>
      </TouchableHighlight>

    );
  }

  _handlePress(event) {
    this.fetchBasicDataAsync()
  }

  fetchBasicDataAsync() {
    const { params } = this.props.navigation.state;
    
    fetch('https://www.italki.com/api/session/package?page=1&page_size=30&type=all', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'X-Token': params.token,
      },
    })
    .then((response) => response.json())
    .then((responseJson) => {

      console.log(responseJson);

      var dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.course_title !== r2.course_id});
      this.setState({
        dataSource: dataSource.cloneWithRows(responseJson.data)
      });

    })
    .catch((error) => {
      console.error(error);
    });
  }

  static navigationOptions = {
    title: ({ state }) => `Dashboard`,
  };

  render() {
    const { params } = this.props.navigation.state;
    return (
      <View style={{flex: 1, flexDirection: 'column', backgroundColor: 'steelblue'}} >

        <View style={{flex: 10}} >
          <ListView style={{backgroundColor: 'skyblue'}}
          dataSource={this.state.dataSource}
          renderRow={this.renderRow.bind(this)}/>
        </View>

        <View style={{flex: 1}} >
          <Button onPress={this._handlePress.bind(this)} title="fetch data from server" color="#841584" accessibilityLabel="Tap on Me"/>
        </View>

      </View>
    );
  }
}

var styles = StyleSheet.create({
  thumb: {
    width: 80,
    height: 80,
    marginRight: 10
  },
  textContainer: {
    flex: 1
  },
  separator: {
    height: 1,
    backgroundColor: '#dddddd'
  },
  course_title: {
    fontSize: 25,
    fontWeight: 'bold',
    color: '#48BBEC'
  },
  title: {
    fontSize: 20,
    color: '#656565'
  },
  rowContainer: {
    flexDirection: 'row',
    padding: 10
  }
});

module.exports=Dashboard;