kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-23 11:57:46 +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

6
Libraries/Components/Touchable/TouchableNativeFeedback.android.js
View File

@@ -92,6 +92,9 @@ var TouchableNativeFeedback = React.createClass({
/**
* Creates an object that represents android theme's default background for
* selectable elements (?android:attr/selectableItemBackground).
*
* The backgrounds generated by this method DO NOT follow the child view's
* border radii styles. To clip the background with border radii, use Ripple.
*/
SelectableBackground: function() {
return {type: 'ThemeAttrAndroid', attribute: 'selectableItemBackground'};
@@ -111,6 +114,9 @@ var TouchableNativeFeedback = React.createClass({
* example of that behavior). This background type is available on Android
* API level 21+.
*
* The non-borderless backgrounds generated by this method follows the child
* view's border radii styles (e.g. the ripples are clipped by the border radii).
*
* @param color The ripple color
* @param borderless If the ripple can render outside it's bounds
*/