From 44ec762e41029bf43530b1ff9b36ca3512c526e2 Mon Sep 17 00:00:00 2001
From: Vojtech Novak <vonovak@gmail.com>
Date: Thu, 9 Apr 2020 15:34:49 -0700
Subject: [PATCH] fix: ripple should be applied even when borderless == false
 (#28526)

Summary:
With current master, when you render `<Pressable android_ripple={{borderless: false}}>`, there is no ripple effect at all.

I think the expected behavior is to have ripple with default color and radius, just not borderless.

This was how it was done (by me) in https://github.com/facebook/react-native/pull/28156/files but in the import process, the implementation was changed: https://github.com/facebook/react-native/commit/bd3868643d29e93610e19312571a9736df2cbdf8 so either this PR is a fix or you can just close it (but I'd be curious why).

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [fixed] - ripple should be applied even when borderless == false
Pull Request resolved: https://github.com/facebook/react-native/pull/28526

Test Plan:
`<Pressable android_ripple={{borderless: false}}>` on master

![SVID_20200404_123614_1](https://user-images.githubusercontent.com/1566403/78424971-6b315a80-7671-11ea-8be4-5fea428bc556.gif)

`<Pressable android_ripple={{borderless: false}}>` in this PR

![SVID_20200404_122754_1](https://user-images.githubusercontent.com/1566403/78424986-8bf9b000-7671-11ea-9804-37cd58dbb61e.gif)

Differential Revision: D20952026

Pulled By: TheSavior

fbshipit-source-id: df2b95fc6f20d7e958e91805b1a928c4f85904f1
---
 Libraries/Components/Pressable/Pressable.js   |  1 -
 .../Pressable/useAndroidRippleForView.js      | 13 ++---
 .../js/examples/Pressable/PressableExample.js | 56 +++++++++++--------
 3 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index 963933d13ca..545ecd4ec13 100644
--- a/Libraries/Components/Pressable/Pressable.js
+++ b/Libraries/Components/Pressable/Pressable.js
@@ -24,7 +24,6 @@ import type {
 } from '../View/ViewAccessibility';
 import usePressability from '../../Pressability/usePressability';
 import {normalizeRect, type RectOrSize} from '../../StyleSheet/Rect';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
 import type {LayoutEvent, PressEvent} from '../../Types/CoreEventTypes';
 import View from '../View/View';
 
diff --git a/Libraries/Components/Pressable/useAndroidRippleForView.js b/Libraries/Components/Pressable/useAndroidRippleForView.js
index 44972fb860f..6aafbedf2c1 100644
--- a/Libraries/Components/Pressable/useAndroidRippleForView.js
+++ b/Libraries/Components/Pressable/useAndroidRippleForView.js
@@ -26,9 +26,9 @@ type NativeBackgroundProp = $ReadOnly<{|
 |}>;
 
 export type RippleConfig = {|
-  color?: ?ColorValue,
-  borderless?: ?boolean,
-  radius?: ?number,
+  color?: ColorValue,
+  borderless?: boolean,
+  radius?: number,
 |};
 
 /**
@@ -47,13 +47,12 @@ export default function useAndroidRippleForView(
   |}>,
 |}> {
   const {color, borderless, radius} = rippleConfig ?? {};
-  const normalizedBorderless = borderless === true;
 
   return useMemo(() => {
     if (
       Platform.OS === 'android' &&
       Platform.Version >= 21 &&
-      (color != null || normalizedBorderless || radius != null)
+      (color != null || borderless != null || radius != null)
     ) {
       const processedColor = processColor(color);
       invariant(
@@ -67,7 +66,7 @@ export default function useAndroidRippleForView(
           nativeBackgroundAndroid: {
             type: 'RippleAndroid',
             color: processedColor,
-            borderless: normalizedBorderless,
+            borderless: borderless === true,
             rippleRadius: radius,
           },
         },
@@ -101,5 +100,5 @@ export default function useAndroidRippleForView(
       };
     }
     return null;
-  }, [color, normalizedBorderless, radius, viewRef]);
+  }, [color, borderless, radius, viewRef]);
 }
diff --git a/RNTester/js/examples/Pressable/PressableExample.js b/RNTester/js/examples/Pressable/PressableExample.js
index 1dadac6b1c4..e57f6320098 100644
--- a/RNTester/js/examples/Pressable/PressableExample.js
+++ b/RNTester/js/examples/Pressable/PressableExample.js
@@ -378,7 +378,7 @@ exports.examples = [
   },
   {
     title: 'Pressable with custom Ripple',
-    description: ("Pressable can specify ripple's radius and borderless params": string),
+    description: ("Pressable can specify ripple's radius, color and borderless params": string),
     platform: 'android',
     render: function(): React.Node {
       const nativeFeedbackButton = {
@@ -386,32 +386,42 @@ exports.examples = [
         margin: 10,
       };
       return (
-        <View
-          style={[
-            styles.row,
-            {justifyContent: 'space-around', alignItems: 'center'},
-          ]}>
-          <Pressable
-            android_ripple={{color: 'orange', borderless: true, radius: 30}}>
-            <View>
-              <Text style={[styles.button, nativeFeedbackButton]}>
-                radius 30
-              </Text>
-            </View>
-          </Pressable>
+        <View>
+          <View
+            style={[
+              styles.row,
+              {justifyContent: 'space-around', alignItems: 'center'},
+            ]}>
+            <Pressable
+              android_ripple={{color: 'orange', borderless: true, radius: 30}}>
+              <View>
+                <Text style={[styles.button, nativeFeedbackButton]}>
+                  radius 30
+                </Text>
+              </View>
+            </Pressable>
 
-          <Pressable android_ripple={{borderless: true, radius: 150}}>
-            <View>
-              <Text style={[styles.button, nativeFeedbackButton]}>
-                radius 150
-              </Text>
-            </View>
-          </Pressable>
+            <Pressable android_ripple={{borderless: true, radius: 150}}>
+              <View>
+                <Text style={[styles.button, nativeFeedbackButton]}>
+                  radius 150
+                </Text>
+              </View>
+            </Pressable>
 
-          <Pressable android_ripple={{borderless: false, radius: 70}}>
+            <Pressable android_ripple={{borderless: false, radius: 70}}>
+              <View style={styles.block}>
+                <Text style={[styles.button, nativeFeedbackButton]}>
+                  radius 70, with border
+                </Text>
+              </View>
+            </Pressable>
+          </View>
+
+          <Pressable android_ripple={{borderless: false}}>
             <View style={styles.block}>
               <Text style={[styles.button, nativeFeedbackButton]}>
-                radius 70, with border
+                with border, default color and radius
               </Text>
             </View>
           </Pressable>