GitHum Users viewer in react-native

index.ios.js

import React, {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  Image,
  NavigatorIOS,
  TouchableWithoutFeedback,
  WebView
} from "react-native";

class GHNavigator extends React.Component {
  render() {
    return (
      <NavigatorIOS style={styles.navigator}
        initialRoute={{
          component: GHList,
          title: 'GitHub users',
      }}/>
    );
  }
}

//
class GHList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      items: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }),
      loaded: false,
    };
    this.renderItem = this.renderItem.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

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

    return (
      <ListView
        dataSource={this.state.items}
        renderRow={this.renderItem}
        style={styles.listView}/>
    );
  }

  renderLoadingView() {
    return (
      <View style={styles.container}>
        <Text>
          Loading movies...
        </Text>
      </View>
    );
  }

  renderItem(item, sectionID, rowID) {
    return (
      <TouchableWithoutFeedback onPress={() => this.onPressed(item)}>
      <View style={styles.container}>
        <Image
          source={{uri: item.avatar_url}}
          style={styles.thumbnail}/>
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{item.html_url}</Text>
          <Text style={styles.name}>{item.login}</Text>
        </View>
      </View>
      </TouchableWithoutFeedback>
    );
  }

  //
  fetchData() {
    fetch("https://api.github.com/users")
      .then((res) => res.json())
      .then((data) => {
        this.setState({
          items: this.state.items.cloneWithRows(data),
          loaded: true,
        });
      })
      .done();
  }

  //
  onPressed(item) {
    this.props.navigator.push({
      title: item.login,
      component: GHItemView,
      passProps: { url: item.html_url }
    })
  }
}

//
class GHItemView extends React.Component {
  render() {
    return <WebView url={this.props.url}/>
  }
}

//
const styles = StyleSheet.create({
  navigator: {
    flex: 1
  },
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  rightContainer: {
    flex: 1,
  },
  title: {
    fontSize: 15,
    margin: 8,
    textAlign: 'left',
  },
  name: {
    fontSize: 12,
    margin: 8,
    textAlign: 'left',
  },
  thumbnail: {
    width: 48,
    height: 48,
    margin: 2,
  },
  listView: {
    backgroundColor: '#FFFFFF',
  },
})

AppRegistry.registerComponent('AwesomeProject', () => GHNavigator);