Fix android ripple color bug on fabric (#3369)

## Description

Android ripple currently does not work on `Fabric`, as all values passed
to `RawButton` and it's inheritors are passed through `processColor`,
which is crucial on `Paper`, and broken on `Fabric`.

This PR disables usage of `processColor`, when running on `Fabric`.

Note: `isFabric` cannot be moved out of the body of the `Pressable`, as
it likely won't be initialised before the `Pressable` starts being
rendered. More details
[here](https://github.com/software-mansion/react-native-gesture-handler/blob/b3d8fd91dca195267bdc33aa20fd6f5cd37d7fe2/src/utils.ts#L47).

Fixes #3246
Fixes #3312
Supersedes #3250
Likely could add a workaround for
software-mansion/react-native-reanimated#6935

## Test plan

<details>
<summary>
Collapsed test code
</summary>

```tsx
import React from 'react';
import { Pressable as RNPressable, StyleSheet, Text } from 'react-native';
import {
  BaseButton,
  GestureHandlerRootView,
  RectButton,
  Pressable,
} from 'react-native-gesture-handler';

const App = () => {
  return (
    <GestureHandlerRootView>
      <RectButton style={styles.wrapperCustom} rippleColor={'blue'}>
        <Text style={styles.text}>RectButton</Text>
      </RectButton>
      <BaseButton style={styles.wrapperCustom} rippleColor={'blue'}>
        <Text style={styles.text}>BaseButton</Text>
      </BaseButton>
      <Pressable
        style={styles.wrapperCustom}
        android_ripple={{ color: 'blue' }}>
        {({ pressed }) => (
          <Text style={styles.text}>
            {pressed ? 'Pressed!' : 'Pressable from react-native'}
          </Text>
        )}
      </Pressable>
      <RNPressable
        style={styles.wrapperCustom}
        android_ripple={{ color: 'blue' }}>
        {({ pressed }) => (
          <Text style={styles.text}>
            {pressed ? 'Pressed!' : 'Pressable from react-native'}
          </Text>
        )}
      </RNPressable>
      <Pressable
        style={styles.wrapperCustom}
        android_ripple={{ color: '#00f' }}>
        {({ pressed }) => (
          <Text style={styles.text}>
            {pressed ? 'Pressed!' : 'Pressable from react-native'}
          </Text>
        )}
      </Pressable>
      <RNPressable
        style={styles.wrapperCustom}
        android_ripple={{ color: '#00f' }}>
        {({ pressed }) => (
          <Text style={styles.text}>
            {pressed ? 'Pressed!' : 'Pressable from react-native'}
          </Text>
        )}
      </RNPressable>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    gap: 16,
    padding: 16,
  },
  text: {
    fontSize: 32,
  },
  wrapperCustom: {
    borderRadius: 8,
    padding: 6,
    flex: 1,
    backgroundColor: 'papayawhip',
    borderColor: 'red',
    borderWidth: 2,
  },
  logBox: {
    flex: 1,
    padding: 20,
    margin: 10,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: '#f0f0f0',
    backgroundColor: '#f9f9f9',
  },
});

export default App;

```

</details>

Author: latekvo

src/components/GestureButtons.tsx

@@ -18,12 +18,15 @@ import type {
   BorderlessButtonWithRefProps,
   BorderlessButtonProps,
 } from './GestureButtonsProps';
+import { isFabric } from '../utils';
 
 export const RawButton = createNativeWrapper(GestureHandlerButton, {
   shouldCancelWhenOutside: false,
   shouldActivateOnStart: false,
 });
 
+let IS_FABRIC: null | boolean = null;
+
 class InnerBaseButton extends React.Component<BaseButtonWithRefProps> {
   static defaultProps = {
     delayLongPress: 600,
@@ -120,12 +123,20 @@ class InnerBaseButton extends React.Component<BaseButtonWithRefProps> {
   };
 
   render() {
-    const { rippleColor, style, ...rest } = this.props;
+    const { rippleColor: unprocessedRippleColor, style, ...rest } = this.props;
+
+    if (IS_FABRIC === null) {
+      IS_FABRIC = isFabric();
+    }
+
+    const rippleColor = IS_FABRIC
+      ? unprocessedRippleColor
+      : processColor(unprocessedRippleColor ?? undefined);
 
     return (
       <RawButton
         ref={this.props.innerRef}
-        rippleColor={processColor(rippleColor)}
+        rippleColor={rippleColor}
         style={[style, Platform.OS === 'ios' && { cursor: undefined }]}
         {...rest}
         onGestureEvent={this.onGestureEvent}

src/components/GestureButtonsProps.ts

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
+import {
+  AccessibilityProps,
+  ColorValue,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 import type { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler';
 
 export interface RawButtonProps
@@ -16,7 +21,7 @@ export interface RawButtonProps
    *
    * Defines color of native ripple animation used since API level 21.
    */
-  rippleColor?: any; // it was present in BaseButtonProps before but is used here in code
+  rippleColor?: number | ColorValue | null;
 
   /**
    * Android only.

src/components/Pressable/Pressable.tsx

@@ -20,11 +20,13 @@ import {
 } from './utils';
 import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
 import { GestureTouchEvent } from '../../handlers/gestureHandlerCommon';
-import { INT32_MAX, isTestEnv } from '../../utils';
+import { INT32_MAX, isFabric, isTestEnv } from '../../utils';
 
 const DEFAULT_LONG_PRESS_DURATION = 500;
 const IS_TEST_ENV = isTestEnv();
 
+let IS_FABRIC: null | boolean = null;
+
 export default function Pressable(props: PressableProps) {
   const {
     testOnly_pressed,
@@ -367,8 +369,6 @@ export default function Pressable(props: PressableProps) {
 
   const gesture = Gesture.Simultaneous(...gestures);
 
-  const defaultRippleColor = android_ripple ? undefined : 'transparent';
-
   // `cursor: 'pointer'` on `RNButton` crashes iOS
   const pointerStyle: StyleProp<ViewStyle> =
     Platform.OS === 'web' ? { cursor: 'pointer' } : {};
@@ -381,6 +381,18 @@ export default function Pressable(props: PressableProps) {
       ? children({ pressed: pressedState })
       : children;
 
+  const rippleColor = useMemo(() => {
+    if (IS_FABRIC === null) {
+      IS_FABRIC = isFabric();
+    }
+
+    const defaultRippleColor = android_ripple ? undefined : 'transparent';
+    const unprocessedRippleColor = android_ripple?.color ?? defaultRippleColor;
+    return IS_FABRIC
+      ? unprocessedRippleColor
+      : processColor(unprocessedRippleColor);
+  }, [android_ripple]);
+
   return (
     <GestureDetector gesture={gesture}>
       <NativeButton
@@ -389,7 +401,7 @@ export default function Pressable(props: PressableProps) {
         hitSlop={appliedHitSlop}
         enabled={isPressableEnabled}
         touchSoundDisabled={android_disableSound ?? undefined}
-        rippleColor={processColor(android_ripple?.color ?? defaultRippleColor)}
+        rippleColor={rippleColor}
         rippleRadius={android_ripple?.radius ?? undefined}
         style={[pointerStyle, styleProp]}
         testOnly_onPress={IS_TEST_ENV ? onPress : undefined}