Skip to content

Commit

Permalink
Add disabled TouchableNativeFeedback button example
Browse files Browse the repository at this point in the history
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 facebook/react-native#6123

Differential Revision: D2971021

fb-gh-sync-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839
shipit-source-id: 3be18bda15b5b495caaf9e4444fd0deb47a44839
  • Loading branch information
Kureev Alexey authored and facebook-github-bot-6 committed Feb 24, 2016
1 parent 79bef87 commit fd6acd2
Showing 1 changed file with 33 additions and 0 deletions.
33 changes: 33 additions & 0 deletions UIExplorer/TouchableExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ var {
TouchableHighlight,
TouchableOpacity,
UIManager,
Platform,
TouchableNativeFeedback,
View,
} = React;

Expand Down Expand Up @@ -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>
);
}
Expand Down Expand Up @@ -366,6 +395,10 @@ var styles = StyleSheet.create({
color: '#007AFF',
opacity: 0.5,
},
nativeFeedbackButton: {
textAlign: 'center',
margin: 10,
},
hitSlopButton: {
color: 'white',
},
Expand Down

0 comments on commit fd6acd2

Please sign in to comment.