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.

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

fix: new arch invalidate on mount/unmount #2318

Merged
merged 2 commits into from
Jul 1, 2024
Merged

Conversation

jakex7
Copy link
Member

@jakex7 jakex7 commented Jun 28, 2024

Summary

On iOS with the new architecture, when mounting or unmounting a component, changes were not visible because invalidate wasn't called. These changes override mountChildComponentView and unmountChildComponentView to ensure that invalidate is called when RNSVGNode is mounted or unmounted.

Test Plan

TestExample app -> MountUnmount example

import React from 'react';
import {Button, Text, View} from 'react-native';
import {Rect, Svg} from 'react-native-svg';

export default () => {
  const [show, setShow] = React.useState(true);
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Blue rect is mounted: {show ? 'true' : 'false'}</Text>

      <Svg height="300" width="300">
        {show ? (
          <Rect x="100" y="100" width="100" height="100" fill="blue" />
        ) : null}
      </Svg>
      <Button title="Toggle" onPress={() => setShow(!show)} />
    </View>
  );
};
before.mov
after.mov

Compatibility

OS Implemented
iOS

jakex7 added 2 commits June 28, 2024 16:48

Verified

This commit was signed with the committer’s verified signature.
dylanpulver Dylan Pulver

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
@jakex7 jakex7 requested a review from WoLewicki June 28, 2024 15:01
Copy link
Member

@WoLewicki WoLewicki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@jakex7 jakex7 merged commit e16a151 into main Jul 1, 2024
3 checks passed
@jakex7 jakex7 deleted the @jakex7/fixMountUnmount branch July 1, 2024 14:21
jakex7 pushed a commit that referenced this pull request Jul 4, 2024
<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect -->

# Summary
This is a sibling PR to:
#2318 which
fixed missing mount/unmount methods to correctly display SVG.

This PR overrides the same `mountChildComponentView` and
`unmountChildComponentView` methods but for `RNSVGSvgView` component.
This will make the components and their behaviour aligned and more
predictable.

I included the test that specifically tests for attaching another
external svg into and already existing SVG, should catch any edge cases
with invalidation/redrawing.

## Test Plan
`TestExample` app -> `TestSvgUriUpdating` example.


https://github.com/software-mansion/react-native-svg/assets/3929868/49499914-7037-4ab0-a9a9-1e139d460117


## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅    |

## Checklist

<!-- Check completed item, when applicable, via: [X] -->

