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: bd38686 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: #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

@@ -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';
 

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]);
 }

RNTester/js/examples/Pressable/PressableExample.js

@@ -378,40 +378,50 @@ 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 = {
         textAlign: 'center',
         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}}>
+              <View style={styles.block}>
+                <Text style={[styles.button, nativeFeedbackButton]}>
+                  radius 70, with border
+                </Text>
+              </View>
+            </Pressable>
+          </View>
 
-          <Pressable android_ripple={{borderless: false, radius: 70}}>
+          <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>