Permalink
Browse files

Android: enable foreground ripple

Reviewed By: astreet

Differential Revision: D3932066

fbshipit-source-id: ee2f019cb9ba41e32cbbd8c1cd07c9ed5263fddc
  • Loading branch information...
1 parent 8915507 commit 6d175f2c257fe1acb1c36b15bc97bdb77560885c @foghina foghina committed with Facebook Github Bot Oct 3, 2016
@@ -10,6 +10,7 @@
*/
'use strict';
+var Platform = require('Platform');
var PropTypes = require('react/lib/ReactPropTypes');
var React = require('React');
var ReactNative = require('react/lib/ReactNative');
@@ -41,6 +42,7 @@ var backgroundPropType = PropTypes.oneOfType([
var TouchableView = requireNativeComponent('RCTView', null, {
nativeOnly: {
nativeBackgroundAndroid: backgroundPropType,
+ nativeForegroundAndroid: backgroundPropType,
}
});
@@ -86,6 +88,17 @@ var TouchableNativeFeedback = React.createClass({
* methods to generate that dictionary.
*/
background: backgroundPropType,
+
+ /**
+ * Set to true to add the ripple effect to the foreground of the view, instead of the
+ * background. This is useful if one of your child views has a background of its own, or you're
+ * e.g. displaying images, and you don't want the ripple to be covered by them.
+ *
+ * Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on
+ * Android 6.0 and above. If you try to use this on older versions you will get a warning and
+ * fallback to background.
+ */
+ useForeground: PropTypes.bool,
},
statics: {
@@ -117,6 +130,10 @@ var TouchableNativeFeedback = React.createClass({
Ripple: function(color: string, borderless: boolean) {
return {type: 'RippleAndroid', color: processColor(color), borderless: borderless};
},
+
+ canUseNativeForeground: function() {
+ return Platform.OS === 'android' && Platform.Version >= 23;
+ }
},
mixins: [Touchable.Mixin],
@@ -213,9 +230,19 @@ var TouchableNativeFeedback = React.createClass({
}
children.push(Touchable.renderDebugView({color: 'brown', hitSlop: this.props.hitSlop}));
}
+ if (this.props.useForeground && !TouchableNativeFeedback.canUseNativeForeground()) {
+ console.warn(
+ 'Requested foreground ripple, but it is not available on this version of Android. ' +
+ 'Consider calling TouchableNativeFeedback.canUseNativeForeground() and using a different ' +
+ 'Touchable if the result is false.');
+ }
+ const drawableProp =
+ this.props.useForeground && TouchableNativeFeedback.canUseNativeForeground()
+ ? 'nativeForegroundAndroid'
+ : 'nativeBackgroundAndroid';
var childProps = {
...child.props,
- nativeBackgroundAndroid: this.props.background,
+ [drawableProp]: this.props.background,
accessible: this.props.accessible !== false,
accessibilityLabel: this.props.accessibilityLabel,
accessibilityComponentType: this.props.accessibilityComponentType,
@@ -509,6 +509,7 @@ const View = React.createClass({
const RCTView = requireNativeComponent('RCTView', View, {
nativeOnly: {
nativeBackgroundAndroid: true,
+ nativeForegroundAndroid: true,
}
});
@@ -14,6 +14,7 @@
import java.util.Locale;
import java.util.Map;
+import android.annotation.TargetApi;
import android.graphics.Rect;
import android.os.Build;
import android.view.View;
@@ -101,6 +102,14 @@ public void setNativeBackground(ReactViewGroup view, @Nullable ReadableMap bg) {
null : ReactDrawableHelper.createDrawableFromJSDescription(view.getContext(), bg));
}
+ @TargetApi(Build.VERSION_CODES.M)
+ @ReactProp(name = "nativeForegroundAndroid")
+ public void setNativeForeground(ReactViewGroup view, @Nullable ReadableMap fg) {
+ view.setForeground(fg == null
+ ? null
+ : ReactDrawableHelper.createDrawableFromJSDescription(view.getContext(), fg));
+ }
+
@ReactProp(name = com.facebook.react.uimanager.ReactClippingViewGroupHelper.PROP_REMOVE_CLIPPED_SUBVIEWS)
public void setRemoveClippedSubviews(ReactViewGroup view, boolean removeClippedSubviews) {
view.setRemoveClippedSubviews(removeClippedSubviews);

0 comments on commit 6d175f2

Please sign in to comment.