# Summary
Change data structure returned from the Image onLoad event.
Add fix in new arch for returned sizes.
## Test Plan
Manually test in both architectures and platforms.
### What's required for testing (prerequisites)?
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
---------
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
# Summary
Closes#1442
We want to add new props to the Image Component.
## Test Plan
Added the Test component.
Manually test that in Android and IOS platforms on new and old
Architectures.
### What are the steps to reproduce (after prerequisites)?
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
# Summary
Closes#1483Closes#1524
We want a handle `onPress` prop on the web version in SVG components.
## Test Plan
Check on `react-native` web version if prop onPress works.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| Web | ✅ |
# Summary
We want to add the ability to handle the Error when someone passes the
wrong URI to the `SvgFromUri` component.
Closes#2148
## Test Plan
Manual tests in TestsExample app. (Test2148)
# Summary
When comment occurred before first tag, there was a possible parsing
error if it contains `<` character.
Here is an example (line 2 and 3 would cause separate errors):
```xml
<!-- sample rectangle -->
<!-- <sample rectangle -->
<!-- <sample> rectangle -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" x="50" y="50" fill="red" />
</svg>
```
Fixes#2276
## Test Plan
Manual tests in `TestsExample` app. (Test2276)
# Summary
As per title, when running an app in bridgless mode the following redbox
appears:
> StaticViewConfigValidator: Invalid static view config for
'RNSVGSvgViewAndroid'.
>
> 'validAttributes.borderBlockColor' is missing.
> 'validAttributes.borderBlockEndColor' is missing.
> 'validAttributes.borderBlockStartColor' is missing.
> 'validAttributes.borderEndEndRadius' is missing.
> 'validAttributes.borderEndStartRadius' is missing.
> 'validAttributes.borderStartEndRadius' is missing.
> 'validAttributes.borderStartStartRadius' is missing.
## Test Plan
Tested that the redbox is gone.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | N/A |
| Android | ✅ |
## 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
---------
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
# Summary
PR bringing proper support for react-native-reanimated in the library by using dynamics instead of strings for props that can be either string or number.
This crash issue still happening for SvgCssUri component
#1760
Apply similar fix#2071
specifically for SvgCSSUri component to prevent crashes due to invalid svg content
What issues does the pull request solve? Please tag them so that they will get automatically closed once the PR is merged
-> When loading invalid svg uri with SvgCSSUri, the app crashes crashes. For example the content returning html content instead of valid svg content.
How did you implement the solution?
-> Passing the fallback prop to SvgCss where will be render when error being captured
What areas of the library does it impact?
SvgCss and SvgUriCss
This is the same issue as the one I fixed last year in #1874
To prevent this from occurring again, I enabled the `isolatedModules`
Typescript option which will warn when you export non-value identifiers
without using `export type`, which will break transpilation processes
what work on a per-file basis. You can find a [more detailed explanation
in Typescript's
doc](https://www.typescriptlang.org/tsconfig#isolatedModules)
# 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.
When using the `SvgCssUri` component, specifying `fallback` does not render the fallback component in the case of an error.
I looked through the source code and believe this is because `SvgCssUri` is rendering a `SvgCss`
22f47333fb/src/css.tsx (L712)
which renders a `SvgAst`
22f47333fb/src/css.tsx (L696)
which does not use the `fallback` prop
22f47333fb/src/xml.tsx (L96)
This fix copies over the error handling code from `SvgUri` so `SvgCssUri` can render a fallback on error. I tested the change in my project and this works like it does for `SvgUri`
Co-authored-by: Maxwell You <maxwell.you@mlb.com>
PR based on https://github.com/software-mansion/react-native-svg/pull/1452 extracting `css` related components to different package to reduce the size of the package.
***THIS IS A BREAKING CHANGE***. From now on, you should import
```
SvgCss,
SvgCssUri,
SvgWithCss,
SvgWithCssUri,
inlineStyles,
LocalSvg,
WithLocalSvg,
loadLocalRawResource,
```
from `react-native-svg/css` package instead.
When react-native-svg is used on a web project where typescript has been configured to resolve .web.ts file exentions before .ts, it causes type errors.
This is because the types in ReactNativeSVG.web.ts don't match the types in ReactNativeSVG.ts
This PR adds the correct types for all exported components on the web platform inside ReactNativeSVG.web.ts. Those changes are:
Added missing prop types for all components
Made style, gradientTransform, and patternTransform optional in BaseProps.
Made styleProp argument of resolve() undefined-able, to support style being an optional prop (this also seems to follow the logic in the body of the function, which has a check for a truthy styleProp)
These changes only impact types - no functionality has been changed.
SvgUri component crashes an app when uri with SVG returns html or some other content instead of valid SVG.
This change prevents those crashes and adds fallback property of JSX type which is rendered instead of corrupted SVG.
Setting Object to the props type does not allow passing any object to the method. So in TypeScript when using the method for example with Path, you will get an error when passing the d. Instead ob Object, you should use at least P so it allows the original props of the component you are using.
PR removing methods that seem unnecessary for the accessibility props since they are provided by superclasses. It was necessary to update fabric updateProps method though, since we don't call super there. Also added proper type definitions and removed unnecessary casts.
Since `Image` can use all the props provided by `CommonPathProps` type, we extend it with adding image-specific props.
Co-authored-by: Umesh Dangrecha <umeshdangrecha240@gmail.com>
Co-authored-by: Wojciech Lewicki <wojciech.lewicki@swmansion.com>
PR adding accessibility and testId props and virtual nodes to support e2e tests tools and provide general accessibility support.
Co-authored-by: yonatan.altaraz <yonatan.altaraz@khealth.ai>
Co-authored-by: galkahana <gal.kahana@hotmail.com>
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.
When importing the library we have a lot of React Native warning about circular dependency. This PR aims to fix those warnings.
Co-authored-by: Carl-MONNERA <cmonnera@regate.io>
PR aligning example apps and fixing one bug. On web, if you don't pass a color to the elements, they are rendered with `black` fill. We recreate this behavior in examples, but maybe it should be the default behavior if `fill` is `undefined`. It would probably need to be changed on the native side somehow.
Another fix is to parse `fill` prop in `setNativeProps` since Fabric support has been added and `fill` prop structure has been changed, it cannot be handled on the native side on `Android` due to complying to interfaces.
Another fix is passing `transform` prop in `Svg` to `G` when it is not `react-native` style `transform` prop so it is always applied. It creates a problem mentioned in the comment in the code and should be addressed in later PRs.
Changed `requireNativeComponent` to `codegenNativeComponent` so that upcoming changes (Static View Configs, Bridgeless Mode and idk what more) in `react-native` are available in the library. Also, types and native components are now taken directly from `fabric` folder to make sure the values passed to the native components are the ones defined in props. It should work on all supported versions since `codegenNativeComponent` function exists from RN v. 0.61.0. Suggested by @RSNara and @cipolleschi
Reason for [`5394bbb` (#1847)](5394bbbced):
- on `Paper`, `Animated` uses `setNativeProps` method when we set `useNativeDriver` to `false`, and does not rerender the component. Therefore, new transform lands only in `SvgView` and is parsed in `RCTViewManager.m` .
- on `Fabric`, the same code makes the components rerender. Due to this, information about new transform is passed to the `SvgView` child: `G` , making it apply translations from the transform in its `updateProps` method.
- other than `Animated` use-case, on both archs, if we just passed `transform` prop to `Svg` component, it would end up in double transformations now as well. All of those changes are due to https://github.com/software-mansion/react-native-svg/pull/1895, which added proper parsing of RN style `transform` prop (array of transformations objects) therefore making `G` properly handle `transform` prop passed from `Svg`.
Reason for [`19bcb24` (#1847)](19bcb2464b): Same as https://github.com/software-mansion/react-native-screens/pull/1624
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
Allow 'string' type for href and xlinkHref props in Image component.
Logic in the component allows passing 'string' values to the Image.resolveAssetSource by checking for its type, so it would be nice to reflect it on the properties types as well.
Up until now, trying to use reanimated with react-native-svg in react-native-web resulted in an error.
This adds a setNativeProps function to the web implementation to directly modify the transform and style props on a SVGElement ref.
Since there is a need to track the "last merged props" and those need to be reset on every render, the render method has been moved into the WebShape class and a tag string property has been added.
As g had some extra handling for x and y, a prepareProps function was added as well.
PR fixing the behavior of setting color and tintColor values on SvgView component. Since we added proper annotations and macros on the native side, we don't have to call processColor on the JS side.
PR adding proper handling of pointerEvents in the library. Based on the comment by @RSNara :
> For all Android components, static ViewConfigs are generated from the components types + BaseVIewConfig.android.js. The BaseViewConfig for all android components is facebook/react-native@c5217f1/Libraries/NativeComponent/BaseViewConfig.android.js#L288-L297, which doesn't contain the pointerEvents validAttribute. So, React Native SVG components must re-declare the pointerEvents validAttribute. Otherwise, the pointerEvents validAttribute won't be in the static ViewConfig, which means React won't pass that prop to native with Static ViewConfigs.
We needed a way to trick codegen since we added our own pointerEvents with string type, and such prop is already present in ViewProps from react-native, but as a union of strings, so their types did not match. As codegen parses string literals, we include changed ViewProps type, without pointerEvents prop, so we satisfy both codegen and TS.
As for how pointerEvents are handled now:
iOS:
Paper: prop is passed in RCTViewManager but it looks like it does not matter what you pass there, since even if you set none, resulting in view.userInteractionEnabled = NO; (facebook/react-native@065db68/React/Views/RCTViewManager.m#L256), custom implementation of hitTest will not take it into account anyhow.
Fabric: we don’t use pointerEvents prop but it is not a problem since it is not used in the implementation of neither SvgView and RCTViewComponentView (it is used in hitTest method there, but we override it)
Android:
Paper: the prop was passed through ReactViewManager and was set on the view directly. But the setter for pointerEvents is not visible outside of ReactViewGroup . After adding Fabric integration for both platforms: BaseViewManager does not implement setter for pointerEvents so we have to add the prop by ourselves. Still, we cannot call the setter from ReactViewGroup since it is not visible, so all the logic for pointerEvents should be migrated to SvgView unfortunately or we should use reflection to get that method.
Despite that, it seems that behavior differs on Android and iOS since setting pointerEvents to none on Android makes the view not clickable, whereas on iOS it does not change anything.
If you built your app using `esbuild` (for example using [`@rnx-kit/metro-serializer-esbuild`](https://microsoft.github.io/rnx-kit/docs/tools/metro-serializer-esbuild)), then it complains that the imports do not exist for type imports.
Marking them explicitely as types fixes this issue, in addition to removing those import/exports from non-TS builds.
I also transformed them from an import + export statements to an `export … from …` statement.
PR transfering Fabric specs to TS, removing unnecessary @ReactProp adnotations, unifying inheritance hierarchy across platforms, adding custom types for color and image source props so they are parsed by react-native.
Version of #1754 without usage of ComponentViews. It seems like a more proper way, but introduces the necessity of clearing whole state of each component on recycling for it not to be used when view is recycled.
Still known problems:
We stringify props of type NumberProp since codegen only accepts props of a single type. It is the fastest way of dealing with it, but maybe there could be a better way to handle it.
Image resolving should be probably handled the same as in RN core
SvgView needs to set opaque = NO so it is does not have black background (it comes from the fact that RCTViewComponentView overrides backgroundColor setter which in turn somehow messes with the view being opaque). All other svg components do it already so maybe it is not such an issue.
transform prop won't work when set natively since it is not parsed in Fabric
Props translateX and translateY are ignored on web. This PR is addressing it the same way as it is already done for originX and originY.
This PR is not addressing the issue of transform as stated in issue.
