reddit-mobile.js

// ---- index.js

import React, { NavigatorIOS, TabBarIOS } from 'react-native';
import { styles } from './style';
import { Reddit } from './reddit';

export const redditnative = React.createClass({
  render() {
    return (
      <NavigatorIOS style = {styles.navigatorios}
        initialRoute = {{ title: 'subreddits', component: Reddit }} />
    );
  }
});


// --- reddit.js

import React, { ActivityIndicatorIOS, ListView, Text, TouchableHighlight, View } from 'react-native';
import { styles } from './style';
import { SubRedditCell } from './subredditcell';
import { SubReddit } from './subreddit';
import { Loading } from './loading';
import { fetchSubreddits } from './utils';

export const Reddit = React.createClass({
  getInitialState() {
    return {
      dataSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),
      loaded: false
    };
  },
  componentDidMount() {
    fetchSubreddits().then(data => {
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(data),
        loaded: true
      });
    }).done();
  },
  render() {
    if (!this.state.loaded) {
      return(
        <Loading what="subreddits stuff" />
      );
    }
    return (
      <ListView style={{ marginTop: 40 }} dataSource={this.state.dataSource} renderRow={this.renderSubReddit} />
    );
  },
  renderSubReddit(item) {
    return(
      <SubRedditCell onSelect={() => this.selectSubReddit(item)} nbr={''} subreddit={item}/>
    );
  },
  selectSubReddit(item) {
    this.props.navigator.push({
      title: item.data.title,
      component: SubReddit,
      passProps: {
        display_name: item.data.display_name
      }
    });
  }
});

// --- subredditcell.js

import React, { Text, TouchableHighlight, View } from 'react-native';
import { styles } from './style';

export const SubRedditCell = React.createClass({
  render() {
    return (
      <TouchableHighlight onPress={this.props.onSelect}>
        <View style={styles.container}>
          <Text style={styles.subredditTitle}>
            {this.props.subreddit.data.title}
          </Text>
        </View>
      </TouchableHighlight>
    );
  }
});

// --- subreddit.js

import React, { ActivityIndicatorIOS, ListView, Text, TouchableHighlight, View } from 'react-native';
import { styles } from './style';
import { StoryCell } from './storycell';
import { Story } from './story';
import { Loading } from './loading';
import { fetchSubreddit } from './utils';

export const SubReddit = React.createClass({
  getInitialState() {
    return {
      dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 }),
      loaded: false
    };
  },
  componentDidMount() {
    fetchSubreddit(this.props.display_name).then(data => {
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(data),
        loaded: true
      });
    }).done();
  },
  render() {
    if (!this.state.loaded) {
      return(
        <Loading what="stories" />
      );
    }
    return (
      <ListView style={{ marginTop: 40 }} dataSource={this.state.dataSource} renderRow={this.renderStories} />
    );
  },
  renderStories(item) {
    return(
      <StoryCell onSelect={() => this.selectStory(item)} story={item}/>
    );
  },
  selectStory(item) {
    const { url, width, height } = item.data.preview.images[0].source;
    this.props.navigator.push({
      title: item.data.title,
      component: Story,
      passProps: {
        image: url,
        width,
        height
      }
    });
  }
});

// --- storycell.js

import React, { Image, Text, TouchableHighlight, View } from 'react-native';
import { styles } from './style';

export const StoryCell = React.createClass({
  render() {
    return (
      <TouchableHighlight onPress={this.props.onSelect}>
        <View style={styles.container}>
          <Image style={styles.thumbnail} source={{ uri: this.props.story.data.thumbnail }} />
          <Text style={styles.subredditTitle}>
            {this.props.story.data.title}
          </Text>
        </View>
      </TouchableHighlight>
    );
  }
});

// --- story.js

import React, { Image, Dimensions, ScrollView, Text, View, WebView } from 'react-native';
import { drag, pinch, GestureView } from 'react-native-gestures';
import { styles } from './style';

export const Story = React.createClass({
  render() {
    const style = {};
    const currentWindow = Dimensions.get('window');
    const { width, height } = this.props;
    if (width >= height) {
      style.width = currentWindow.width;
      style.height = height * (style.width / width);
    } else {
      style.height = currentWindow.height;
      style.width = width * (style.height / height);
    }
    return (
      <View onLayout={() => this.forceUpdate()} style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'black' }}>
        <ScrollView automaticallyAdjustContentInsets={true} bouncesZoom={true}>
          <Image style={style} source={{ uri: this.props.image}} />
        </ScrollView>
      </View>
    );
  }
});