react-native-vector-drawable

Android vector drawables in React Native.

An alternative to react-native-svg with 5x faster renders, lighter bundle and built in dark mode support.

Installation

yarn add @klarna/react-native-vector-drawable

Fabric installation

This library supports React Native New Architecture (aka Fabric). To use this library with your Fabric application, you have to:

1. Add latest @klarna/react-native-vector-drawable
2. 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.
3. 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=true in gradle.properties file in your project.

Usage

import VectorDrawable from '@klarna/react-native-vector-drawable';

const Component = () => (
  <VectorDrawable
    resourceName="ic_drawable_name"
    style={{ width: 50, height: 50, tintColor: 'blue' }}
  />
);

Props

| Prop | Description | Default | | ------------------ | -------------------------------------------------------- | ------- | | resourceName | Name of the Android vector drawable resource. | None | | style | See Style props. Note: border props are not supported. | None |

Style props

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

How to contribute

See our guide on contributing.

Release History

See our changelog.

Deployment

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.

License

Copyright © 2022 Klarna Bank AB

For license details, see the LICENSE file in the root of this project.