Skip to content

Commit b4992ef

Browse files
Kureev Alexeyfacebook-github-bot-6
authored andcommitted
Add disabled TouchableNativeFeedback button example
Summary:Follow-up PR for #5931: Adding missing `TouchableNativeFeedback` example. **Test plan** - Run UIExplorer on iOS and Android devices [Android] - Go to Touchable* examples and scroll down to the `Disabled Touchable*` section. There are two new buttons there: `Enabled TouchableNativeFeedback` and `Disabled TouchableNativeFeedback`. Buttons should behave according their titles. [iOS] - Go to Touchable* examples and scroll down to the `Disabled Touchable*` section. As far as `TouchableNativeFeedback` is supported on Android only, you **wouldn't see** any new buttons there **Code formatting** This PR code style match the desired [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide). cc mkonicek Closes #6123 Differential Revision: D2971021 fb-gh-sync-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839 shipit-source-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839
1 parent 21ee7fd commit b4992ef

File tree

1 file changed

+33
-0
lines changed

1 file changed

+33
-0
lines changed

Examples/UIExplorer/TouchableExample.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ var {
2424
TouchableHighlight,
2525
TouchableOpacity,
2626
UIManager,
27+
Platform,
28+
TouchableNativeFeedback,
2729
View,
2830
} = React;
2931

@@ -333,6 +335,33 @@ var TouchableDisabled = React.createClass({
333335
Disabled TouchableHighlight
334336
</Text>
335337
</TouchableHighlight>
338+
339+
{Platform.OS === 'android' &&
340+
<TouchableNativeFeedback
341+
style={[styles.row, styles.block]}
342+
onPress={() => console.log('custom TNF has been clicked')}
343+
background={TouchableNativeFeedback.SelectableBackground()}>
344+
<View>
345+
<Text style={[styles.button, styles.nativeFeedbackButton]}>
346+
Enabled TouchableNativeFeedback
347+
</Text>
348+
</View>
349+
</TouchableNativeFeedback>
350+
}
351+
352+
{Platform.OS === 'android' &&
353+
<TouchableNativeFeedback
354+
disabled={true}
355+
style={[styles.row, styles.block]}
356+
onPress={() => console.log('custom TNF has been clicked')}
357+
background={TouchableNativeFeedback.SelectableBackground()}>
358+
<View>
359+
<Text style={[styles.disabledButton, styles.nativeFeedbackButton]}>
360+
Disabled TouchableNativeFeedback
361+
</Text>
362+
</View>
363+
</TouchableNativeFeedback>
364+
}
336365
</View>
337366
);
338367
}
@@ -366,6 +395,10 @@ var styles = StyleSheet.create({
366395
color: '#007AFF',
367396
opacity: 0.5,
368397
},
398+
nativeFeedbackButton: {
399+
textAlign: 'center',
400+
margin: 10,
401+
},
369402
hitSlopButton: {
370403
color: 'white',
371404
},

0 commit comments

Comments
 (0)