[Pressable] android_ripple / color doesn't work correctly

[freeboub]

Description

on Pressable android_ripple={color: XXX} doesn't work correctly.

Here are issues:

• when user configure the android_ripple={color: "#FF0000"} => the ripple color is grey. What ever the configured color is, the color ripple color is always grey (should be red with this sample)
• when user configure the android_ripple={color: "#FFFFFF4F"} (With transparency) => the ripple color is blue. depending of transparency level, the color is sometimes grey ...
• I have also notice that a fast refresh doesn't refresh correctly the ripple color. (maybe it can help to identify the issue, or at least don't fall in that trap)

I checked with default react native Pressable these 3 use cases works fine.

Steps to reproduce

Just define a Pressable with android_ripple={{color}}

<Pressable onPress={() => console.log('onPress')} android_ripple={{color: '#FF0000'}}>
         <Text>'Hello World'</Text>
</Pressable>

Snack or a link to a repository

https://github.com/freeboub/bug-react-native-gesture-handler-android-ripple-color

Gesture Handler version

2.21.2

React Native version

0.76.2

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Fabric (New Architecture)

Build type

Release mode

Device

Android emulator

Device model

reproduced on all android devices

Acknowledgements

Yes

[freeboub]

I tried to debug the issue and I have an interesting point, This issue is reproducible only with new architecture enabled.
JS side looks good, but setRippleColor on kotlin side is never called

[freeboub]

Ok, I got the root cause, it looks like processColor should not be called with new architecture:
doing this in Pressable.tsx fix the issue:
rippleColor={android_ripple?.color ?? defaultRippleColor}
But it doesn't work with old architecture 😭

[freeboub]

following patch can also be added to test the feature in the sample, but it breaks ios behavior, Not sure I should do it:

diff --git a/FabricExample/src/Navigator.tsx b/FabricExample/src/Navigator.tsx
index de9759f8e..d2d8227e0 100644
--- a/FabricExample/src/Navigator.tsx
+++ b/FabricExample/src/Navigator.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable react-native/no-inline-styles */
 import React, { useEffect, useState } from 'react';
-import { View, Text, Pressable, BackHandler } from 'react-native';
-
+import { View, Text, BackHandler } from 'react-native';
+import { Pressable } from 'react-native-gesture-handler';
+import { COLORS } from './colors';
 export interface RouteInfo {
   component: React.ComponentType;
   title?: string;
@@ -27,6 +28,7 @@ const Button = (props: ButtonProps) => {
         height: 48,
         justifyContent: 'center',
       }}
+      android_ripple={{color: COLORS.NAVY}}
       onPress={() => {
         props.onPress();
       }}>

[ulyavrubel]

Same issue with RectButton component. Only with new architecture enabled
See expo snack https://snack.expo.dev/@uvrubel/rectbutton-android-ripple-color

[latekvo]

Please let me know if this PR fixes your issues: #3369