diff --git a/UIExplorer/TouchableExample.js b/UIExplorer/TouchableExample.js
index 7aa2be01c68..66a919a3cdd 100644
--- a/UIExplorer/TouchableExample.js
+++ b/UIExplorer/TouchableExample.js
@@ -12,6 +12,7 @@ var {
StyleSheet,
Text,
TouchableHighlight,
+ TouchableOpacity,
View,
} = React;
@@ -57,6 +58,13 @@ exports.examples = [
render: function() {
return ;
},
+}, {
+ title: 'Touchable feedback events',
+ description: ' components accept onPress, onPressIn, ' +
+ 'onPressOut, and onLongPress as props.',
+ render: function() {
+ return ;
+ },
}];
var TextOnPressBox = React.createClass({
@@ -95,11 +103,46 @@ var TextOnPressBox = React.createClass({
}
});
+var TouchableFeedbackEvents = React.createClass({
+ getInitialState: function() {
+ return {
+ eventLog: [],
+ };
+ },
+ render: function() {
+ return (
+
+
+ this._appendEvent('press')}
+ onPressIn={() => this._appendEvent('pressIn')}
+ onPressOut={() => this._appendEvent('pressOut')}
+ onLongPress={() => this._appendEvent('longPress')}>
+
+ Press Me
+
+
+
+
+ {this.state.eventLog.map((e, ii) => {e})}
+
+
+ );
+ },
+ _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',