zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-05 22:56:11 +00:00
Code Issues Packages Projects Releases Wiki Activity
2,148 Commits 3 Branches 0 Tags
c7743f1a41dfab549c0cd6f383066b1d1ce91c7e
Commit Graph

13 Commits

Author SHA1 Message Date
Jakub Grzywacz
c7743f1a41 chore: bump react-native and other packages (#2598) 
# Summary

* Bump react-native and other packages (babel, eslint, prettier,
`@types`) to resolve errors in
https://github.com/software-mansion/react-native-svg/pull/2586
* Cleanup unused/unnecessary devDependencies 

## Test Plan

Lib should work exactly the same as before.
 2025-01-07 14:28:14 +01:00
Jakub Grzywacz
d11d892496 feat: rewrite Svg transform (#2403) 
# Summary

Currently, when applying transforms depending on the type (RN style vs
SVG style) transforms behave differently giving wrong results.

Example component
```tsx
<Svg
  height="200"
  viewBox="0 0 200 200"
  width="200"
  // transform={[{scale: 2}]}
  // transform="scale(2)"
  // transform={[{rotate: '45deg'}]}
  // transform="rotate(45)"
  // transform={[{translateX: 100}, {translateY: 100}]}
  // transform="translate(100 100)"
>
  <Mask id="myMask">
    <Rect fill="white" height="100" width="100" x="0" y="0" />
    <Path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" />
  </Mask>
  <Rect fill="pink" height="200" width="300" x="0" y="0" />
  <Circle cx="50" cy="50" fill="purple" mask="url(#myMask)" r="50" />
  <Rect fill="green" x="50" y="100" width="100" height="100" />
</Svg>
```
| Attribute | Before | After |
| --- | --- | --- |
| `transform={[{scale: 2}]}` | <img width="250" alt="image"
src="https://github.com/user-attachments/assets/c04d7e11-e039-4d1a-b804-e993f3877b6a">
| <img width="250" alt="image"
src="https://github.com/user-attachments/assets/bb717ae4-7c8f-410a-942d-1bd6feab273c">
|
| `transform="scale(2)"` | <img width="250" alt="image"
src="https://github.com/user-attachments/assets/85717613-ede0-44a8-8524-c9af4b37c09d">
| <img width="250" alt="image"
src="https://github.com/user-attachments/assets/f4e23bc6-8cfb-4509-a2f5-45c4f642c197">
|
| `transform={[{rotate: '45deg'}]}` | <img width="250" alt="image"
src="https://github.com/user-attachments/assets/90131401-2c52-4e8a-81ab-6cd449625953">
| <img width="250" alt="image"
src="https://github.com/user-attachments/assets/bab46300-4794-4322-bd95-d6e7e7abd30e">
|
| `transform="rotate(45)"` | <img width="250" alt="image"
src="https://github.com/user-attachments/assets/6d308022-4844-451a-b767-1c3e94e7a295">
| <img width="250" alt="image"
src="https://github.com/user-attachments/assets/553bbad5-9e37-4a52-b4e0-fa0c7b6b558e">
|
| `transform={[{translateX: 100}, {translateY: 100}]}` | <img
width="250" alt="image"
src="https://github.com/user-attachments/assets/91508d75-2b0a-4be6-9280-2ace017d9271">
| <img width="250" alt="image"
src="https://github.com/user-attachments/assets/36fb5cad-1ccf-4c99-8ffd-70ea56ba589f">
|
| `transform="translate(100 100)"` | <img width="250" alt="image"
src="https://github.com/user-attachments/assets/28fa66f2-b2f2-4b86-bb41-47bd507d6018">
| <img width="250" alt="image"
src="https://github.com/user-attachments/assets/36fb5cad-1ccf-4c99-8ffd-70ea56ba589f">
|

## Test Plan

Test example app -> `Test2403`
 2024-08-19 09:16:18 +02:00
Bohdan Artiukhov
6a563f42b6 fix: type problem ReactNativeSvg.web.ts (#2374) 
# Summary

Fix type problem in `ReactNativeSvg.web.ts`
 2024-07-29 13:57:19 +02:00
Frank Oppervoll-Larsen
3939e2059e fix: Correct types for transformsArrayToProps (#2193) 
# Summary

Type TransformsStyle['transform'] has `string` added as option from
React Native 0.71.9 onward. This breaks the logic of
`transformsArrayToProps`.

This PR fixes this by scoping down the type, and removing a no-op usage
of `transformsArrayToProps`

This has been broken for a while, but not immediately visible to users
compiling using Metro and Babel.
 2024-01-03 12:41:03 +01:00
Tommy Nguyen
f2f533a292 chore: ensure consistent use of import type (#1971) 
We hit issues when building react-native-svg because of inconsistent use of import type. This change adds ESLint result to ensure consistency. I also ran yarn lint --fix to fix up the code.
 2023-01-31 14:12:21 +01:00
Wojciech Lewicki
6a5242f00b fix: proper transform prop handling (#1895) 
PR aligning handling of transform prop between web and native and adding proper handling of transform prop on web.

origin prop is now treated as transform-origin since it seems like the current behavior of this prop on native platforms.
transform prop cannot be an object with transform properties since it does not provide order of transformations which would lead to undefined behavior so this option has been removed.
RN style of transform prop (array of rotation objects) can now be used
font-size on web seems to be 16px by default and it is 12 in library - maybe we should align it somehow
removed maskTransform prop since it does not exist in SVG standard and did nothing on native side
fixed typo in Fabric Pattern updateProps method
 2022-10-25 15:55:17 +02:00
Stephen Pittman
2a44346049 Fix many JS vulns, fix tests (#1775) 
* fix: lint problem

* fix: ignore malformed JSON file for FlowJS

* fix: add missing @types/jest package

* chore: update TypeScript version

* chore: update all eslint deps

Includes updating and installing missing/wrong peer deps

* chore: update all Jest deps

* chore: replace Jest config with jest.config.ts

* fix: make root Jest tests ignore Example folders

* chore: update css-select dep

* chore: update css-tree to latest 1.x version

2.x broke tests so left a 1.x

* chore: upgrade ansi-regex to close JS vuln

* chore: upgrade ejs to close JS vuln

* chore: upgrade async to close JS vuln

* chore: upgrade simple-plist to close JS vuln
 2022-07-14 16:25:55 +02:00
Mikael Sand
279c3fcf84 perf: optimize extraction of fill, stroke, responder, matrix & display 
potentially breaking change
if any issues show up, then they'll be considered regressions
should be resolved in ways which cause less traffic from js to native
 2020-01-18 05:26:19 +02:00
Mikael Sand
eceb70b379 chore: upgrade deps, lint, format 2020-01-12 19:39:18 +02:00
Anton Savoskin
a37ebbbb15 fix: improve types for extractTransform 2019-10-20 11:19:54 +07:00
Mikael Sand
50e72b5be7 fix: refine types 2019-09-09 23:21:13 +03:00
Mikael Sand
9cda082d53 refactor: refine types 2019-09-09 22:30:54 +03:00
Mikael Sand
4f3e34e556 refactor: typescript 2019-09-09 05:44:29 +03:00