Skip to content

Commit

Permalink
[Touch] Suite of touchable events on TouchableHighlight/Opacity
Browse files Browse the repository at this point in the history
Summary:
The following props are now supported on TouchableHighlight/Opacity components:

 - onPress (was there before)
 - onPressIn
 - onPressOut
 - onLongPress

There is a `TouchableFeedbackPropType` that is shared amongst the Touchable family for consistency.

Added UIExplorer example to demonstrate and test.

Fixes #101.
Closes facebook/react-native#102
Github Author: James Ide <ide@jameside.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
  • Loading branch information
ide committed Feb 26, 2015
1 parent b33b109 commit e435861
Showing 1 changed file with 55 additions and 1 deletion.
56 changes: 55 additions & 1 deletion UIExplorer/TouchableExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ var {
StyleSheet,
Text,
TouchableHighlight,
TouchableOpacity,
View,
} = React;

Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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: {
Expand All @@ -113,6 +156,9 @@ var styles = StyleSheet.create({
text: {
fontSize: 16,
},
button: {
color: '#007AFF',
},
wrapper: {
borderRadius: 8,
},
Expand All @@ -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',
Expand Down

0 comments on commit e435861

Please sign in to comment.