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,
|
TouchableHighlight,
|
||||||
TouchableOpacity,
|
TouchableOpacity,
|
||||||
UIManager,
|
UIManager,
|
||||||
|
Platform,
|
||||||
|
TouchableNativeFeedback,
|
||||||
View,
|
View,
|
||||||
} = React;
|
} = React;
|
||||||
|
|
||||||
|
@ -333,6 +335,33 @@ var TouchableDisabled = React.createClass({
|
||||||
Disabled TouchableHighlight
|
Disabled TouchableHighlight
|
||||||
</Text>
|
</Text>
|
||||||
</TouchableHighlight>
|
</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>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -366,6 +395,10 @@ var styles = StyleSheet.create({
|
||||||
color: '#007AFF',
|
color: '#007AFF',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
},
|
},
|
||||||
|
nativeFeedbackButton: {
|
||||||
|
textAlign: 'center',
|
||||||
|
margin: 10,
|
||||||
|
},
|
||||||
hitSlopButton: {
|
hitSlopButton: {
|
||||||
color: 'white',
|
color: 'white',
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue