Android vector drawables in React Native.
An alternative to react-native-svg with 5x faster renders, lighter bundle and built in dark mode support.
yarn add @klarna/react-native-vector-drawableThis library supports React Native New Architecture (aka Fabric). To use this library with your Fabric application, you have to:
- Add latest
@klarna/react-native-vector-drawable - on iOS:
- Install pods using
RCT_NEW_ARCH_ENABLED=1 pod install– this is the same command you run to prepare a Fabric build but you also need to run it after a new native library gets added.
- Install pods using
- on Android:
- There are no additional steps required so long you app is configured to build with Fabric – this is typically configured by setting
newArchEnabled=trueingradle.propertiesfile in your project.
- There are no additional steps required so long you app is configured to build with Fabric – this is typically configured by setting
import VectorDrawable from '@klarna/react-native-vector-drawable';
const Component = () => (
<VectorDrawable
resourceName="ic_drawable_name"
style={{ width: 50, height: 50, tintColor: 'blue' }}
/>
);| Prop | Description | Default |
|---|---|---|
resourceName |
Name of the Android vector drawable resource. | None |
style |
See Style props. Note: border props are not supported. | None |
| Prop | Description | Default |
|---|---|---|
resizeMode |
Determines how to resize the image when the frame doesn't match the raw image dimensions. Possible values are cover, contain, stretch and center |
cover |
tintColor |
Changes the color of all the non-transparent pixels to the tintColor. | None |
See our guide on contributing.
See our changelog.
Update version in package.json and merge to master. This will publish the package to NPM, create a draft release on GitHub and a version tag. Edit the release with additional information and publish it.
Copyright © 2022 Klarna Bank AB
For license details, see the LICENSE file in the root of this project.