{"id":20324155,"url":"https://github.com/klarna-incubator/react-native-vector-drawable","last_synced_at":"2025-04-11T19:40:43.875Z","repository":{"id":37043906,"uuid":"358363941","full_name":"klarna-incubator/react-native-vector-drawable","owner":"klarna-incubator","description":"Android vector drawables in React Native","archived":false,"fork":false,"pushed_at":"2024-02-10T13:38:22.000Z","size":484,"stargazers_count":32,"open_issues_count":1,"forks_count":8,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-03T20:38:24.372Z","etag":null,"topics":["react-native","react-native-component"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/klarna-incubator.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-15T19:01:44.000Z","updated_at":"2025-03-06T09:58:17.000Z","dependencies_parsed_at":"2022-07-15T21:00:50.944Z","dependency_job_id":"b0037ef3-1cb7-4c8d-8fa0-2327d924e24a","html_url":"https://github.com/klarna-incubator/react-native-vector-drawable","commit_stats":{"total_commits":16,"total_committers":3,"mean_commits":5.333333333333333,"dds":0.125,"last_synced_commit":"6095016cecccc0612146a0958e083e856fda464e"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klarna-incubator%2Freact-native-vector-drawable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klarna-incubator%2Freact-native-vector-drawable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klarna-incubator%2Freact-native-vector-drawable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klarna-incubator%2Freact-native-vector-drawable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/klarna-incubator","download_url":"https://codeload.github.com/klarna-incubator/react-native-vector-drawable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248468237,"owners_count":21108784,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","react-native-component"],"created_at":"2024-11-14T19:32:39.726Z","updated_at":"2025-04-11T19:40:43.841Z","avatar_url":"https://github.com/klarna-incubator.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-vector-drawable\n\n\u003e Android vector drawables in React Native.\n\n[![Build Status][ci-image]][ci-url]\n[![License][license-image]][license-url]\n[![Developed at Klarna][klarna-image]][klarna-url]\n\nAn alternative to `react-native-svg` with 5x faster renders, lighter bundle and built in dark mode support.\n\n## Installation\n\n```sh\nyarn add @klarna/react-native-vector-drawable\n```\n\n\u003c!-- Taken from https://github.com/software-mansion/react-native-screens/blob/main/README-Fabric.md --\u003e\n\n### Fabric installation\n\nThis library supports React Native New Architecture (aka Fabric). To use this library with your Fabric application, you have to:\n\n1. Add latest `@klarna/react-native-vector-drawable`\n2. on iOS:\n   - 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.\n3. on Android:\n   - 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.\n\n## Usage\n\n```js\nimport VectorDrawable from '@klarna/react-native-vector-drawable';\n\nconst Component = () =\u003e (\n  \u003cVectorDrawable\n    resourceName=\"ic_drawable_name\"\n    style={{ width: 50, height: 50, tintColor: 'blue' }}\n  /\u003e\n);\n```\n\n### Props\n\n| Prop               | Description                                              | Default |\n| ------------------ | -------------------------------------------------------- | ------- |\n| **`resourceName`** | Name of the Android vector drawable resource.            | _None_  |\n| **`style`**        | See _Style props_. Note: border props are not supported. | _None_  |\n\n#### Style props\n\n| Prop             | Description                                                                                                                                              | Default |\n| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |\n| **`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` |\n| **`tintColor`**  | Changes the color of all the non-transparent pixels to the tintColor.                                                                                    | _None_  |\n\n## How to contribute\n\nSee our guide on [contributing](.github/CONTRIBUTING.md).\n\n## Release History\n\nSee our [changelog](CHANGELOG.md).\n\n## Deployment\n\nUpdate 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.\n\n## License\n\nCopyright © 2022 Klarna Bank AB\n\nFor license details, see the [LICENSE](LICENSE) file in the root of this project.\n\n\u003c!-- Markdown link \u0026 img dfn's --\u003e\n\n[ci-image]: https://img.shields.io/badge/build-passing-brightgreen?style=flat-square\n[ci-url]: https://github.com/klarna-incubator/react-native-vector-drawable/actions/\n[license-image]: https://img.shields.io/badge/license-Apache%202-blue?style=flat-square\n[license-url]: http://www.apache.org/licenses/LICENSE-2.0\n[klarna-image]: https://img.shields.io/badge/%20-Developed%20at%20Klarna-black?labelColor=ffb3c7\u0026style=flat-square\u0026logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAIRlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAALQAAAAAQAAAtAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABCgAwAEAAAAAQAAAA4AAAAA0LMKiwAAAAlwSFlzAABuugAAbroB1t6xFwAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAAAVBJREFUKBVtkz0vREEUhsdXgo5qJXohkUgQ0fgFNFpR2V5ClP6CQu9PiB6lEL1I7B9A4/treZ47c252s97k2ffMmZkz5869m1JKL/AFbzAHaiRbmsIf4BdaMAZqMFsOXNxXkroKbxCPV5l8yHOJLVipn9/vEreLa7FguSN3S2ynA/ATeQuI8tTY6OOY34DQaQnq9mPCDtxoBwuRxPfAvPMWnARlB12KAi6eLTPruOOP4gcl33O6+Sjgc83DJkRH+h2MgorLzaPy68W48BG2S+xYnmAa1L+nOxEduMH3fgjGFvZeVkANZau68B6CrgJxWosFFpF7iG+h5wKZqwt42qIJtARu/ix+gqsosEq8D35o6R3c7OL4lAnTDljEe9B3Qa2BYzmHemDCt6Diwo6JY7E+A82OnN9HuoBruAQvUQ1nSxP4GVzBDRyBfygf6RW2/gD3NmEv+K/DZgAAAABJRU5ErkJggg==\n[klarna-url]: https://klarna.github.io\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklarna-incubator%2Freact-native-vector-drawable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fklarna-incubator%2Freact-native-vector-drawable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklarna-incubator%2Freact-native-vector-drawable/lists"}