ListView(Stickey)

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

var API_URL = 'http://demo9383702.mockable.io/users';

class StickeyListViewDemo extends Component {

constructor(props) {
super(props);
var getSectionData = (dataBlob,sectinoID) => {
return dataBlob[sectionID];
};
var getRowData = (dataBlob,sectionID,rowID) => {
return dataBlob[sectionID + ':' + rowID];
};
this.state = {
loaded:false,
dataSource: new ListView.DataSource({
getSectionData: getSectionData,
getRowData: getRowData,
rowHasChanged:(row1,row2) => row1 !== row2,
sectionHeaderHasChanged:(s1,s2) => s1 !== s2
})
};
}

render() {
if (!this.state.loaded) {
return this.renderLoadingView();
}

return this.renderListView();
}

renderLoadingView() {
return (
<View style={[styles.header]}>
<Text style={[styles.headerText]}>User List</Text>
<View>
<ActivityIndicatorIOS
animating = {!this.state.loaded}
style={[styles.activityIndicator,{height: 80}]}
size='large'
/>
</View>
</View>
);
}

renderListView() {
return (
<View style={[styles.container]}>
<View style={[styles.header]}>
<Text style={[styles.headerText]}>User List</Text>
</View>
<ListView
dataSource={this.state.dataSource}
style={[styles.listView]}
renderRow={this.renderRow.bind(this)}
renderSectionHeader={this.renderSectionHeader.bind(this)}
/>
</View>
);
}

renderSectionHeader(sectionData,sectionID) {
return (
<View style={[styles.section]}>
<Text style={[styles.text]}>{sectionData}</Text>
</View>
);
}

renderRow(rowData,sectionID,rowID) {
return (
<TouchableOpacity onPress={this.onPressRow.bind(this,rowData)}>
<View style={[styles.rowStyle]}>
<Text style={[styles.rowText]}>{rowData.name.title} {rowData.name.first} {rowData.name.last}</Text>
</View>
</TouchableOpacity>
);
}

onPressRow(rowData,sectionID) {
alert(rowData.email);
}

componentDidMount() {
this.fetchData();
}

fetchData() {
fetch(API_URL).then((response) => response.json()).then((responseData) => {
var orgainzations = responseData.results,
length = orgainzations.length,
dataBlob = {},
sectionIDs = [],
rowIDs = [],
organization,
users,
userLength,
user,
i,
j;
for(i=0;i<length;i++) {
organization = orgainzations[i];

sectionIDs.push(organization.id);
dataBlob[organization.id] = organization.organization;

users = organization.users;
userLength = users.length;

rowIDs[i] = [];

for(j=0;j<userLength;j++) {
user = users[j].user;
rowIDs[i].push(user.md5);

dataBlob[organization.id + ':' + user.md5] = user;
}
}
this.setState({
dataSource:this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs),
loaded:true
});
console.log('dataBlob is' + dataBlob);
console.log('sectionIDs is' + sectionIDs);
console.log('rowIDs is' + rowIDs)
}).done();
}
}

const styles = StyleSheet.create({
container: {
flex: 1
},
activityIndicator: {
alignItems:'center',
justifyContent:'center'
},
header: {
height:60,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#3F51B5',
flexDirection: 'column',
paddingTop: 25
},
headerText: {
fontWeight: 'bold',
fontSize: 20,
color: 'white'
},
text: {
color: 'white',
//paddingHorizontal: 8,
fontSize: 16
},
rowStyle: {
paddingVertical: 20,
paddingLeft: 16,
borderTopColor: 'white',
borderLeftColor: 'white',
borderRightColor: 'white',
borderBottomColor: '#E0E0E0',
borderWidth: 1
},
rowText: {
color: '#212121',
fontSize: 16
},
subText: {
fontSize: 14,
color: '#757575'
},
section: {
flexDirection: 'column',
justifyContent: 'center'
4000
,
alignItems: 'flex-start',
paddingLeft: 6,
backgroundColor: '#2196F3'
},
listView: {
flex:1
}
});

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