kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-05-17 19:33:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Modify TouchableNativeFeedback (Ripple) to follow borderRadius

Browse Source 
Summary:Using TouchableNativeFeedback has been a problem for me because the ripples it makes don't follow the child view's border radii so the ripples stick out of the child view's rounded corners. This PR should fix this problem with a minor caveat: this only works for TouchableNativeFeedback.Ripple and not TouchableNativeFeedback.SelectableBackground. I searched how I could apply corner radius to selectableItemBackground and it doesn't seem to be possible (the prevalent advice is to create the ripple manually which is equivalent to using TNF.Ripple in our case), though I could be wrong.

I added [an example to UIExplorer (TouchableExample)](http://i.imgur.com/CHY9xjW.png). This is my first PR to this repo so let me know if something's wrong. Cheers!
Closes https://github.com/facebook/react-native/pull/6515

Differential Revision: D3126513

Pulled By: mkonicek

fb-gh-sync-id: 1d3e92243abf9706132ae47c485d9e04a9b47d81
fbshipit-source-id: 1d3e92243abf9706132ae47c485d9e04a9b47d81
This commit is contained in:
Jeff Chien
2016-04-22 09:06:31 -07:00
committed by Facebook Github Bot 2
parent 44d36f7c5f
commit e438954938
6 changed files with 103 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
Examples/UIExplorer/TouchableExample.js
View File

@@ -110,6 +110,14 @@ exports.examples = [
render: function(): ReactElement {
return <TouchableDisabled />;
},
}, {
title: 'TouchableNativeFeedback with Border Radius',
description: 'The ripples from <TouchableNativeFeedback> should follow borderRadius. ' +
'This only works with a non-borderless background from TouchableNativeFeedback.Ripple',
platform: 'android',
render: function(): ReactElement {
return <TouchableNativeFeedbackBorderRadius />;
},
}];
var TextOnPressBox = React.createClass({
@@ -368,6 +376,25 @@ var TouchableDisabled = React.createClass({
}
});
var TouchableNativeFeedbackBorderRadius = React.createClass({
render: function() {
return (
<View>
<TouchableNativeFeedback
style={[styles.row, styles.block]}
onPress={() => console.log('TouchableNativeFeedback Ripple with Border Radius has been clicked')}
background={TouchableNativeFeedback.Ripple('#ccc')}>
<View style={[styles.tnfBorderRadiusView]}>
<Text style={[styles.button, styles.nativeFeedbackButton]}>
TouchableNativeFeedback.Ripple with Border Radius
</Text>
</View>
</TouchableNativeFeedback>
</View>
);
}
});
var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
var styles = StyleSheet.create({
@@ -441,4 +468,10 @@ var styles = StyleSheet.create({
fontWeight: '500',
color: 'blue',
},
tnfBorderRadiusView: {
borderTopLeftRadius: 10,
borderTopRightRadius: 5,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 20
}
});