Commit Graph
2095 Commits
Author SHA1 Message Date
Jakub GrzywaczandGitHub 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 GrzywaczandGitHub 3aebbb22fd chore: improve ci workflow (#2499)
# Summary
2024-10-23 10:02:46 +02:00
Jakub GrzywaczandGitHub 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 GrzywaczandGitHub 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 GrzywaczandGitHub 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
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 BaconandGitHub 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 GrzywaczandGitHub 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 GrzywaczandGitHub 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 GrzywaczandGitHub 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 GrzywaczandGitHub 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 GrzywaczandGitHub 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 GrzywaczandGitHub 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 GrzywaczandGitHub 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 GrzywaczandGitHub 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 GrzywaczandGitHub 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 GrzywaczandGitHub 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 GrzywaczandGitHub 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 GrzywaczandGitHub 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 GrzywaczandGitHub 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 GrzywaczandGitHub 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
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 ArtiukhovandGitHub 2b56bb4d03 chore: update iOS workflows (#2467)
# Summary

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

Invalidate element when `color` prop changes.
2024-10-02 15:48:29 +02:00
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 GrzywaczandGitHub 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 GrzywaczandGitHub cd47aece7e style: format and rename variables (#2469)
# Summary

Formatting and rename variable committed in #2415
2024-09-30 14:25:04 +02:00
Jakub GrzywaczandGitHub 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 GrzywaczandGitHub 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
14a131c5d8 feat: add support base64 uri type in SvgUri component (#2444)
# Summary
Feature #2142 

Add support for data: image/svg+XML; Base64 format.

## Test Plan
TestExample app -> src -> Test2142

## Compatibility

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

---------

Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
2024-09-24 10:23:14 +02:00
Jakub GrzywaczandGitHub 712201a19e feat: implement maskUnits (#2457)
# Summary

Without the `maskUnits` attribute, masks may not render correctly, as
seen in issue #2449. This pull request adds support for `maskUnits` and
ensures proper cropping within the mask boundaries.

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅      |
| MacOS   |    ✅      |
| Android |    ✅      |
2024-09-23 14:03:15 +02:00
31ac520f63 chore: update Gemfile.lock file, start using bundle exec pod install (#2464)
# Summary
Update Gemfile with bundle install && bundle exec pod install
["Pod install" phase should run bundle exec pod install instead of pod
install ](https://github.com/microsoft/appcenter/issues/2540)

---------

Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
2024-09-23 10:51:17 +02:00
Jakub GrzywaczandGitHub 9df974194f refactor: use node resolver to locate React Native package (#2461)
# Summary

Twin pull request to
https://github.com/software-mansion/react-native-reanimated/pull/6482
2024-09-19 12:18:59 +02:00
Jakub GrzywaczandGitHub 9049089954 fix: masked element layer opacity when previous item has stroke opacity (#2456)
# Summary

On Android when element before masked element has strokeOpacity
different from 1, the paint is reused to draw an offscreen layer
resulting in wrong opacity. Partially fixes (only on Android) #2449

## Test Plan

Add `stroke` and `strokeOpacity` to element directly before masked
element.

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |    ✅      |
2024-09-18 13:13:59 +02:00
Jakub Grzywacz 09006498a8 Release 15.8.0-rc.1 2024-09-17 14:57:57 +02:00
Jakub GrzywaczandGitHub 54790cdea1 fix: exclude e2e from types in release (#2454)
# Summary

Hot fix for #2453 missing types.
Closes #2453.
2024-09-17 14:38:09 +02:00
Jakub Grzywacz 1ca8edd6d2 Release 15.8.0-rc.0 2024-09-17 11:08:10 +02:00
Jakub GrzywaczandGitHub b65b3c2679 feat: support react-native@0.76 (#2445)
# Summary

This PR adds support for React Native 0.76 (currently: 0.76.0-rc.0).
2024-09-17 11:02:48 +02:00
Jakub Grzywacz 6af15f7670 Release 15.7.0 2024-09-17 10:57:14 +02:00
Jakub GrzywaczandGitHub 2b081e5878 fix: transform scale on android (#2452)
# Summary

Undo these changes
https://github.com/software-mansion/react-native-svg/pull/2403/files#diff-7f8adeb6e7faded1a7ef711b4fa9d2b12d29ff386217e838c4551866afdd8bef
that introduced a bug described here
https://github.com/software-mansion/react-native-svg/issues/2442#issuecomment-2354170651
2024-09-17 09:56:27 +02:00
Jakub GrzywaczandGitHub 51a4e0289a fix: render G offscreen only when it's needed (opacity != 1) (#2450)
# Summary

Improve #2417 by applying offscreen canvas only when opacity attribute
is set

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |    ✅      |
2024-09-16 15:21:02 +02:00
Jakub GrzywaczandGitHub d05f69e3d7 fix: Android group opacity prop (#2417)
# Summary

Currently, on Android, when the `opacity` prop is applied to `G` or
`Svg` elements, it is rendered incorrectly. Instead of rendering the
children "offscreen" and then applying the opacity to the entire result,
the child elements themselves are rendered with the specified opacity.

Fixes #2046

## Example

```tsx
import {View} from 'react-native';
import {G, Rect, Svg} from 'react-native-svg';

export default function App() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Svg width="150" height="150" viewBox="0 0 150 150">
        <G opacity="0.5">
          <Rect width="100" height="100" fill="red" />
          <Rect x="50" y="50" width="100" height="100" fill="green" />
        </G>
      </Svg>

      <Svg width="150" height="150" viewBox="0 0 150 150" opacity="0.5">
        <Rect width="100" height="100" fill="red" />
        <Rect x="50" y="50" width="100" height="100" fill="green" />
      </Svg>
    </View>
  );
}
```

| Before | After | Web reference | 
| --- | --- | --- |
| <img width="200" alt="Zrzut ekranu 2024-08-20 o 15 44 13"
src="https://github.com/user-attachments/assets/68c57f7d-0375-4703-8c3c-a358fe124daa">
| <img width="200" alt="Zrzut ekranu 2024-08-20 o 15 44 26"
src="https://github.com/user-attachments/assets/ae7e24b9-edae-4b44-8785-3fc95a39fdd4">
| <img width="190" alt="image"
src="https://github.com/user-attachments/assets/1aa0491f-2936-4845-b18c-1fa669c34118">
|


## Test Plan

Example above is available in `test-examples` app as `Test2417`

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |    ✅     |
2024-09-12 13:42:55 +02:00
Jakub GrzywaczandGitHub 85be1d0bac feat: implement filter region (#2441)
# Summary

Implement proper handling for filter region according to the specs:
*
[FilterEffectsRegion](https://www.w3.org/TR/SVG11/filters.html#FilterEffectsRegion)
*
[FilterPrimitiveSubRegion](https://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveSubRegion)

enabling user to specify 
* `filterUnits`
* `primitiveUnits`
* `x`
* `y`
* `width`
* `height`

on `Filter` element and the last four on filter primitives.

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅      |
| MacOS   |    ✅     |
| Android |    ✅      |
| Web     |    ✅      |
2024-09-12 12:13:05 +02:00
MrAdibandGitHub 967886d40c docs: broken link in the readme file (#2443)
- simple fix for the example link in the root readme of the project
- removed todo link as it's not exist anymore in the readme
2024-09-10 13:58:44 +02:00
Bohdan ArtiukhovandGitHub 38b16f968a docs: introduce about webpack and metro bundler (#2434)
# Summary
Short explanation on how to configure the webpack bundler and a brief
rationale on why it's preferable to use the Metro bundler.

## Checklist
- [x] I added documentation in `README.md`
2024-09-04 09:39:56 +02:00
Jakub GrzywaczandGitHub fbc66311a9 fix: add deprecated SvgViewManager to not break 0.72 (#2435)
# Summary

Fixes #2428
To not introduce the breaking change in minor version, it restores the
old `SvgViewManager.java` on RN <= 72 using sourceSets

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |    ✅      |
2024-09-02 15:28:54 +02:00
Jakub GrzywaczandGitHub 8d3a03e6be fix: reset paint settings before drawing final bitmap (#2439)
# Summary

Fixes #2436.
#2403 introduced shared `Paint` between the node render method and the
final bitmap. However, Paint properties are not cleared after drawing,
so we need to call the `.clear()` method and re-enable antialiasing.

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |    ✅     |
2024-09-02 13:27:10 +02:00