react / react/react-strict-dom

Outline styles aren't parsed in React Native

Open Beginner friendly
#467 1 comment 0 reactions 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

The documentation states that outline* style props should be supported (and have built-in React Native support) - https://github.com/facebook/react-strict-dom/blob/05226645531de66ae8d0f06c48c10e0526dfd438/packages/website/docs/api/02-css/index.md?plain=1#L202-L205

In reality in React Native, they're properly parsed only if criteria for version.experimental are met: https://github.com/facebook/react-strict-dom/blob/05226645531de66ae8d0f06c48c10e0526dfd438/packages/react-strict-dom/src/native/css/isAllowedStyleKey.js#L170-L175

Expected behavior

outline* styles are correctly parsed as they're long-present functionality of RN (available since 0.77) or alternatively documentation provides correct information and specifies how to turn on the experimental support

Steps to reproduce

RSD version: 0.0.55
React Native version: 0.84.0
React version: 19.2.3
Browser: Google Chrome

  1. Define CSS styles using outline properties:
const styles = css.create({
  test: {
    outlineColor: "#000000",
    outlineWidth: 1,
    outlineStyle: "solid",
});
  1. Apply them to a component:
<html.div style={styles.test}>...</html.div>
  1. Render the component in a React Native app and observe how the styles are rendered

  2. (Optionally) console.log the resolved styles - the outline properties will be excluded

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 with packages/react-strict-dom/src/native/css/isAllowedStyleKey.js around the outline-related logic, then compare it with the outline support statement in packages/website/docs/api/02-css/index.md. Check how version.experimental affects parsing in React Native 0.84. Done means outline styles either parse without that condition or the documentation clearly states the required experimental setup.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile-dev
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.