From 33d16d04b3989f94323975fff1acfcb3a737f548 Mon Sep 17 00:00:00 2001
From: Vojtech Novak <vonovak@gmail.com>
Date: Sat, 4 Apr 2020 12:29:07 +0200
Subject: [PATCH 1/4] fix: ripple should be applied when borderless == false

---
 .../Pressable/useAndroidRippleForView.js      |  7 +--
 .../js/examples/Pressable/PressableExample.js | 56 +++++++++++--------
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/Libraries/Components/Pressable/useAndroidRippleForView.js b/Libraries/Components/Pressable/useAndroidRippleForView.js
index 44972fb860f669..b8b6e283ea4680 100644
--- a/Libraries/Components/Pressable/useAndroidRippleForView.js
+++ b/Libraries/Components/Pressable/useAndroidRippleForView.js
@@ -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 1dadac6b1c4c13..e57f6320098e54 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}}>
+              <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>

From b049abbd294b962f0816edf4ecb0000af6b1cc28 Mon Sep 17 00:00:00 2001
From: Vojtech Novak <vonovak@gmail.com>
Date: Tue, 7 Apr 2020 00:01:28 +0200
Subject: [PATCH 2/4] second attempt

---
 .../Components/Pressable/useAndroidRippleForView.js   | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/Libraries/Components/Pressable/useAndroidRippleForView.js b/Libraries/Components/Pressable/useAndroidRippleForView.js
index b8b6e283ea4680..004c4a83e83c9c 100644
--- a/Libraries/Components/Pressable/useAndroidRippleForView.js
+++ b/Libraries/Components/Pressable/useAndroidRippleForView.js
@@ -47,13 +47,10 @@ export default function useAndroidRippleForView(
   |}>,
 |}> {
   const {color, borderless, radius} = rippleConfig ?? {};
+  const normalizedBorderless = borderless === true;
 
   return useMemo(() => {
-    if (
-      Platform.OS === 'android' &&
-      Platform.Version >= 21 &&
-      (color != null || borderless != null || radius != null)
-    ) {
+    if (Platform.OS === 'android' && Platform.Version >= 21 && rippleConfig) {
       const processedColor = processColor(color);
       invariant(
         processedColor == null || typeof processedColor === 'number',
@@ -66,7 +63,7 @@ export default function useAndroidRippleForView(
           nativeBackgroundAndroid: {
             type: 'RippleAndroid',
             color: processedColor,
-            borderless: borderless === true,
+            borderless: normalizedBorderless,
             rippleRadius: radius,
           },
         },
@@ -100,5 +97,5 @@ export default function useAndroidRippleForView(
       };
     }
     return null;
-  }, [color, borderless, radius, viewRef]);
+  }, [color, normalizedBorderless, radius, viewRef]);
 }

From 6389cf08dcd778add13398c66e8db2c59ff01aac Mon Sep 17 00:00:00 2001
From: Vojtech Novak <vonovak@gmail.com>
Date: Wed, 8 Apr 2020 20:34:32 +0200
Subject: [PATCH 3/4] do not allow maybe types

---
 .../Pressable/useAndroidRippleForView.js        | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/Libraries/Components/Pressable/useAndroidRippleForView.js b/Libraries/Components/Pressable/useAndroidRippleForView.js
index 004c4a83e83c9c..6aafbedf2c1cde 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,10 +47,13 @@ export default function useAndroidRippleForView(
   |}>,
 |}> {
   const {color, borderless, radius} = rippleConfig ?? {};
-  const normalizedBorderless = borderless === true;
 
   return useMemo(() => {
-    if (Platform.OS === 'android' && Platform.Version >= 21 && rippleConfig) {
+    if (
+      Platform.OS === 'android' &&
+      Platform.Version >= 21 &&
+      (color != null || borderless != null || radius != null)
+    ) {
       const processedColor = processColor(color);
       invariant(
         processedColor == null || typeof processedColor === 'number',
@@ -63,7 +66,7 @@ export default function useAndroidRippleForView(
           nativeBackgroundAndroid: {
             type: 'RippleAndroid',
             color: processedColor,
-            borderless: normalizedBorderless,
+            borderless: borderless === true,
             rippleRadius: radius,
           },
         },
@@ -97,5 +100,5 @@ export default function useAndroidRippleForView(
       };
     }
     return null;
-  }, [color, normalizedBorderless, radius, viewRef]);
+  }, [color, borderless, radius, viewRef]);
 }

From 7ed9b0c7f882aef2d5f11fb88ae78bda80a3e1fc Mon Sep 17 00:00:00 2001
From: Vojtech Novak <vonovak@gmail.com>
Date: Wed, 8 Apr 2020 20:42:28 +0200
Subject: [PATCH 4/4] remove unused type import

---
 Libraries/Components/Pressable/Pressable.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js
index 963933d13ca11b..545ecd4ec1312d 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';