Skip to content

Latest commit

 

History

History
81 lines (54 loc) · 4.65 KB

README.md

File metadata and controls

81 lines (54 loc) · 4.65 KB
Raw

react-native-vector-drawable

Android vector drawables in React Native.

Build Status License Developed at Klarna

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.