<!-- 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>
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.
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
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
