Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions Libraries/Components/Touchable/TouchableWithoutFeedback.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
const DeprecatedEdgeInsetsPropType = require('DeprecatedEdgeInsetsPropType');
const React = require('React');
const PropTypes = require('prop-types');
const TimerMixin = require('react-timer-mixin');
const Touchable = require('Touchable');
const View = require('View');

Expand Down Expand Up @@ -80,7 +79,7 @@ export type Props = $ReadOnly<{|
*/
const TouchableWithoutFeedback = ((createReactClass({
displayName: 'TouchableWithoutFeedback',
mixins: [TimerMixin, Touchable.Mixin],
mixins: [Touchable.Mixin],

propTypes: {
accessible: PropTypes.bool,
Expand Down
66 changes: 66 additions & 0 deletions RNTester/js/TouchableExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ var {
TouchableOpacity,
Platform,
TouchableNativeFeedback,
TouchableWithoutFeedback,
View,
} = ReactNative;

Expand Down Expand Up @@ -70,6 +71,12 @@ exports.examples = [
);
},
},
{
title: '<TouchableWithoutFeedback>',
render: function() {
return <TouchableWithoutFeedbackBox />;
},
},
{
title: 'TouchableNativeFeedback with Animated child',
description:
Expand Down Expand Up @@ -150,6 +157,40 @@ exports.examples = [
},
];

class TouchableWithoutFeedbackBox extends React.Component<{}, $FlowFixMeState> {
state = {
timesPressed: 0,
};

textOnPress = () => {
this.setState({
timesPressed: this.state.timesPressed + 1,
});
};

render() {
var textLog = '';
if (this.state.timesPressed > 1) {
textLog = this.state.timesPressed + 'x TouchableWithoutFeedback onPress';
} else if (this.state.timesPressed > 0) {
textLog = 'TouchableWithoutFeedback onPress';
}

return (
<View>
<TouchableWithoutFeedback onPress={this.textOnPress}>
<View style={styles.wrapperCustom}>
<Text style={styles.text}>Tap Here For No Feedback!</Text>
</View>
</TouchableWithoutFeedback>
<View style={styles.logBox}>
<Text>{textLog}</Text>
</View>
</View>
);
}
}

class TextOnPressBox extends React.Component<{}, $FlowFixMeState> {
state = {
timesPressed: 0,
Expand Down Expand Up @@ -360,6 +401,31 @@ class TouchableDisabled extends React.Component<{}> {
<Text style={styles.button}>Enabled TouchableHighlight</Text>
</TouchableHighlight>

<TouchableWithoutFeedback
onPress={() => console.log('TWOF has been clicked')}
disabled={true}>
<View style={styles.wrapperCustom}>
<Text
style={[
styles.button,
styles.nativeFeedbackButton,
styles.disabledButton,
]}>
Disabled TouchableWithoutFeedback
</Text>
</View>
</TouchableWithoutFeedback>

<TouchableWithoutFeedback
onPress={() => console.log('TWOF has been clicked')}
disabled={false}>
<View style={styles.wrapperCustom}>
<Text style={[styles.button, styles.nativeFeedbackButton]}>
Enabled TouchableWithoutFeedback
</Text>
</View>
</TouchableWithoutFeedback>

{Platform.OS === 'android' && (
<TouchableNativeFeedback
style={[styles.row, styles.block]}
Expand Down