react-native-demo/groups.ios.js at master · meetuparchive/react-native-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';


// Include base React components
var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Image,
  ScrollView,
  Text,
  TouchableOpacity,
  View,
} = React;

// Include more React components
var Dummy = require('./dummy.ios');

// Include Meetup stuff
var gimme = require('gimme');
var foundation = require('react-native-foundation');


// Begin
var Groups = React.createClass({

  // set up state (changable data) before anything happens
  getInitialState: function(){
    return {
      groups: []
    };
  },

  // immediately after initial rendering
  componentDidMount: function(){
    var self = this;
    var shoppingList = [
      {"gimme": "groups", "data": {"page": 32, "zip": 15205}}
    ];
    gimme.apiKey = '715d68731b3913292f447f4c45547'; // change to your api key otherwise we'll all get throttled
    gimme.get(shoppingList).then(function(data){
      self.setState({
        groups: data.groups
      });
    });
  },

  // put things on the screen
  render: function() {
    var self = this;
    return (
      <View style={[foundation.stripe]}>
      <ScrollView style={foundation.list}>

        {/* this works, but for longer lists it's better use ListView */}
        {this.state.groups.map(function(g, i){
          return(
            <TouchableOpacity onPress={() => {
              self.props.navigator.push({
                component: Dummy,
                name: "Whatevs"
              });
            }}>
              <View key={i} style={foundation.listItem}>
                <View style={[foundation.alignItemsCenter, foundation.chunk]}>
                  <Image
                    style={foundation.avatarLarge}
                    source={{uri: g.photo }}
                    resizeMode='cover'
                    />
                  <Text style={[foundation.text, foundation.textAlignCenter]}>{g.name}</Text>
                </View>
              </View>
            </TouchableOpacity>
          );
        })}

      </ScrollView>
      </View>
    );
  }
});


// screen-specific styles
var styles = StyleSheet.create({
  /*
  // example
  button: {
    backgroundColor: 'lightblue',
    flex: 1,
    padding: 16
  }
  */
});

module.exports = Groups;