Commit Graph

2125 Commits

Author SHA1 Message Date
Jakub Grzywacz
e85c727b79 chore: fix paper-macos-example workflow (#2539)
# Summary

Regenerate pods to fix `paper-macos-example` workflow.
`fabric-macos-example` will still fail as it doesn't have any startup
command, but it's not our fault.

## Test Plan

CI for `peper-macos-example` should be green
2024-11-19 09:55:05 +01:00
Jakub Grzywacz
0c30339c55 refactor: use old style switch statement (#2538)
# Summary

Use old-style switch statement.
Closes #2537
2024-11-18 10:43:17 +01:00
Jakub Grzywacz
08b1f53147 fix: remove fill and stroke when its unset (#2536)
# 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   |          |
2024-11-15 13:13:36 +01:00
Andrew Coates
d02c997352 fix: react-native-windows implementation for new architecture (#2527)
# Summary
There are two main things going on with the PR. Both involve a reworking
of the new arch implementation of rn-svg for windows.
The current implementation attempts to implement a svg renderer from
scratch. There are numerous edge cases that it wasn't handling
correctly, and the performance had some serious issues. This
implementation switches to use the svg rendering path built into
Direct2D. This brings significant performance improvements.

The 2nd issue is there have been various breaking changes in
react-native-windows for how new arch native components are implemented.
This brings the rn-svg implementation in line with those latest changes.

## Test Plan

Primary testing right now is loading up the example app in the repo.
New arch on react-native-windows is still in somewhat early days - so
there are not really current users of this code. I am integrating this
code into Microsoft Office, where I have tested some scenarios. But we
will get expanded testing as we roll out the new arch. I expect there to
be some follow-ups as we expand our usage. The version of rn-svg before
this PR doesn't build with the latest new arch react-native-windows
versions. - So its hard to get worse than that.

### What's required for testing (prerequisites)?

### What are the steps to reproduce (after prerequisites)?

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    N/A  |
| MacOS   |    N/A      |
| Android |    N/A      |
| Web     |          |

## Checklist

- [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
2024-11-15 12:17:12 +01:00
Jakub Grzywacz
6aff3094ce fix: filters memory leak on apple (#2534)
# Summary

While animating filters, I discovered a memory leak due to not releasing
the `CGImage` after creating the mask.

## Test Plan

```tsx
import {useEffect} from 'react';
import Animated, { useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
import Svg, {FeOffset, Filter, Rect} from 'react-native-svg';

const AnimatedFilter = Animated.createAnimatedComponent(Filter);
const AnimatedFeOffset = Animated.createAnimatedComponent(FeOffset);
const AnimatedRect = Animated.createAnimatedComponent(Rect);
export default function Example() {
  const offset = useSharedValue(0.5);

  useEffect(() => {
    offset.value = withRepeat(withTiming(300, {duration: 3000}), -1, true);
  }, []);

  return (
    <Svg height="300" width="300">
      <AnimatedFilter id="filter">
        <AnimatedFeOffset dx={offset} dy={offset} result="offOut" />
      </AnimatedFilter>
      <AnimatedRect
        x="0"
        y="0"
        width="300"
        height="300"
        fill="red"
        filter="url(#filter)"
      />
    </Svg>
  );
}
```

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |          |
| macOS   |          |
2024-11-15 12:00:12 +01:00
Jakub Grzywacz
bba8b3f0a8 Release 15.9.0 2024-11-13 14:22:18 +01:00
Jakub Grzywacz
1256d561df fix: react-native-macos@0.76+ (#2531)
# Summary

On `react-native-macos` 0.76, `UIGraphicsBeginImageContextWithOptions`
and some other UIGraphics directives were removed so the temporary
solution is to copy the removed functions here.

More details
here https://github.com/software-mansion/react-native-svg/issues/2528
and here https://github.com/microsoft/react-native-macos/pull/2209

Closes #2528

## Test Plan

Built the `fabric-macos-example` for with `react-native-macos@0.76.0`

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| MacOS   |          |

## Checklist

- [x] I have tested this on a device and a simulator
2024-11-13 12:30:05 +01:00
Jakub Grzywacz
d0530e4b9f fix: add default FeBlend mode (#2530)
# Summary

Fixes #2529
`FeBlend` should have default blend mode set to `normal`

## Test Plan

Test case specified in #2529

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |          |
2024-11-12 14:37:46 +01:00
Omeid
38186e8283 fix: apple bounding box (CGPathGetPathBoundingBox) (#2177)
<!-- 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

As per the spec, bbox should not include any transformations, including
scaling. It should also not include any control points. This fixes
getBBox to give correct results matching Google Chrome, Firefox as per
the spec.


* What issues does the pull request solve? Please tag them so that they
will get automatically closed once the PR is merged
* What is the feature? (if applicable)
Bug fix.

* How did you implement the solution?
Like this, see.

* What areas of the library does it impact?
getBBox API.

## Test Plan

I build some stuff that works with SVG, the results on web were
inconsistent, and digging down I realise it was a react-native-svg.

Some fun fact, there was a surprisingly similar bug related to very
confusing named (CGPathGetBoundingBox vs CGPathGetPathBoundingBox) APIs
in Firefox some years ago as well.
https://bugzilla.mozilla.org/show_bug.cgi?id=1369904


### What's required for testing (prerequisites)?

### What are the steps to reproduce (after prerequisites)?

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |         |
| Android |   🔘#   |
| Web | 🔘 *|

* Depends on the host platform. But works fine in major browsers.
# will create a follow up PR. Currently getBBox on Android doesn't
account for scaling properly.

## Checklist

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

- [x] I have tested this on a device and a simulator
- [x] I added documentation in `README.md`
- [x] I updated the typed files (typescript)
- [x] I added a test for the API in the `__tests__` folder

Co-authored-by: Omeid Matten <omeid@kemene.com>
2024-11-07 10:39:01 +01:00
Jakub Grzywacz
29d4c7c37b fix: update warnUnimplementedFilter list (#2525)
# Summary

Closes #2523
Since `FeBlend`, `FeComposite`, `FeDropShadow` and `FeFlood` is already
supported (see: #2362) we should remove it from
`warnUnimplementedFilter` list
2024-11-04 13:12:37 +01:00
Jakub Grzywacz
cceeb2b30a chore: fix web-example app path and format examples (#2524)
# Summary

A minor change in web example app to fix SVG path and reformat examples
with prettier/lint
2024-11-04 12:57:30 +01:00
Jakub Grzywacz
2a58016ec1 feat: get currentColor from caller instead of parent (#2521)
# Summary

Fixes #2520
When an element uses `currentColor`, it should look for color in its
caller, not in its parent.
Example: 
```svg
<Svg width="100" height="100" viewBox="0 0 100 100" color="red">
  <Defs color="blue">
    <G color="green">
      <Rect id="a" x="0" y="0" width="50" height="50" fill="currentColor"/>
    </G>
  </Defs>
  <G color="pink">
    <Use href="#a"/>												<!-- #1 -->
  </G>
  <Use href="#a" transform="translate(25 25)"/>						<!-- #2 -->
  <G color="green">
    <Use href="#a" transform="translate(50 50)"/>					<!-- #3 -->
  </G>
</Svg>
```

* `#1` should be **pink**
* `#2` should be **red**
* `#3` should be **green**


![image](https://github.com/user-attachments/assets/b7ba2ec6-ea05-4bcb-9f40-0cf024e5c749)

## Test Plan

Example app -> test -> Test2520

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |          |
| MacOS   |          |
| Android |          |
2024-10-31 16:00:36 +01:00
Jakub Grzywacz
405ff97eea chore: update bundler to 2.5.22 (#2522)
# Summary

Update ruby bundler to 2.5.22 to fix failing CI

## Test Plan

CIs will not fail on ruby version
2024-10-31 09:36:49 +01:00
Jakub Grzywacz
c6af6b447d docs: add Empty screen as playground (#2517)
# Summary

Create Empty screen with blank svg in example app as playground
Additionally add FeDropShadow icon as i forgot about it.
2024-10-28 17:12:35 +01:00
Jakub Grzywacz
fd9397c1f9 fix: FeComposite in2 on Android (#2516)
# Summary

While working on
https://github.com/software-mansion/react-native-svg/pull/2514 I've
noticed a bug in `FeComposite` on Android that `in2` was ignored

## Test Plan

Run Example app -> filters -> FeComposite on Android

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |          |
2024-10-28 15:01:19 +01:00
Jakub Grzywacz
eb4889c000 fix: negative dx/dy in feOffset (#2515)
# Summary

While working on #2514 I've noticed that negative dx/dy were treated as
positive.

## Test Plan

Add FeOffset filter with negative dx/dy to an element. It should move
closer to upper left corner.

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |          |
2024-10-28 14:55:22 +01:00
Jakub Grzywacz
e6a27f8a3d feat: FeDropShadow (#2514)
# Summary

Continuation of #2362 introducing highly requested  `FeDropShadow` 
filter. This addition is straightforward since it's essentially a
shorthand (as specified in the spec) for filters that are already
implemented: https://www.w3.org/TR/filter-effects-1/#feDropShadowElement

<img width="532" alt="image"
src="https://github.com/user-attachments/assets/b221ee4c-d8b0-469b-acb0-71224fb2b1e0">

## Test Plan

Example app -> Filters -> FeDropShadow

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |          |
| macOS   |          |
| Android |          |
| Web     |          |
2024-10-28 14:44:36 +01:00
Jakub Grzywacz
36ca5c4584 fix: client rect on use element (#2513)
# Summary

Use elements had incorrect `clientRect` based on templates' rect, which
was incorrect. With this change, it ensures client rect is based on path
transformed by CTM.

## Test Plan

Example app -> Filters -> FeComposite

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |          |
2024-10-28 13:45:52 +01:00
Jakub Grzywacz
8e865a9bdb fix: create symlink to common directory (#2512)
# Summary

After changing project structure, local images stopped displaying on
Android. This is due to the fact that React Native on Android uses
okhttp for requests, which modifies the endpoint "by cleaning up the
wrong part" from
`http://10.0.2.2:8081/../common/example/assets/image.jpg`
to
`http://10.0.2.2:8081/common/example/assets/image.jpg`

A quick fix for this is to create a symlink to the common directory,
allowing images to be resolved without the `../` segment.

Special thanks to Kudo for sharing the original workaround here:
https://github.com/facebook/metro/issues/322#issuecomment-445642199.
2024-10-25 19:59:44 +02:00
Jakub Grzywacz
cc527dfd49 fix: example apps metro paths (#2511)
# Summary

Fixes paths in Metro config
2024-10-25 19:27:23 +02:00
Jakub Grzywacz
8be900eee3 fix: iOS E2E action (#2510)
# Summary

`run-ios` script has been removed from `react-native@latest` so we
shouldn't use that (and probably should migrate to
@react-native-community/cli in the future)
2024-10-25 17:25:59 +02:00
Jakub Grzywacz
0c4f58d9f5 refactor: rename example to paper-example (#2509)
# Summary

Rename example app to match the pattern.
2024-10-25 17:15:00 +02:00
Jakub Grzywacz
36aecda8c6 fix: example types (#2508)
# Summary

Fixes small mistake introduced in #2507
2024-10-25 16:20:30 +02:00
Jakub Grzywacz
b3b175a7fb feat: move examples to ./apps (#2507)
# Summary

Due to the large number of example apps in the repository, I decided to
change the structure and move all applications into an "apps" folder to
maintain a clear structure.
2024-10-25 16:12:23 +02:00
Jakub Grzywacz
a1be06cbfd chore: upgrade react native in example apps (#2506)
# Summary

Update all examples to `react-native@0.76.0`
2024-10-25 14:32:57 +02:00
Jakub Grzywacz
1daacdf474 chore: extract Windows example (#2505)
# Summary

While upgrading `./example` app to `react-native@0.76.0` I've
encountered conflicts on `@react-native/gradle-plugin` caused by
`react-native-windows@0.74.9` depending on
`@react-native/gradle-plugin@0.74.83`
This PR extracts Windows example to separate `./paper-windows-example`
so it won't conflict with RN updates in the future
2024-10-25 13:29:19 +02:00
Jakub Grzywacz
19c7ff8310 chore: set yarn version (#2504)
# Summary

Similar to
https://github.com/software-mansion/react-native-gesture-handler/pull/2882
Sets the package manager used in the example apps and in the root of the
repository to yarn@1.22.22.

## Test Plan

Install dependencies & build apps
2024-10-25 11:38:59 +02:00
Łukasz Kosmaty
a1705f13bc chore: Remove legacy version check in react-native.config.js (#2503)
## Description

Removes legacy version check from `react-native.config.js`. 

## Changes

The community CLI is no longer a dependency for React Native, meaning it
may not be installed in every project. For example, projects that use
Expo won't include the `@react-native-community/cli-*` packages.
Consequently, this check will fail, leading to issues with autolinking
components.

This version check can be removed safely, as the 9th version of the CLI
was released two years ago.

## Tests

This change was tested using `expo` project on react native `0.76`.

Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
2024-10-25 11:28:22 +02:00
Jakub Grzywacz
4637dee1e4 feat: FeComposite filter (#2433)
# Summary

<img width="324" alt="image"
src="https://github.com/user-attachments/assets/0a9b4a56-d093-49f7-aacd-c198ee00f256">

## Test Plan

Examples app -> Filters -> FeComposite

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |          |
| macOS   |    *      |
| Android |          |
| Web     |          |

_*_ macOS isn't working as:
* `CGBitmapContextCreateImage` always returns null
* FeFlood isn't aligned properly (will be fixed in the following PR)
2024-10-25 11:18:07 +02:00
Jakub Grzywacz
525d09ef34 chore: remove screens and RNS from macos example app (#2502)
# Summary

For some reason, someone installed `react-native-screens` and
`react-native-safe-area-context` into macOS example app. This PR removes
it, so CI should pass now.
2024-10-23 13:56:56 +02:00
Jakub Grzywacz
7d083b4ef4 chore: fix macos ci (#2501)
# Summary

Merge `macos-build-test-paper.yml` and `macos-build-test-fabric.yml`
into one `macos-build-test.yml`
2024-10-23 12:40:10 +02:00
Jakub Grzywacz
3aebbb22fd chore: improve ci workflow (#2499)
# Summary
2024-10-23 10:02:46 +02:00
Jakub Grzywacz
3faf625fee fix: macOS percentage values and images (#2496)
# Summary

Continuation of #2136, specifically for percentage values, images and
this:
https://github.com/software-mansion/react-native-svg/pull/2136#discussion_r1332222783

| before | after |
| --- | --- |
| <img width="1392" alt="Zrzut ekranu 2024-10-21 o 12 07 46"
src="https://github.com/user-attachments/assets/8903e069-d700-449d-ab7a-3a866f362c62">
| <img width="1392" alt="Zrzut ekranu 2024-10-21 o 12 09 16"
src="https://github.com/user-attachments/assets/2a166d73-9082-4d40-af1e-c945400cb56c">
|
| <img width="1392" alt="Zrzut ekranu 2024-10-21 o 12 07 41"
src="https://github.com/user-attachments/assets/ee2c6c22-ba3f-47f4-a0c4-1864c94e4953">
| <img width="1392" alt="Zrzut ekranu 2024-10-21 o 12 09 09"
src="https://github.com/user-attachments/assets/2c5bdff5-5ef4-4cae-bfc6-dcdc9d532070">
|

## Test Plan

Run `fabric-macos-example`

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| macOS   |          |
2024-10-22 08:50:58 +02:00
Jakub Grzywacz
f9528e5c08 docs: restore PanResponder icon (#2498)
# Summary

This PR restores PanResponder icon that somehow got corrupted in #2460.
2024-10-21 18:10:59 +02:00
Jakub Grzywacz
24b03ee12e docs: give E2E own icon (#2497)
# Summary

Give E2E own icon instead of copy of circle
2024-10-21 17:59:29 +02:00
Stanisław Sarka
e165792890 docs: improve Example apps (#2460)
Solution was based on Reanimated example app.

- new design
- navigation keeps the state after reloading the app (super useful
during development)
- visited screens are now marked
- rewrote class components into functional ones 

https://github.com/user-attachments/assets/e83167e8-9730-4128-8978-27509c496652

---------

Co-authored-by: bohdanprog <bohdan.artiukhov@swmansion.com>
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
2024-10-21 17:40:11 +02:00
Evan Bacon
69d25622b8 feat: add basic React Server Component support (#2287)
# Summary

Add basic support for React Server Components support. This package
could surely be improved (at least on web) but there are a lot of class
components (unsupported in RSC) which need to be rewritten to function
components in order to compile down further. For now, I'm opting the
entire package.

Related PRs for more context:

- https://github.com/necolas/react-native-web/pull/2678
- https://github.com/th3rdwave/react-native-safe-area-context/pull/502
- I've added more support for mixing export types, but it isn't perfect
https://github.com/expo/expo/pull/29426

## Test Plan

- It's kinda hard to test this E2E. I wrote a small jest runner in
jest-expo which executes in RSC mode, but it requires React 19 to work.
Here's where I tested this patch https://github.com/expo/expo/pull/29404
2024-10-18 10:53:43 +02:00
Jakub Grzywacz
451e681fed docs: add entry to supported react-native version (#2495)
# Summary

`react-native-svg@15.8.0` requires `react-native@0.73.0+` or above.
2024-10-17 14:42:39 +02:00
Jakub Grzywacz
81c69e30d3 Release 15.8.0 2024-10-17 14:25:01 +02:00
Jakub Grzywacz
16baf27a50 fix: crop rect invalid bounds crash (#2494)
# Summary

Do not crash on `getCropRect` call when renderableBounds is null

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |          |
2024-10-17 11:34:37 +02:00
Jakub Grzywacz
93df20ca3f remove: deprecated sourceSets (#2493)
# Summary

Remove deprecated sourceSet and drop support for `react-native@0.72` to
simplify codebase.
2024-10-17 11:11:24 +02:00
Jakub Grzywacz
1ab35b1849 chore: bump example app to react-native@0.76.0-rc.5 (#2492)
# Summary

Bump tests-example app to `react-native@0.76.0-rc.5`
2024-10-17 10:48:32 +02:00
Jakub Grzywacz
096fdc22a5 feat: FeBlend (#2489)
# Summary

Continuation of #2362 implementing `FeBlend` filter
https://www.w3.org/TR/SVG11/filters.html#feBlendElement

## Test Plan

Example app → Filters → `FeBlend`

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |          |
| macOS   |     _*_      |
| Android |          |
| Web     |          |
2024-10-16 11:45:44 +02:00
Jakub Grzywacz
cb30bd66d5 fix: filter subregion depend on primitive units not filter units (#2490)
# Summary

This fix addresses a minor bug/typo that was recently introduced, where
the filter subregion was incorrectly relying on filterUnits instead of
primitiveUnits.
2024-10-16 11:36:13 +02:00
Jakub Grzywacz
768ec5df45 fix: do not remove filter region on recycle (#2488)
# Summary

Filter regions were nil as init is not called when view is reused.
2024-10-15 09:44:31 +02:00
Jakub Grzywacz
ba54b15799 feat: FeFlood (#2487)
# Summary

Continuation of #2362 implementing `FeFlood` filter
https://www.w3.org/TR/SVG11/filters.html#feFloodElement

## Test Plan

Example app → Filters → `FeFlood`

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |          |
| macOS   |     _*_      |
| Android |          |
| Web     |          |

_* `canvasWidth/canvasHeight` is incorrect on macOS, so there might be
some problems_
2024-10-15 09:35:13 +02:00
Jakub Grzywacz
8fed77476b feat: properly implement filter region unit USER_SPACE_ON_USE (#2486)
# Summary

After deep dive into the specification, I found out that the default
filter subregion is not equal to `0% 0% 100% 100%`, rather the size of
the parent filter region.

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |          |
| MacOS   |          |
| Android |          |
2024-10-14 15:35:16 +02:00
Jakub Grzywacz
3aae632d1f feat: implement filter region lengths directly on RNSVGFilterRegion (#2485)
# Summary

[apple] Use filter region directly instead of creating new one on every
rerender.
[android] rename some variables and add temporary fix for null lengths
2024-10-14 14:47:44 +02:00
Jakub Grzywacz
2b905c4b41 chore: bump TestsExample app to react-native@0.76.0-rc.4 (#2484)
# Summary

bump TestsExample app to react-native@0.76.0-rc.4
2024-10-14 13:25:19 +02:00
Jakub Grzywacz
46b0a01b37 chore: regenerate Podfile.lock in example apps (#2483)
# Summary

Regenerate Podfile.lock in example apps using proper cocoapods version
2024-10-14 12:17:49 +02:00