react-native-svg/README.md at 0d97399d06bac18146a3177dbf5c298bd01ec83f

mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-06 07:06:11 +00:00

Files

Jakub Grzywacz 08e92074b4 feat: filters support FeColorMatrix and FilterImage (#2316 )

# 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>
  );
};
```

![image](https://github.com/software-mansion/react-native-svg/assets/39670088/c36fb238-95f4-455d-b0aa-2a7d4038b828)

## 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,
  },
});
```


![image](https://github.com/software-mansion/react-native-svg/assets/39670088/666ed89f-68d8-491b-b97f-1eef112b7095)

## 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)

2024-07-11 11:17:35 +02:00

4.5 KiB

Raw Blame History

react-native-svg provides SVG support to React Native on iOS, Android, macOS, Windows, and a compatibility layer for the web.

Check out the Example app

Features
Installation
Troubleshooting
Opening issues
Usage
TODO
Known issues

Features

Supports most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...).
Easy to convert SVG code to react-native-svg.

Installation

With expo

✅ The Expo client app comes with the native code installed!

Install the JavaScript with:

npx expo install react-native-svg

📚 See the Expo docs for more info or jump ahead to Usage.

With react-native-cli

Install library

from npm

npm install react-native-svg

from yarn

yarn add react-native-svg

Link native code
```
cd ios && pod install
```

Supported react-native versions

react-native-svg	react-native
3.2.0	0.29
4.2.0	0.32
4.3.0	0.33
4.4.0	0.38
4.5.0	0.40
5.1.8	0.44
5.2.0	0.45
5.3.0	0.46
5.4.1	0.47
5.5.1	>=0.50
>=6	>=0.50
>=7	>=0.57.4
>=8	>=0.57.4
>=9	>=0.57.4
>=12.3.0	>=0.64.0
>=15.0.0	>=0.70.0

Support for Fabric

Fabric is React Native's new rendering system. As of version 13.0.0 of this project, Fabric is supported only for react-native 0.69.0+. Support for earlier versions is not possible due to breaking changes in configuration.

react-native-svg	react-native
>=13.0.0	0.69.0+
>=13.6.0	0.70.0+
>=13.10.0	0.72.0+

Troubleshooting

Unexpected behavior

If you have unexpected behavior, please create a clean project with the latest versions of react-native and react-native-svg

react-native init CleanProject
cd CleanProject/
yarn add react-native-svg
cd ios && pod install && cd ..

Make a reproduction of the problem in App.js

react-native run-ios
react-native run-android

Adding Windows support

npx react-native-windows-init --overwrite
react-native run-windows

Opening issues

Verify that it is still an issue with the latest version as specified in the previous step. If so, open a new issue, include the entire App.js file, specify what platforms you've tested, and the results of running this command:

react-native info

If you suspect that you've found a spec conformance bug, then you can test using your component in a react-native-web project by forking this codesandbox, to see how different browsers render the same content: https://codesandbox.io/s/pypn6mn3y7 If any evergreen browser with significant userbase or other svg user agent renders some svg content better, or supports more of the svg and related specs, please open an issue asap.

Usage

To check how to use the library, see USAGE.md

Known issues:

Unable to apply focus point of RadialGradient on Android.

React Native SVG is maintained by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.

4.5 KiB Raw Blame History Unescape Escape