Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Path doesn't re-render correctly when fill prop changes #2535

Closed
clarkg opened this issue Nov 14, 2024 · 3 comments · Fixed by #2536
Closed

Path doesn't re-render correctly when fill prop changes #2535

clarkg opened this issue Nov 14, 2024 · 3 comments · Fixed by #2536
Labels
Missing repro This issue need minimum repro scenario

Comments

@clarkg
Copy link

clarkg commented Nov 14, 2024 •
edited
Loading

Description

Path doesn't re-render correctly when fill prop changes

Reproed on React Native new Arch on iOS

Steps to reproduce

const ReproComponent = () => {
const [color, setColor] = useState("#0000FF");

return  <>
<Svg width={12} height={15} viewBox="0 0 12 15" fill="none">
    <Path
      d="M1 3.353C1 2.053 2.053 1 3.353 1H8.647C9.947 1 11 2.053 11 3.353V13.207C11 13.3008 10.9736 13.3927 10.9238 13.4722C10.874 13.5518 10.8029 13.6157 10.7185 13.6567C10.6341 13.6976 10.5399 13.7141 10.4466 13.7041C10.3533 13.694 10.2648 13.658 10.191 13.6L7.202 11.25C6.99452 11.0876 6.7385 10.9995 6.475 11H3.353C2.72895 11 2.13045 10.7521 1.68918 10.3108C1.2479 9.86955 1 9.27105 1 8.647V3.353Z"
      stroke={color}
      fill={color}
      strokeOpacity={0.5}
      strokeWidth={1.5}
    />
  </Svg>
  <TouchableOpacity onPress={setColor("none")}>Click to remove color</TouchableOpacity>
  </>;
  }

Snack or a link to a repository

https://gist.github.com/clarkg/b3cf2f50403f7e436bccb24cb55fe90b

SVG version

15.8.0

React Native version

0.76.0

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

No response

Acknowledgements

Yes
@github-actions GitHub Actions
Copy link

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

@github-actions github-actions bot added the Missing repro This issue need minimum repro scenario label Nov 14, 2024
@jakex7 jakex7 mentioned this issue Nov 15, 2024
Merged
@jakex7
Copy link
Member

jakex7 commented Nov 15, 2024 •
edited
Loading

Hey @clarkg, thanks for bringing that up. Just to clarify, the issue only occurs when setting the value to 'none'. It should be fixed by #2536.

jakex7 added a commit that referenced this issue Nov 15, 2024
@jakex7
fix: remove fill and stroke when its unset (#2536)
08b1f53 
# Summary

Closes #2535
When `fill` or `stroke` is set to `'none'` we should remove the value
instead of keeping the last valid value.

## Test Plan

```tsx
import React, {useState} from 'react';
import {Text, TouchableOpacity} from 'react-native';
import {Path, Rect, Svg} from 'react-native-svg';

function Example() {
  const [color, setColor] = useState('#0000FF');
  return (
    <>
      <Svg width={120} height={150} viewBox="0 0 12 15" fill="none">
        <Path
          d="M1 3.353C1 2.053 2.053 1 3.353 1H8.647C9.947 1 11 2.053 11 3.353V13.207C11 13.3008 10.9736 13.3927 10.9238 13.4722C10.874 13.5518 10.8029 13.6157 10.7185 13.6567C10.6341 13.6976 10.5399 13.7141 10.4466 13.7041C10.3533 13.694 10.2648 13.658 10.191 13.6L7.202 11.25C6.99452 11.0876 6.7385 10.9995 6.475 11H3.353C2.72895 11 2.13045 10.7521 1.68918 10.3108C1.2479 9.86955 1 9.27105 1 8.647V3.353Z"
          stroke={color}
          fill={color}
          strokeOpacity={0.5}
          strokeWidth={1.5}
        />
      </Svg>
      <TouchableOpacity onPress={() => setColor('none')}>
        <Text>Click to remove color</Text>
      </TouchableOpacity>
    </>
  );
}
```

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅      |
| macOS   |    ✅      |
@clarkg
Copy link
Author

clarkg commented Nov 15, 2024

tyvm for the prompt fix @jakex7 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Missing repro This issue need minimum repro scenario
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: remove fill and stroke when its unset software-mansion/react-native-svg
2 participants
@clarkg @jakex7