Pressable style callback function and pressed state not working when I installed nativewind 4.0.36

[glncy]

Describe the bug
When using Pressable component in React Native, sometimes I use inline styles. In Pressable style prop, you can put a callback function to get the pressed state.

Upon installing nativewind, I noticed that the callback function is not working, even it will not put the rest of the inline styles you will put in callback funciton

To Reproduce
Steps to reproduce the behavior:

1. Clone https://github.com/glncy/IssuesExpoApp
2. Switch to branch bug/pressable-nativewind
3. Install dependencies yarn install
4. Run the app yarn run:[ios|android] ex. yarn run:ios
5. The app will redirect to Screen
6. When you press the Press Me button, it doesn't change. Also it doesn't apply the primary inline styles

Expected behavior
Pressable style callback funciton and pressed state should be working when using inline styles
Branch without Nativewind 4.0.36: bug/pressable-no-nativewind

[datacurse]

I've answered this one here, please tell me if that works ^^

https://stackoverflow.com/a/78277122/14037320

[glncy]

I've answered this one here, please tell me if that works ^^

https://stackoverflow.com/a/78277122/14037320

thanks for this. since I filed this issue, i am using active: as a workaround.

[datacurse]

oh i see, for a pressable itself thats a good way ^^. Tho i needed to pass pressed state down to child components, i thought that was the main use case of {pressed}:
https://reactnative.dev/docs/pressable#example

[sormiston]

@necropreneur there are (at least) 2 use cases for providing a callback which has ({ pressed: boolean }) as its argument...

1. as "children" of the Pressable ex.:

    <Pressable>
        {({pressed}) => (
          <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>
        )}
      </Pressable>

2. as the value of the Pressable "style" prop.

<Pressable 
   style={({pressed}) => [
          {
            backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
          },
          styles.wrapperCustom,
        ]}>
  ...stuff
</Pressable>
        

This issue concerns the 2nd. It doesn't work. This issue probably also belongs on React Native repo (not sure what responsibility NativeWind has here...)

[SalihColak]

I am facing the same issue right now. The styles of Pressable don't work if I provide the pressed state. However this behaviour occured after I upgraded to nativewind version 4.0.36. Before I was using 4.0.13 and it was working fine.

[glncy]

@sormiston i am not even sure if it was part of React Native repo. But based on my example repository i provided, When I don't have nativewind, the issue occurs.

Anyways, right now I am still using active: class as a workaround while pressed state is not working.

[delphinebugner]

@glncy thanks for the advice, I'm using :active marker too now instead of the style callback with pressed, works really well!

[danstepanov]

We are closing all pre-v4.1 issues now that v4.1 is released. If the problem is still happening with the latest v4.1, please open a new issue and reference this one in the description.

[KacperBartlomiejczak]

I am using the newest nativewind and it still doesnt work with pressed state. Function works well but not pressed state

<Pressable
      className="w-16 h-16 bg-blue-500  rounded-full flex flex-col items-center justify-center absolute bottom-12 right-8 z-50"
      style={({pressed}) => [
        {backgroundColor: pressed ? "#1d4ed8" : "blue"},
      ]}
      android_ripple={{
        color: "#1d4ed8",
        borderless: true,
        radius: 24,
      }}
      onPress={() => {console.log("pressed")}}
    >
      <Text className="text-white text-2xl font-semibold">+</Text>
    </Pressable>

[freitagdavid]

Just had this bug cause a big issue on a project after integration that required a rollback of the entire integration to get a release out the door. This bug definitely still exists. It seems like Pressable with a callback on it's style just doesn't get styled at all, it was pretty hard to track down due to styles just not working at all, and there not being really any indication of the issue outside of some styles not applying.