gistfile1.js

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  Image,
  ListView,
  TouchableHighlight,
  NavigatorIOS,
  Text,
  StyleSheet,
  View,
} = React;

var TimerMixin = require('react-timer-mixin');

var yolo = React.createClass({
  render: function() {
    return (
      <NavigatorIOS
        style={styles.yoloContainer}
        initialRoute={{
          title: 'YOLO',
          component: YoloList,
        }}
        tintColor='#008888' />
    );
  },
});

var YoloList = React.createClass({
  mixins: [TimerMixin],
  componentWillUnmount: function() {
    clearInterval(this.intervalID);
  },
  intervalID: null,
  getInitialState: function() {
    var getRowData = (dataBlob, sectionID, rowID) => {
      return dataBlob[rowID];
    };
    return {
      url: 'https://avatars2.githubusercontent.com/u/90494?v=3&s=64',
      dataSource: new ListView.DataSource({
        getRowData: getRowData,
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
    };
  },
  render: function() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this._renderRow}
        style={styles.listView} />
    );
  },

  _pressData: ({}: {[key: number]: boolean}),

  componentWillMount: function() {
    this._pressData = {};
    this.setState({dataSource: this.state.dataSource.cloneWithRows(
      this._genRows(this._pressData)
    )});

    this.intervalID = this.setInterval(function(){
      this.setState({url: 'https://avatars2.githubusercontent.com/u/287288?v=3&s=64'});
    }, 3000)
  },

  _renderRow: function(rowData: string, sectionID: number, rowID: number) {
    return (
      <TouchableHighlight onPress={() => this._pressRow(rowID)}>
        <View>
          <View style={styles.row}>
            <Image style={styles.thumb} source={{uri: this.state.url}} />
            <Text>
               Click HERE within 3 seconds after launch
                {'\n'}
                current image url is {'\n'}
                <Text style={{fontSize: 10}}>
                  {this.state.url}
                </Text>
            </Text>
          </View>
          <View style={styles.separator} />
        </View>
      </TouchableHighlight>
    );
  },

  _genRows: function(pressData: {[key: number]: boolean}): Array<string> {
    var dataBlob = [];
    for (var ii = 0; ii < 10; ii++) {
      var pressedText = pressData[ii] ? ' (pressed)' : '';
      dataBlob.push('Row ' + ii + pressedText);
    }
    return dataBlob;
  },

  _pressRow: function(rowID: number) {
    this._pressData[rowID] = !this._pressData[rowID];
    this.setState({dataSource: this.state.dataSource.cloneWithRows(
      this._genRows(this._pressData)
    )});
    this.props.navigator.push({
      title: 'Hi',
      component: Page1,
    });
  }
});

var Page1 = React.createClass({
  render: function() {
    return (
      <View style={styles.orange}>
        <TouchableHighlight onPress={() => 
          this.props.navigator.push({
            title: 'Now go back to root',
            component: Page2,
          })
        }>
          <Text style={styles.text}>Click HERE</Text>
        </TouchableHighlight>
      </View>
    );
  },
});

var Page2 = React.createClass({
  render: function() {
    return (
      <View style={styles.salmon}>

      </View>
    );
  },
});

var styles = StyleSheet.create({
  orange: {
    flex: 1,
    backgroundColor: 'orange',
  },
  salmon: {
    flex: 1,
    backgroundColor: 'salmon',
  },
  yoloContainer: {
    flex: 1,
  },
  listView: {
    // paddingTop: 20,
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  row: {
    alignItems: 'center',
    backgroundColor: 'white',
    flexDirection: 'row',
    padding: 5,
  },
  text: {
    marginTop: 80,
    fontSize: 18,
    color: '#555555',
  },
  thumb: {
    width: 64,
    height: 64,
    marginRight: 5,
  },
  separator: {
    height: 1,
    backgroundColor: '#eeeeee',
  },
});

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