gistfile1.js

var yolo = React.createClass({
  getInitialState: function() {
    return {
      selectedTab: 1,
      notifCount: 0,
      presses: 0,
    }
  },
  _renderContentWithNavigation: function(component, rightButtonTitle) {
    return (
      <NavigatorIOS
        style={styles.yoloContainer}
        initialRoute={{
          title: 'YOLO',
          component: component,
          rightButtonTitle: rightButtonTitle,
          onRightButtonPress: this.rightButtonPressed,
        }}
        tintColor='#008888' />
    );
  },
  render: function() {
    return (
      <SMXTabBarIOS>
        <SMXTabBarItemIOS
          title='Categories'
          // iconName={'ion|android-list'}
          iconName={'fontawesome|barcode'}
          iconSize={24}
          selected={this.state.selectedTab === 1}
          onPress={() => {
            this.setState({
              selectedTab: 1,
              presses: this.state.presses + 1
            });
          }}>
          {this._renderContentWithNavigation(YoloCategories, 'Toggle All')}
        </SMXTabBarItemIOS>
        <SMXTabBarItemIOS
          title='Coupons'
          iconName={'ion|pricetags'}
          iconSize={26}
          badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
          selected={this.state.selectedTab === 2}
          onPress={() => {
            this.setState({
              selectedTab: 2,
              notifCount: this.state.notifCount + 1,
            });
          }}>
          {this._renderContentWithNavigation(YoloList)}
        </SMXTabBarItemIOS>
        <SMXTabBarItemIOS
          title='Info'
          iconName={'ion|gear-a'}
          iconSize={26}
          selected={this.state.selectedTab === 3}
          onPress={() => {
            this.setState({
              selectedTab: 3,
            });
          }}>
          <YoloSettings/>
        </SMXTabBarItemIOS>
      </SMXTabBarIOS>
    )
  }
});


var YoloCategories = React.createClass({
  statics: {
    title: '<ListView> - Simple',
    description: 'Performant, scrollable list of data.'
  },
  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(this._genRows({})),
    };
  },

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

  componentWillMount: function() {
    this.disabledCategories = {};
  },

  render: function() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this._renderRow} />
    );
  },

  _renderRow: function(rowData: string, sectionID: number, rowID: number) {
    var rowHash = Math.abs(hashCode(rowData));
    var imgSource = {
      uri: THUMB_URLS[rowHash % THUMB_URLS.length],
    };
    var icon = this.disabledCategories[rowID] ? 'fontawesome|ban' : 'ion|ios-heart'
    var color = this.disabledCategories[rowID] ? '#999999' : '#ee4400'

    return (
      <TouchableHighlight onPress={() => this._pressRow(rowID)}>
        <View>
          <View style={styles.row}>
            <Icon
              name={icon}
              size={36}
              color={color}
              style={styles.thumb} />
            <Text style={styles.boldText}>
              {rowData} {this.props.hello}
            </Text>
          </View>
          <View style={styles.separator} />
        </View>
      </TouchableHighlight>
    );
  },

  _genRows: function(): Array<string> {
    var dataBlob = [];
    for (var ii = 0; ii < CATEGORIES.length; ii++) {
      dataBlob.push(CATEGORIES[ii] + (this.disabledCategories[ii] ? ' ' : ''));
    }
    return dataBlob;
  },

  _pressRow: function(rowID: number) {
    this.disabledCategories[rowID] = !this.disabledCategories[rowID];
    this.setState({dataSource: this.state.dataSource.cloneWithRows(
      this._genRows()
    )});
  },
  rightButtonPressed: function() {
    alert(9)
  }
});