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

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

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