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',