react / react/react-strict-dom

Css transitionProperty breaking color inheritance in React Native

Open
#426 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

  1. setup RSD with expo
  2. enable experimental pointer events
  3. add the test code and press the button
Test case

No response

Additional comments

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.