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 https://github.com/facebook/react-native/pull/6123 Differential Revision: D2971021 fb-gh-sync-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839 shipit-source-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839
This commit is contained in:
parent
21ee7fde6e
commit
b4992efca9
|
@ -24,6 +24,8 @@ var {
|
|||
TouchableHighlight,
|
||||
TouchableOpacity,
|
||||
UIManager,
|
||||
Platform,
|
||||
TouchableNativeFeedback,
|
||||
View,
|
||||
} = React;
|
||||
|
||||
|
@ -333,6 +335,33 @@ var TouchableDisabled = React.createClass({
|
|||
Disabled TouchableHighlight
|
||||
</Text>
|
||||
</TouchableHighlight>
|
||||
|
||||
{Platform.OS === 'android' &&
|
||||
<TouchableNativeFeedback
|
||||
style={[styles.row, styles.block]}
|
||||
onPress={() => console.log('custom TNF has been clicked')}
|
||||
background={TouchableNativeFeedback.SelectableBackground()}>
|
||||
<View>
|
||||
<Text style={[styles.button, styles.nativeFeedbackButton]}>
|
||||
Enabled TouchableNativeFeedback
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableNativeFeedback>
|
||||
}
|
||||
|
||||
{Platform.OS === 'android' &&
|
||||
<TouchableNativeFeedback
|
||||
disabled={true}
|
||||
style={[styles.row, styles.block]}
|
||||
onPress={() => console.log('custom TNF has been clicked')}
|
||||
background={TouchableNativeFeedback.SelectableBackground()}>
|
||||
<View>
|
||||
<Text style={[styles.disabledButton, styles.nativeFeedbackButton]}>
|
||||
Disabled TouchableNativeFeedback
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableNativeFeedback>
|
||||
}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
@ -366,6 +395,10 @@ var styles = StyleSheet.create({
|
|||
color: '#007AFF',
|
||||
opacity: 0.5,
|
||||
},
|
||||
nativeFeedbackButton: {
|
||||
textAlign: 'center',
|
||||
margin: 10,
|
||||
},
|
||||
hitSlopButton: {
|
||||
color: 'white',
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue