snack-example.js

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  ListView,
  ActivityIndicator,
  Button,
} from 'react-native';
import { Constants } from 'expo';
import _ from 'lodash';

const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

export default class App extends Component {
  constructor(props) {
    super(props);
    this.renderRow = this.renderRow.bind(this);
    this.onClickRow = this.onClickRow.bind(this);
    this.state = {
      dataSource: undefined,
    };
  }

  async componentDidMount() {
    const result = await getDefaultSubreddits();
    this.setState({
      dataSource: ds.cloneWithRows(result, _.keys(result)),
    });
  }

  onClickRow(topicUrl, topic) {
    alert(topic.url);
  }

  render() {
    if (!this.state.dataSource) {
      return (
        <View style={styles.container}>
          <ActivityIndicator size="large" />
        </View>
      );
    }

    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow}
        />
      </View>
    );
  }

  renderRow(topic, sectionId, index) {
    return (
      <Button
        key={index}
        title={topic.title}
        onPress={() => this.onClickRow(index, topic)}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});

async function getDefaultSubreddits() {
  const url = `https://www.reddit.com/subreddits/default.json`;
  const response = await fetch(url, {
    method: 'GET',
    headers: {
      Accept: 'application/json',
    },
  });
  if (!response.ok) {
    throw new Error(
      `RedditService getDefaultSubreddits failed, HTTP status ${response.status}`
    );
  }
  const data = await response.json();
  const children = _.get(data, 'data.children');
  if (!children) {
    throw new Error(
      `RedditService getDefaultSubreddits failed, children not returned`
    );
  }
  const sortedBySubscribers = _.orderBy(children, 'data.subscribers', 'desc');
  return _.map(sortedBySubscribers, subreddit => {
    // abstract away the specifics of the reddit API response and take only the fields we care about
    return {
      title: _.get(subreddit, 'data.display_name'),
      description: _.get(subreddit, 'data.public_description'),
      url: _.get(subreddit, 'data.url'),
    };
  });
}