question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Next] style prop of pressable is not receiving pressed argument when className is used

See original GitHub issue

Describe the bug The style prop of Pressable can be a function which takes an object with pressed value to return different style depending on state is pressed or not. It works fine if style props is used without className, but if both style and className are used then the pressed argument is not working anymore.

To Reproduce Steps to reproduce the behavior:

  1. use Pressable component
  2. use style prop to style it differently depending if pressed
  3. add className to Pressable
  4. Pressable no longer show different style depening if pressed

Expected behavior className does not affect style

Repo https://github.com/itsramiel/nativewind-pressable/tree/repro/style-pressable

Issue Analytics

  • State:closed
  • Created 10 months ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
marklawlorcommented, Dec 12, 2022

Closing this issue, as it has been added to the feature request project

0reactions
itsramielcommented, Nov 19, 2022

Alright interesting. I was not aware of the modifiers and it will most likely solve my use case, but in my opinion I think the style prop should still maintain its original behavior of receiving the pressed boolean.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using styled components with Typescript, prop does not exist?
The styled component will have to specify the prop to pass to the component like styled("h2")<IProps> . You can read more about the...
Read more >
Pressable has unchangeable delay for opacity effect (onPressIn)
I am having the same problem. TouchableOpacity is not using Pressable but Pressabilitty API (The same one TouchableOpacity use). That said, ...
Read more >
How To Customize React Components with Props
In this tutorial, you'll create custom components by passing props to your component. Props are arguments that you provide to a JSX element....
Read more >
The React Handbook – Learn React for Beginners
The React Handbook follows the 80/20 rule: learn in 20% of the time the 80% of a topic. I find this approach gives...
Read more >
React interactivity: Events and state - Learn web development
The camel-cased nature of onClick is important — JSX will not recognize onclick (again, it is already used in JavaScript for a specific ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found