add collection example

src/components/Collection.js

@@ -0,0 +1,67 @@
+import React from 'react-native';
+import Relay from 'react-relay';
+
+var {
+  ListView,
+  View,
+  Text,
+} = React;
+
+var Collection = React.createClass ({
+
+  getInitialState() {
+    var ds = new ListView.DataSource({rowHasChanged: function rowHasChanged(r1, r2) {
+      if (typeof r1.isLoading !== 'undefined') {
+        return true;
+      }
+      return r1 !== r2;
+    }});
+    return {
+      dataSource: ds.cloneWithRows([]),
+    };
+  },
+
+  componentWillMount() {
+    this.setState({
+      dataSource: this.state.dataSource.cloneWithRows(this.props.viewer.widgets.edges),
+    });
+  },
+
+  renderRow(edge) {
+    return (
+      <View>
+        <Text>ID: {edge.node.id}</Text>
+        <Text>NAME: {edge.node.name}</Text>
+      </View>
+    );
+  },
+
+  render() {
+      return (
+      <View>
+        <Text>Collection Example:</Text>
+        <ListView
+          dataSource={this.state.dataSource}
+          renderRow={this.renderRow}
+        />
+      </View>
+    );
+  }
+});
+
+export default Relay.createContainer(Collection, {
+  fragments: {
+    viewer: () => Relay.QL`
+      fragment on User {
+        widgets(first: 10) {
+          edges {
+            node {
+              id
+              name
+            },
+          },
+        },
+      }
+    `,
+  },
+});

src/components/FixApp.js

@@ -1,17 +1,22 @@
 import React from 'react-native';
 import Relay from 'react-relay';
+import Simple from './Simple';
+import Collection from './Collection';
 
 var {
-  StyleSheet,
-  Text,
   View,
 } = React;
 
 var FixApp = React.createClass({
   render() {
     return (
-        <View style={styles.view}>
-          <Text>Viewer ID: {this.props.viewer.id}</Text>
+        <View>
+          <Simple
+            viewer={this.props.viewer}
+          />
+          <Collection
+            viewer={this.props.viewer}
+          />
         </View>
     )
   }
@@ -21,17 +26,9 @@ export default Relay.createContainer(FixApp, {
   fragments: {
     viewer: () => Relay.QL`
       fragment on User {
-        id
+        ${Simple.getFragment('viewer')},
+        ${Collection.getFragment('viewer')},
       }
     `,
   },
 });
-
-var styles = StyleSheet.create({
-  view: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  }
-});

src/components/Simple.js

@@ -0,0 +1,29 @@
+import React from 'react-native';
+import Relay from 'react-relay';
+
+var {
+  View,
+  Text,
+} = React;
+
+var Simple = React.createClass ({
+
+  render() {
+      return (
+        <View>
+          <Text>Simple Example</Text>
+          <Text>Viewer ID: {this.props.viewer.id}</Text>
+        </View>
+    );
+  }
+});
+
+export default Relay.createContainer(Simple, {
+  fragments: {
+    viewer: () => Relay.QL`
+      fragment on User {
+        id
+      }
+    `,
+  },
+});