react / react/react-strict-dom
Css transitionProperty breaking color inheritance in React Native
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.6k
- Forks
- 206
- PR merge metrics
- No merged PRs in 30d
Description
Describe the issue
When using transitionProperty with color in a button with a span inside, the html.span color breaks on native and defaults the inherited color to black.
In web the text colors transitions but in RN the colors de colors breaks when transition starts and doesn't recover unless you reload the app
This code was tested with experimental pointer events active following this react-native guide
The test was made with expo sdk 54 and react-strict-dom 0.0.54
https://github.com/user-attachments/assets/4a045c7e-3770-4632-98a8-beb20f11ca81
to test just try and run the following code:
import { css, html } from "react-strict-dom";
export function AlertBanner() {
return (
<html.button style={styles.container}>
<html.span style={styles.text}>Alert Banner</html.span>
</html.button>
);
}
const styles = css.create({
container: {
padding: "32px",
transitionProperty: "backgroundColor, color",
transitionDuration: "300ms",
backgroundColor: {
default: "blue",
":active": "darkblue",
},
color: {
default: "white",
":active": "green",
},
},
text: {
fontSize: "24px",
color: "inherit",
},
});
Expected behavior
Inherited text color should transition from white to green when button is pressed
Steps to reproduce
the following was tested with expo sdk 54 and react-strict-dom 0.0.54
- setup RSD with expo
- enable experimental pointer events
- add the test code and press the button
Test case
No response
Additional comments
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the supplied AlertBanner reproduction with Expo SDK 54 and react-strict-dom 0.0.54, with experimental pointer events enabled. Trace how transitionProperty handles inherited color on native, and verify that the span changes from white to green when the button is pressed without requiring an app reload.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100