From 0823f299e560efda5c0f344fcec86cf68801f4ab Mon Sep 17 00:00:00 2001
From: Nishan Bende <nishanbende@gmail.com>
Date: Mon, 7 Jun 2021 17:07:00 -0700
Subject: [PATCH] Foreground ripple support in Pressable (#31632)

Summary:
This PR aims to enable support for foreground ripple in Pressable. This makes it possible to show ripple on top of custom child components like Image as shown in the below example.

## 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] [Added] - Support for foreground ripple in Pressable

Pull Request resolved: https://github.com/facebook/react-native/pull/31632

Test Plan:
- Pass property useForeground: true in android_ripple config to verify the changes.

https://user-images.githubusercontent.com/23293248/120111371-4cecbf00-c18f-11eb-8acb-d10718d5483c.mov

Reviewed By: kacieb

Differential Revision: D28926493

Pulled By: yungsters

fbshipit-source-id: 12a6ba71a7dc6ed60fbaeb651f015cace38e03b1
---
 .../Pressable/useAndroidRippleForView.js      | 31 ++++++++++---------
 .../js/examples/Pressable/PressableExample.js | 21 +++++++++++++
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/Libraries/Components/Pressable/useAndroidRippleForView.js b/Libraries/Components/Pressable/useAndroidRippleForView.js
index be31c5a2e91b49..6ecf6e280ca400 100644
--- a/Libraries/Components/Pressable/useAndroidRippleForView.js
+++ b/Libraries/Components/Pressable/useAndroidRippleForView.js
@@ -27,6 +27,7 @@ export type RippleConfig = {|
   color?: ColorValue,
   borderless?: boolean,
   radius?: number,
+  foreground?: boolean,
 |};
 
 /**
@@ -40,11 +41,11 @@ export default function useAndroidRippleForView(
   onPressIn: (event: PressEvent) => void,
   onPressMove: (event: PressEvent) => void,
   onPressOut: (event: PressEvent) => void,
-  viewProps: $ReadOnly<{|
-    nativeBackgroundAndroid: NativeBackgroundProp,
-  |}>,
+  viewProps:
+    | $ReadOnly<{|nativeBackgroundAndroid: NativeBackgroundProp|}>
+    | $ReadOnly<{|nativeForegroundAndroid: NativeBackgroundProp|}>,
 |}> {
-  const {color, borderless, radius} = rippleConfig ?? {};
+  const {color, borderless, radius, foreground} = rippleConfig ?? {};
 
   return useMemo(() => {
     if (
@@ -58,16 +59,18 @@ export default function useAndroidRippleForView(
         'Unexpected color given for Ripple color',
       );
 
+      const nativeRippleValue = {
+        type: 'RippleAndroid',
+        color: processedColor,
+        borderless: borderless === true,
+        rippleRadius: radius,
+      };
+
       return {
-        viewProps: {
-          // Consider supporting `nativeForegroundAndroid`
-          nativeBackgroundAndroid: {
-            type: 'RippleAndroid',
-            color: processedColor,
-            borderless: borderless === true,
-            rippleRadius: radius,
-          },
-        },
+        viewProps:
+          foreground === true
+            ? {nativeForegroundAndroid: nativeRippleValue}
+            : {nativeBackgroundAndroid: nativeRippleValue},
         onPressIn(event: PressEvent): void {
           const view = viewRef.current;
           if (view != null) {
@@ -98,5 +101,5 @@ export default function useAndroidRippleForView(
       };
     }
     return null;
-  }, [color, borderless, radius, viewRef]);
+  }, [borderless, color, foreground, radius, viewRef]);
 }
diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js
index 3407d7afdcd3ec..7b1bdf1fca5e46 100644
--- a/packages/rn-tester/js/examples/Pressable/PressableExample.js
+++ b/packages/rn-tester/js/examples/Pressable/PressableExample.js
@@ -11,6 +11,7 @@
 import * as React from 'react';
 import {
   Animated,
+  Image,
   Pressable,
   StyleSheet,
   Text,
@@ -310,6 +311,10 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: 'blue',
   },
+  image: {
+    height: 100,
+    width: 100,
+  },
 });
 
 exports.displayName = (undefined: ?string);
@@ -425,6 +430,22 @@ exports.examples = [
               </Text>
             </View>
           </Pressable>
+
+          <View style={{alignItems: 'center'}}>
+            <Pressable
+              android_ripple={{
+                borderless: false,
+                foreground: true,
+              }}>
+              <Image
+                source={{
+                  uri: 'https://www.facebook.com/ads/pics/successstories.png',
+                }}
+                style={styles.image}
+              />
+            </Pressable>
+            <Text>use foreground</Text>
+          </View>
         </View>
       );
     },