2163 Commits

Author SHA1 Message Date
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
Jakub Grzywacz
3cc340424c Release 15.8.0-rc.3 2024-10-14 10:43:37 +02:00
Jakub Grzywacz
4058b4cc34 Release 15.8.0-rc.2 2024-10-14 09:54:04 +02:00
Jakub Grzywacz
279a7916da chore: change babel preset to @react-native/babel-preset (#2482)
# Summary

Change babel preset from `metro-react-native-babel-preset` to
`@react-native/babel-preset` to properly parse flow files.
2024-10-14 09:50:57 +02:00
Jakub Grzywacz
690cddd2f7 feat: improve animating colors (#2471)
# Summary

Currently on Fabric, you cannot animate color properties like `fill` or
`stroke` using Animated with `useNativeDriver: true` or Reanimated.
That's because we have custom structure that needs to be parsed on `JS`
and looks like:

```ts
type ColorStruct = Readonly<{
  type?: WithDefault<Int32, -1>;
  payload?: ColorValue;
  brushRef?: string;
}>;
```

However, special values like `currentColor` / `context-fill` /
`context-stroke` / `/^url\(#(.+)\)$/` can not be animated anyway.
Instead, we should allow passing `ColorValue` directly and detect on the
native side if its ColorValue or ColorStruct.

## Test Plan

Example app -> TestX

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |          |
| MacOS   |          |
| Android |          |

## Checklist

- [x] I have tested this on a device and a simulator
- [ ] I added documentation in `README.md`
2024-10-04 14:20:54 +02:00
Bohdan Artiukhov
74c3bf9e6e chore: improve example configuration (#2472)
# Summary

* merge examples eslint/prettier configuration
* merge and update example tsconfig

---------

Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
2024-10-04 13:15:47 +02:00
Bohdan Artiukhov
2b56bb4d03 chore: update iOS workflows (#2467)
# Summary

Update iOS workflows.
2024-10-03 08:30:17 +02:00
Jakub Grzywacz
f1d33a4e1e feat: invalidate on color change (#2470)
# Summary

Invalidate element when `color` prop changes.
2024-10-02 15:48:29 +02:00
Bohdan Artiukhov
b4dc9756df feat: support css variables for SvgCss (#2459)
# Summary
Feature #2380 

We want to add support for CSS variables when passing them to parse the
SVG XML source function.

## Test Plan
Test app -> src -> Test2380

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |         		 |
| MacOS   |            |
| Android |         	|
| Web     |    		    |

---------

Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
2024-10-02 09:23:34 +02:00
Jakub Grzywacz
9d9958264b feat: properly implement currentColor (#2466)
# Summary

Motivated by issue #2455, I decided to implement the `currentColor`
property in line with the specs
(https://www.w3.org/TR/SVG11/color.html#ColorProperty). This involves
adding the `color` property to all renderable nodes.

## Test Plan

Example app -> `Test2455`

<img width="344" alt="image"
src="https://github.com/user-attachments/assets/ccaf5a79-4097-49f8-8948-0158d9d9274c">

```svg
<Svg color="red" width="60" height="60" viewBox="0 0 24 24" fill="none">
  <Path d="M22.7927 11.1242C21.359 18.5187 12.0003 22.7782 12.0003 22.7782C12.0003 22.7782 2.64153 18.5187 1.20661 11.1242C0.326598 6.58719 2.24925 2.02329 7.13701 2.00007C10.7781 1.98296 12.0003 5.65211 12.0003 5.65211C12.0003 5.65211 13.2226 1.98173 16.8624 2.00007C21.7612 2.02329 23.6727 6.58841 22.7927 11.1242Z" fill="currentColor"/>
  <G color="green" fill="purple">
    <G>
      <Rect x="16" y="16" width="8" height="8" fill="currentColor"/>
      <G color="pink">
        <Rect x="0" y="16" width="8" height="8" color="gold" fill="currentColor"/>
        <Circle cx="12" cy="20" r="4" fill="currentColor"/>
      </G>
    </G>
  </G>
</Svg>
```
## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |          |
| MacOS   |          |
| Android |          |
2024-09-30 15:50:37 +02:00
Jakub Grzywacz
cd47aece7e style: format and rename variables (#2469)
# Summary

Formatting and rename variable committed in #2415
2024-09-30 14:25:04 +02:00
Jakub Grzywacz
cc961774e7 fix: do not crash when borderRadius is set on Android (#2415)
# Summary

Fixes #2462
Currently, on Android, when `borderRadius` style is applied to a `Svg`
component an error occurs, stating `Cannot cast Double to Float`

This PR updates the codegen types, changing them from Double to Dynamic,
aligning with the implementation with the ViewProps.

## Test

### Tested on

- [x] react-native@0.76.0-rc.1
- [x] react-native@0.75.1
- [x] react-native@0.74.2
- [x] react-native@0.73.9

### Test case
```jsx
<Svg
  width="60"
  height="60"
  viewBox="0 0 24 24"
  style={{
    borderRadius: 16.2,
    borderTopLeftRadius: 16.2,
    borderBottomRightRadius: 16.2,
    borderStartStartRadius: 16.2,
    borderStartEndRadius: 16.2,
    borderTopRightRadius: 16.2,
    borderBottomLeftRadius: 16.2,
    borderTopStartRadius: 16.2,
    borderTopEndRadius: 16.2,
    borderBottomStartRadius: 16.2,
    borderBottomEndRadius: 16.2,
    borderEndEndRadius: 16.2,
    borderEndStartRadius: 16.2,
  }}>
  <Rect x="0" y="0" width="24" height="24" fill="red" />
</Svg>
```

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |          |
2024-09-30 13:02:40 +02:00
Jakub Grzywacz
aa7701d3fd fix: currentColor dimming (#2465)
# Summary

Fixes #2455. When the shared modal was triggered, the `currentColor`
(which is `tintColor` under the hood) was being greyscaled because the
default value of `tintAdjustmentMode` was set to
`UIViewTintAdjustmentModeDimmed`. Changing it to
`UIViewTintAdjustmentModeNormal` resolves the issue.

## Test Plan

Example apps -> `Test2455`

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |          |
2024-09-27 11:49:23 +02:00