- [x] I have tested this on a device and a simulator
- [ ] I added documentation in `README.md`
- [ ] I updated the typed files (typescript)
- [ ] I added a test for the API in the `__tests__` folder
github-merge-queue bot referenced this pull request in valora-inc/wallet Aug 5, 2024
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
|
[react-native-svg](https://togithub.com/react-native-community/react-native-svg)
| [`^15.3.0` ->
`^15.4.0`](https://renovatebot.com/diffs/npm/react-native-svg/15.3.0/15.4.0)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/react-native-svg/15.4.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-native-svg/15.4.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-native-svg/15.3.0/15.4.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-native-svg/15.3.0/15.4.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>react-native-community/react-native-svg
(react-native-svg)</summary>

###
[`v15.4.0`](https://togithub.com/software-mansion/react-native-svg/releases/tag/v15.4.0)

[Compare
Source](https://togithub.com/react-native-community/react-native-svg/compare/v15.3.0...v15.4.0)

Introducing the long-awaited filters in react-native-svg! 🎉
This minor release includes the first filter, FeColorMatrix, along with
numerous fixes and other improvements.

#### What's Changed

- fix: error when building paper after fabric by
[@&#8203;maciekstosio](https://togithub.com/maciekstosio) in
[https://github.com/software-mansion/react-native-svg/pull/2281](https://togithub.com/software-mansion/react-native-svg/pull/2281)
- Handle error when pass wrong uri to SvgFromUri component by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2289](https://togithub.com/software-mansion/react-native-svg/pull/2289)
- chore: TestsExample app fix reanimated and metro.config issues by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2291](https://togithub.com/software-mansion/react-native-svg/pull/2291)
- chore: remove macos-build-test.yml by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2292](https://togithub.com/software-mansion/react-native-svg/pull/2292)
- chore: add hire us section to readme by
[@&#8203;kacperkapusciak](https://togithub.com/kacperkapusciak) in
[https://github.com/software-mansion/react-native-svg/pull/2295](https://togithub.com/software-mansion/react-native-svg/pull/2295)
- feat: github action close-when-stale by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2296](https://togithub.com/software-mansion/react-native-svg/pull/2296)
- fixed pars on Android platform prop strokeDasharray by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2294](https://togithub.com/software-mansion/react-native-svg/pull/2294)
- feat: add new bug issue template, and github actions by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2300](https://togithub.com/software-mansion/react-native-svg/pull/2300)
- fix: issue template by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2301](https://togithub.com/software-mansion/react-native-svg/pull/2301)
- fix: example app package.json file and yarn.lock by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2303](https://togithub.com/software-mansion/react-native-svg/pull/2303)
- fix: handle onPress prop on web app by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2302](https://togithub.com/software-mansion/react-native-svg/pull/2302)
- fix: android PathParser crash app if pass some wrong d prop by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2308](https://togithub.com/software-mansion/react-native-svg/pull/2308)
- fix: scaling when mask is set by
[@&#8203;jakex7](https://togithub.com/jakex7) in
[https://github.com/software-mansion/react-native-svg/pull/2299](https://togithub.com/software-mansion/react-native-svg/pull/2299)
- add onLoad prop to Image component by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2293](https://togithub.com/software-mansion/react-native-svg/pull/2293)
- feat: update needs-more-info git workflow by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2314](https://togithub.com/software-mansion/react-native-svg/pull/2314)
- fix: new arch invalidate on mount/unmount by
[@&#8203;jakex7](https://togithub.com/jakex7) in
[https://github.com/software-mansion/react-native-svg/pull/2318](https://togithub.com/software-mansion/react-native-svg/pull/2318)
- Fix: image onLoad props by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2317](https://togithub.com/software-mansion/react-native-svg/pull/2317)
- feat(windows): add support for 74 and bump Example by
[@&#8203;marlenecota](https://togithub.com/marlenecota) in
[https://github.com/software-mansion/react-native-svg/pull/2315](https://togithub.com/software-mansion/react-native-svg/pull/2315)
- feat: add Example Windows build workflow by
[@&#8203;marlenecota](https://togithub.com/marlenecota) in
[https://github.com/software-mansion/react-native-svg/pull/2322](https://togithub.com/software-mansion/react-native-svg/pull/2322)
- fix: add check in RNSVGImage for macos platform by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2324](https://togithub.com/software-mansion/react-native-svg/pull/2324)
- Add correct invalidate calls to SvgView on ios with test by
[@&#8203;Kicu](https://togithub.com/Kicu) in
[https://github.com/software-mansion/react-native-svg/pull/2327](https://togithub.com/software-mansion/react-native-svg/pull/2327)
- fix: extract opacity use percentage values by
[@&#8203;jakex7](https://togithub.com/jakex7) in
[https://github.com/software-mansion/react-native-svg/pull/2325](https://togithub.com/software-mansion/react-native-svg/pull/2325)
- feat: change folders structure by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2319](https://togithub.com/software-mansion/react-native-svg/pull/2319)
- Implement mask-type property by
[@&#8203;SergeyYurkevich](https://togithub.com/SergeyYurkevich) in
[https://github.com/software-mansion/react-native-svg/pull/2152](https://togithub.com/software-mansion/react-native-svg/pull/2152)
- feat: extract web example by
[@&#8203;bohdanprog](https://togithub.com/bohdanprog) in
[https://github.com/software-mansion/react-native-svg/pull/2333](https://togithub.com/software-mansion/react-native-svg/pull/2333)
- fix: macos mask by [@&#8203;jakex7](https://togithub.com/jakex7) in
[https://github.com/software-mansion/react-native-svg/pull/2337](https://togithub.com/software-mansion/react-native-svg/pull/2337)
- fix: fix format-js task to reflect changes made to folder structure by
[@&#8203;CDFN](https://togithub.com/CDFN) in
[https://github.com/software-mansion/react-native-svg/pull/2342](https://togithub.com/software-mansion/react-native-svg/pull/2342)
- Add missing `#include <folly/dynamic.h>` on RN 0.75 by
[@&#8203;tomekzaw](https://togithub.com/tomekzaw) in
[https://github.com/software-mansion/react-native-svg/pull/2344](https://togithub.com/software-mansion/react-native-svg/pull/2344)
- feat: filters support FeColorMatrix and FilterImage by
[@&#8203;jakex7](https://togithub.com/jakex7) in
[https://github.com/software-mansion/react-native-svg/pull/2316](https://togithub.com/software-mansion/react-native-svg/pull/2316)
- fix: mask and filters rendering issues by
[@&#8203;jakex7](https://togithub.com/jakex7) in
[https://github.com/software-mansion/react-native-svg/pull/2345](https://togithub.com/software-mansion/react-native-svg/pull/2345)

#### New Contributors

- [@&#8203;maciekstosio](https://togithub.com/maciekstosio) made their
first contribution in
[https://github.com/software-mansion/react-native-svg/pull/2281](https://togithub.com/software-mansion/react-native-svg/pull/2281)
- [@&#8203;bohdanprog](https://togithub.com/bohdanprog) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2289](https://togithub.com/software-mansion/react-native-svg/pull/2289)
- [@&#8203;Kicu](https://togithub.com/Kicu) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2327](https://togithub.com/software-mansion/react-native-svg/pull/2327)
- [@&#8203;SergeyYurkevich](https://togithub.com/SergeyYurkevich) made
their first contribution in
[https://github.com/software-mansion/react-native-svg/pull/2152](https://togithub.com/software-mansion/react-native-svg/pull/2152)
- [@&#8203;CDFN](https://togithub.com/CDFN) made their first
contribution in
[https://github.com/software-mansion/react-native-svg/pull/2342](https://togithub.com/software-mansion/react-native-svg/pull/2342)

**Full Changelog**:
software-mansion/react-native-svg@v15.3.0...v15.4.0

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "after 5pm,every weekend" in timezone
America/Los_Angeles, Automerge - "after 5pm,every weekend" in timezone
America/Los_Angeles.

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR was generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View the
[repository job
log](https://developer.mend.io/github/valora-inc/wallet).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40MzguMCIsInVwZGF0ZWRJblZlciI6IjM3LjQzOC4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyJucG0iLCJyZW5vdmF0ZSJdfQ==-->

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: valora-bot <valorabot@valoraapp.com>
Co-authored-by: Alex Bakoushin <alex@bakoush.in>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants