Css transitionProperty breaking color inheritance in React Native
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 45/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- javascript, react-native
- Domain
- mobile
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.
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
- Dominant language
- JavaScript
- Stars
- 3.6k
- Forks
- 206
- PR merge metrics
- No merged PRs in 30d
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.
More from react/react-strict-dom
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
react/react-strict-dom#467 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
react/react-strict-dom#465 · 2 comments ·
-
Difficulty 5/5 Over a week Newbie friendliness 35/100
react/react-strict-dom#520 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 35/100
react/react-strict-dom#505 · 2 reactions ·
-
bug
Difficulty 3/5 1-2 days Newbie friendliness 62/100
react/react-strict-dom#491 · 4 comments ·
All issues in react/react-strict-dom
Similar issues
-
awaiting triage bug Causes friction Hop Gui P1 P2 Transforms
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
georgestephanis/p2026#40 ·
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. Open
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Margaret-Petersen/food-delivery-app-clone-react-native#1981 ·