Forward borderless and foreground from android_ripple

packages/react-native-gesture-handler/src/__tests__/pressableRipple.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/react-native';
+import React from 'react';
+import type { Platform as PlatformModule } from 'react-native';
+import { Text } from 'react-native';
+
+import GestureHandlerRootView from '../components/GestureHandlerRootView';
+import { Pressable } from '../v3/components';
+
+// The Touchable engine reads `Platform.OS` once, at import time, to decide
+// whether the native ripple applies — so the platform has to be swapped before
+// the component module loads.
+jest.mock('react-native/Libraries/Utilities/Platform', () => {
+  const actual = jest.requireActual<{ default: typeof PlatformModule }>(
+    'react-native/Libraries/Utilities/Platform'
+  ).default;
+  return {
+    __esModule: true,
+    default: {
+      ...actual,
+      OS: 'android',
+      select: (spec: Record<string, unknown>) =>
+        'android' in spec ? spec.android : (spec.native ?? spec.default),
+    },
+  };
+});
+
+// Both engines have to forward the whole `android_ripple` config to the button —
+// dropping `borderless`/`foreground` made the two flags silently do nothing on
+// the engine that omitted them.
+const RIPPLE = {
+  color: 'red',
+  radius: 20,
+  borderless: true,
+  foreground: true,
+} as const;
+
+const expectRippleOnButton = () => {
+  const button = screen.getByTestId('pressable');
+
+  expect(button.props.rippleColor).toBe(RIPPLE.color);
+  expect(button.props.rippleRadius).toBe(RIPPLE.radius);
+  expect(button.props.borderless).toBe(true);
+  expect(button.props.foreground).toBe(true);
+};
+
+test('StatefulPressable forwards the whole android_ripple config', () => {
+  render(
+    <GestureHandlerRootView>
+      {/* A relation prop routes `Pressable` to the `StatefulPressable` engine. */}
+      <Pressable
+        testID="pressable"
+        simultaneousWith={[]}
+        android_ripple={RIPPLE}>
+        <Text>Press Me</Text>
+      </Pressable>
+    </GestureHandlerRootView>
+  );
+
+  expectRippleOnButton();
+});
+
+test('PressableWithTouchable forwards the whole android_ripple config', () => {
+  render(
+    <GestureHandlerRootView>
+      <Pressable testID="pressable" android_ripple={RIPPLE}>
+        <Text>Press Me</Text>
+      </Pressable>
+    </GestureHandlerRootView>
+  );
+
+  expectRippleOnButton();
+});

packages/react-native-gesture-handler/src/components/Pressable/Pressable.tsx

@@ -395,6 +395,8 @@ const LegacyPressable = (props: LegacyPressableProps) => {
         touchSoundDisabled={android_disableSound ?? undefined}
         rippleColor={rippleColor}
         rippleRadius={android_ripple?.radius ?? undefined}
+        borderless={android_ripple?.borderless ?? undefined}
+        foreground={android_ripple?.foreground ?? undefined}
         style={[pointerStyle, styleProp]}
         testOnly_onPress={IS_TEST_ENV ? onPress : undefined}
         testOnly_onPressIn={IS_TEST_ENV ? onPressIn : undefined}

packages/react-native-gesture-handler/src/v3/components/StatefulPressable.tsx

@@ -459,6 +459,8 @@ const StatefulPressable = (props: PressableProps) => {
         touchSoundDisabled={android_disableSound ?? undefined}
         rippleColor={rippleColor}
         rippleRadius={android_ripple?.radius ?? undefined}
+        borderless={android_ripple?.borderless ?? undefined}
+        foreground={android_ripple?.foreground ?? undefined}
         style={[pointerStyle, styleProp]}
         testOnly_onPress={IS_TEST_ENV ? onPress : undefined}
         testOnly_onPressIn={IS_TEST_ENV ? onPressIn : undefined}