Pressable won't show background color

[sidferreira]

Description

I tested this in a new repo (below), and the first build has the issue. We face the same issue in our main app

I works as expected on expo projects even updating RNGH

May be related to #3312

Steps to reproduce

Add backgroundColor to Pressable

Snack or a link to a repository

https://github.com/sidferreira/rngh-pressable-no-background

Gesture Handler version

2.22.1

React Native version

0.77.0

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

Debug mode

Device

Real device

Device model

No response

Acknowledgements

Yes

[tasty0brains]

I have the same thing, but on react-native ~0.76.6 everything works as expected

[latekvo]

Can confirm. Since RN 0.77, all RectButtons, BaseButtons, RawButtons and PureNativeButtons no longer work with the backgroundColor style. Will look into it further, this is a serious issue.

Repro:

Collapsed repro

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

const App = () => {
  return (
    <GestureHandlerRootView>
      <RectButton style={styles.wrapperCustom}>
        <Text style={styles.text}>RectButton</Text>
      </RectButton>
      <BaseButton style={styles.wrapperCustom}>
        <Text style={styles.text}>BaseButton</Text>
      </BaseButton>
      <RawButton style={styles.wrapperCustom}>
        <Text style={styles.text}>RawButton</Text>
      </RawButton>
      <PureNativeButton style={styles.wrapperCustom}>
        <Text style={styles.text}>PureNativeButton</Text>
      </PureNativeButton>
      <RNPressable style={styles.wrapperCustom}>
        {({ 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',
    borderWidth: 2,
  },
  logBox: {
    flex: 1,
    padding: 20,
    margin: 10,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: '#f0f0f0',
    backgroundColor: '#f9f9f9',
  },
});

export default App;

Tangent: Setting backgroundColor to an invalid value, followed by a hot reload fixes this issue. No idea why this happens.

[latekvo]

Hey @sidferreira and @tasty0brains, please let me know if #3368 fixes this issue for you.

[sidferreira]

@latekvo, I copied that snippet in my dependency, reran it, and it worked as expected. I did not test other components.

[tasty0brains]

@latekvo Tried the latest commit (e222d2e) on RN 0.77. Works fine!