Fix android ripple color bug on fabric

[latekvo]

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.

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

Test plan

Collapsed test code

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;

[freeboub]

I think both memo can be merged into only 1 ..

[latekvo]

You're right, fixed in a9d2031

[m-bert]

Shouldn't it be

const unprocessedRippleColor = android_ripple?.color ?? 'transparent';

?

I don't really see the point of defaultRippleColor in that case.

[latekvo]

defaultRippleColor is required to properly replicate the behaviour of RN Pressable.
When android_ripple is set, but the color field is not provided, we want to set color to undefined, so that it uses the default system value (opaque whiteish).
When android_ripple is not set, we want to remove the ripple altogether, which is done via 'transparent'.

[m-bert]

What about maybeProcessedRippleColor?

[m-bert]

Also, why don't we memoize value of isFabric instead of calling this everytime?

[latekvo]

What about maybeProcessedRippleColor?

Not a big fan of that name, the word processed already allows for lack of change.
But I agree that processed may be confusing due to processColor() function.
Maybe this will do better:
rippleColor -> unprocessedRippleColor
processedRippleColor -> rippleColor
?

Also, why don't we memoize value of isFabric instead of calling this everytime?

Sure, done in ff48533

[m-bert]

Sure, done in ff48533

Not exactly what I meant. I thought about storing it in a variable. Now we still call function in each render.

Maybe this will do better:
rippleColor -> unprocessedRippleColor
processedRippleColor -> rippleColor

Looks good 👍

[latekvo]

Not exactly what I meant. I thought about storing it in a variable. Now we still call function in each render.

Done for BaseButton in d62793c

Changed useCallback to useMemo in 2ff4683

If you're referring to storing IS_FABRIC outside of the Pressable, we can't do that, isFabric() will return incorrect data outside of the function component, as the value it reads will not be initialised before the first render.

[latekvo]

Looks good 👍

Done in 2513b9e

[m-bert]

Looks ok 👍

What about using the same IS_FABRIC trick in Pressable? 😅

[latekvo]

What about using the same IS_FABRIC trick in Pressable?

Done in f8b2de5