Updates from Thu Feb 26

- [Children] Expose React.Children like web React | James Ide
- Remove touch handler assertions - not always true | Tadeu Zagallo
- [treehouse] Add support for clear button on UITextFields | Sumeet Vaidya
- [Touch] Suite of touchable events on TouchableHighlight/Opacity | James Ide
- [Images] Bail out when GIF data is in unexpected format instead of crashing | James Ide

Examples/UIExplorer/TouchableExample.js

@@ -12,6 +12,7 @@ var {
   StyleSheet,
   Text,
   TouchableHighlight,
+  TouchableOpacity,
   View,
 } = React;
 
@@ -57,6 +58,13 @@ exports.examples = [
   render: function() {
     return <TextOnPressBox />;
   },
+}, {
+  title: 'Touchable feedback events',
+  description: '<Touchable*> components accept onPress, onPressIn, ' +
+    'onPressOut, and onLongPress as props.',
+  render: function() {
+    return <TouchableFeedbackEvents />;
+  },
 }];
 
 var TextOnPressBox = React.createClass({
@@ -95,11 +103,46 @@ var TextOnPressBox = React.createClass({
   }
 });
 
+var TouchableFeedbackEvents = React.createClass({
+  getInitialState: function() {
+    return {
+      eventLog: [],
+    };
+  },
+  render: function() {
+    return (
+      <View>
+        <View style={[styles.row, {justifyContent: 'center'}]}>
+        <TouchableOpacity
+          style={styles.wrapper}
+          onPress={() => this._appendEvent('press')}
+          onPressIn={() => this._appendEvent('pressIn')}
+          onPressOut={() => this._appendEvent('pressOut')}
+          onLongPress={() => this._appendEvent('longPress')}>
+          <Text style={styles.button}>
+            Press Me
+          </Text>
+        </TouchableOpacity>
+      </View>
+        <View style={styles.eventLogBox}>
+          {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
+        </View>
+      </View>
+    );
+  },
+  _appendEvent: function(eventName) {
+    var limit = 6;
+    var eventLog = this.state.eventLog.slice(0, limit - 1);
+    eventLog.unshift(eventName);
+    this.setState({eventLog});
+  },
+});
+
 var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
 
 var styles = StyleSheet.create({
   row: {
-    alignItems: 'center',
+    justifyContent: 'center',
     flexDirection: 'row',
   },
   icon: {
@@ -113,6 +156,9 @@ var styles = StyleSheet.create({
   text: {
     fontSize: 16,
   },
+  button: {
+    color: '#007AFF',
+  },
   wrapper: {
     borderRadius: 8,
   },
@@ -127,6 +173,14 @@ var styles = StyleSheet.create({
     borderColor: '#f0f0f0',
     backgroundColor: '#f9f9f9',
   },
+  eventLogBox: {
+    padding: 10,
+    margin: 10,
+    height: 120,
+    borderWidth: 1 / PixelRatio.get(),
+    borderColor: '#f0f0f0',
+    backgroundColor: '#f9f9f9',
+  },
   textBlock: {
     fontWeight: 'bold',
     color: 'blue',