@klarna/react-native-vector-drawable

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.