# Summary
Bumped package and tests-example app from *last* golden release
`react-native@0.77.0-rc.7` to stable `react-native@0.77.0` and tested
for regression.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
## Checklist
<!-- Check completed item, when applicable, via: [X] -->
- [x] I have tested this on a device and a simulator
# 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.
# Summary
Add a newly introduced field `ios.componentProvider` to the `codegen`
configuration to create an association map between JS components and
their native implementations.
When this field is defined, it is used and codegen don't crawl the file
system looking for the mapping. You can find the documentation for it
here:
https://github.com/facebook/react-native-website/pull/4388/files#diff-7fbb6ff2e58f8bd50d2763e551c63e1816adb6d593f40d489785b575b0e82718R76
## Test Plan
Running `pod install` in the `tests-example` will currently hang and
eventually crash, as it attempts to crawl through the entire repository.
# 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.
<!-- 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
This PR adds E2E tests based on view screenshots done via
`react-native-view-shot`. It only works with devices that have their
[pixel ratio](https://reactnative.dev/docs/pixelratio) equal `3`. If you
want to use device with different pixel ratio, you need to adjust it in
`e2e/generateReferences.ts` viewport and regenerate reference images
(see below).
Steps to run tests:
- Run Metro server for example app via `yarn start` in example app's
directory
- Run `example` app on platform of your choice (currently only Android &
iOS are supported) via `yarn android` or `yarn ios` in example app's
directory
- Run `yarn e2e` in project's root directory to start Jest server
- Select `E2E` tab in example app
- Wait for tests to finish
- You can see test results, as well as diffs (actual rendered svg vs
reference image) in `e2e/diffs` directory
Steps to add new test cases:
- Put SVG of your choice to `e2e/cases` directory
- Run `yarn generateE2eRefrences`, this will open headless chrome
browser via `puppeteer` and snapshot all rendered SVGs to .png files and
later use them as reference in tests
- You should see new .png files in `e2e/references`
- When you run E2E tests again, it will use new test case(s) you've
added
## Test Plan
https://github.com/software-mansion/react-native-svg/assets/41289688/24ee5447-ce9a-43b6-9dde-76229d25a30ahttps://github.com/software-mansion/react-native-svg/assets/41289688/71d1873f-8155-4494-80bd-e4c1fa72a065
### What's required for testing (prerequisites)?
See Summary
### What are the steps to reproduce (after prerequisites)?
See Summary
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
| Web | ❌ |
## 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: bohdanprog <bohdan.artiukhov@swmansion.com>
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
# Summary
Provide a **CSS**-like filter API in the `FilterImage` component.
Unlike the SVG filter API, which can be complex and challenging even for
simple tasks, the CSS API is straightforward and allows users to quickly
achieve satisfactory results.
The full API can be viewed here
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
_We support all `<filter-function>` listed in the docs while we do not
support functions from `<url>` (`url()` and `src()`)._
All shorthands are implemented according to the W3 standard described
here
https://www.w3.org/TR/filter-effects-1/#ShorthandEquivalents
This PR also changes the `filters` prop behavior as it adds `fe` in
front of `name` attribute to not introduce any abstract above that
specified in the docs.
```tsx
<FilterImage
source={myImage}
filters={[{ name: 'colorMatrix', type: 'saturate', values: 0.2 }])
/>
```
is now
```tsx
<FilterImage
source={myImage}
filters={[{ name: 'feColorMatrix', type: 'saturate', values: 0.2 }])
/>
```
## Examples
Below are the simple examples of the usage
through `StyleSheet`
```tsx
import React from 'react';
import {StyleSheet, View} from 'react-native';
import {FilterImage} from 'react-native-svg/filter-image';
export default () => {
return (
<FilterImage
style={styles.image}
source={{
uri: 'https://cdn.pixabay.com/photo/2024/05/26/00/40/lizard-8787888_1280.jpg',
}}
/>
);
};
const styles = StyleSheet.create({
image: {
width: 200,
height: 200,
filter: 'saturate(100) grayscale(100%)',
},
});
```
or directly in the `style` prop
```tsx
import React from 'react';
import {StyleSheet, View} from 'react-native';
import {FilterImage} from 'react-native-svg/filter-image';
export default () => {
return (
<FilterImage
style={{
width: 200,
height: 200,
filter: 'saturate(100) grayscale(100%)',
}}
source={{
uri: 'https://cdn.pixabay.com/photo/2024/05/26/00/40/lizard-8787888_1280.jpg',
}}
/>
);
};
```
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
## Checklist
- [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)
Changes moved from:
https://github.com/software-mansion/react-native-screens/pull/2224
## Description
When changing native props on Fabric, codegen generates corresponding
interfaces and delegates. To make sure both implementations are
consistent, we implement those interfaces on Paper too. Currently, after
generating interfaces using codegen, developer needs to copy
corresponding files for paper manually. This task adds Gradle task, that
automates this.
## Changes
Current assumption:
Two scripts: `check-archs-consistency` and `sync-archs`. The first one
generates codegen interfaces and compares them with what we have for
paper, the second generates and copies for paper to sync the archs.
- sync is run when staged on changes to `src/paper`
- check is run on CI when `src/paper` or
`android/src/paper/java/com/facebook/react/viewmanagers` changes
## Test code and steps to reproduce
Open `src/fabric/LineNativeComponent.ts` or/and
`src/fabric/NativeSvgRenderableModule.ts` and remove any proper form
interface. Now:
- when building paper, interface should be updated
- when committing, interface should be updated
- if committed and pushed, Test consistency between Paper & Fabric
should fail :)
Brining back the prop and repeating up should cause the interface back
and CI green.
Posting changes in other places should cause CI task to run.
You can also run those commands yourself using `yarn
check-archs-consistency` and `yarn sync-archs`
# Summary
Introducing the long-awaited **Filters** in `react-native-svg` 🎉
### Motivation
This PR is the beginning of bringing support of SVG Filters into
`react-native-svg`.
* **related issues**: This PR series will address the following issues:
#150, #176, #635, #883, #994, #996, #1216
* **feature overview**: This PR is a boilerplate for Filters
* introducing `Filter` component and `FeColorMatrix` as a start.
* It also introduces a new subdirectory called
`react-native-svg/filter-image` with a `FilterImage` component.
# Usage
## Filter and Fe...
Filters are compatible with the web familiar standard, so most things
should be compatible out-of-the-box and changes will be limited to using
a capital letter as it's component.
### Example
```tsx
import React from 'react';
import { FeColorMatrix, Filter, Rect, Svg } from 'react-native-svg';
export default () => {
return (
<Svg height="300" width="300">
<Filter id="myFilter">
<FeColorMatrix type="saturate" values="0.2" />
</Filter>
<Rect
x="0"
y="0"
width="300"
height="300"
fill="red"
filter="url(#myFilter)"
/>
</Svg>
);
};
```
## Filter Image
`FilterImage` is a new component that is not strictly related to SVG.
Its behavior should be the same as a regular `Image` component from
React Native with one exception - the additional prop `filters`, which
accepts an array of filters to apply to the image.
### Example
```tsx
import React from 'react';
import { StyleSheet } from 'react-native';
import { FilterImage } from 'react-native-svg/filter-image';
const myImage = require('./myImage.jpg');
export default () => {
return (
<FilterImage
style={styles.image}
source={myImage}
filters={[
{ name: 'colorMatrix', type: 'saturate', values: 0.2 },
{
name: 'colorMatrix',
type: 'matrix',
values: [
0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0,
0, 1, 0,
],
},
]}
/>
);
};
const styles = StyleSheet.create({
image: {
width: 200,
height: 200,
},
});
```
## Test Plan
**Example App**: Updated the example app with various filter effects,
showcasing real-world usage.
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| Android | ✅ |
## Checklist
- [x] I have tested this on a device and a simulator
- [x] I added documentation in `README.md` and `USAGE.md`
- [x] I updated the typed files (typescript)
<!-- 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
Fixes following error while commiting:
```
✖ yarn format-js:
[error] No files matching the pattern were found: "./Example/src/**/*.tsx".
error Command failed with exit code 2.
```
## Test Plan
Run `yarn format-js` or do a commit so hook will get ran.
### What's required for testing (prerequisites)?
-
### What are the steps to reproduce (after prerequisites)?
See test plan
## Compatibility
| OS | Implemented |
| ------- | :---------: |
| iOS | ✅ |
| 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
# Summary
Fixes android packageName by changing it in codegen configuration from
`com.horcrux.rnsvg` to `com.horcrux.svg`
## Tests
Tested with oldest supported `react-native@0.70.0` with an old
architecture and everything is working as expected.
PR bumping the library code to compile on new arch on RN 0.73.x and restoring the proper configuration of Image component on new arch on Android.
Also bumping the FabricExample to check if the code works correctly.
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.
