{"_id":"@brendan-ch/react-native-svg","name":"@brendan-ch/react-native-svg","dist-tags":{"latest":"14.1.0"},"versions":{"14.1.0":{"version":"14.1.0","name":"@brendan-ch/react-native-svg","description":"SVG library for react-native","homepage":"https://github.com/brendan-ch/react-native-svg","repository":{"type":"git","url":"git+https://github.com/brendan-ch/react-native-svg.git"},"license":"MIT","main":"lib/commonjs/index.js","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","react-native":"src/index.ts","react-native-builder-bob":{"source":"src","output":"lib","targets":["commonjs","module","typescript"]},"keywords":["react-component","react-native","ios","android","windows","SVG","ART","VML","gradient"],"scripts":{"bob":"bob build","format":"yarn format-js && yarn format-ios && yarn format-java","format-ios":"find apple/ common/ -iname *.h -o -iname *.m -o -iname *.cpp -o -iname *.mm | xargs clang-format -i","format-java":"node ./scripts/format-java.js","format-js":"prettier --write README.md CONTRIBUTING.md CODE_OF_CONDUCT.md USAGE.md ./src/**/*.{ts,tsx} ./Example/src/**/*.tsx","jest":"jest","lint":"eslint --ext .ts,.tsx src","peg":"pegjs -o src/lib/extract/transform.js ./src/lib/extract/transform.peg","prepare":"npm run bob && husky install","release":"npm login && release-it","test":"npm run lint && npm run tsc","tsc":"tsc --noEmit"},"peerDependencies":{"react":"*","react-native":"*"},"dependencies":{"css-select":"^5.1.0","css-tree":"^1.1.3"},"devDependencies":{"@react-native-community/eslint-config":"^3.0.2","@react-native-community/eslint-plugin":"^1.2.0","@react-native/babel-plugin-codegen":"^0.71.0","@react-native/eslint-config":"^0.72.2","@types/css-tree":"^1.0.3","@types/jest":"^27.5.2","@types/node":"*","@types/react":"^18.2.18","@typescript-eslint/eslint-plugin":"^5.11.0","@typescript-eslint/parser":"^5.11.0","babel-eslint":"^10.1.0","babel-jest":"^28.1.0","babel-plugin-module-resolver":"^5.0.0","clang-format":"^1.8.0","eslint":"^8.44.0","eslint-config-prettier":"^8.3.0","eslint-config-standard":"^17.0.0","eslint-import-resolver-babel-module":"^5.3.2","eslint-plugin-import":"^2.25.4","eslint-plugin-n":"^16.0.0","eslint-plugin-promise":"^6.1.1","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-standard":"^5.0.0","husky":"^8.0.1","jest":"^28.1.0","lint-staged":"^13.0.3","pegjs":"^0.10.0","prettier":"3.0.1","react":"^18.2.0","react-native":"^0.72.3","react-native-builder-bob":"^0.20.4","react-native-windows":"^0.72.4","react-test-renderer":"^18.2.0","release-it":"^14.12.5","ts-node":"^10.8.0","typescript":"^5.1.6"},"lint-staged":{"{src,Example}/**/*.{js,ts,tsx}":"yarn format-js","src/**/*.{js,ts,tsx}":"yarn lint","apple/**/*.{h,m,mm,cpp}":"yarn format-ios","android/src/**/*.java":"yarn format-java"},"nativePackage":true,"codegenConfig":{"name":"rnsvg","type":"all","jsSrcsDir":"./src/fabric","android":{"javaPackageName":"com.horcrux.rnsvg"}},"gitHead":"e264debdb272452693d8ecff42dc07c7ee43fada","bugs":{"url":"https://github.com/brendan-ch/react-native-svg/issues"},"_id":"@brendan-ch/react-native-svg@14.1.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Lh8e9NB+dIn6usDGRdmqtS6S6EF3bXi43E0I+yBLkHUGM/RLRRufGqADeE8SmJTBOHOeujCS2sLdaGEX6yfNNg==","shasum":"f239d632f86bdee9046f7158b890523cc0edb188","tarball":"https://registry.npmjs.org/@brendan-ch/react-native-svg/-/react-native-svg-14.1.0.tgz","fileCount":912,"unpackedSize":2650819,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFsXK7dE+RAQlaz7kYSyHiRO7X01dll+pXKrOtOIiKGvAiEArm71Lv1pt07oGG2LOip1VJIrQz2IW6Y3XistSSsDayA="}]},"_npmUser":{"name":"brendan-ch","email":"smallpigeon1@gmail.com"},"directories":{},"maintainers":[{"name":"brendan-ch","email":"smallpigeon1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-svg_14.1.0_1703557920118_0.2626191183853315"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-26T02:31:59.964Z","14.1.0":"2023-12-26T02:32:00.291Z","modified":"2023-12-26T02:32:00.571Z"},"maintainers":[{"name":"brendan-ch","email":"smallpigeon1@gmail.com"}],"description":"SVG library for react-native","homepage":"https://github.com/brendan-ch/react-native-svg","keywords":["react-component","react-native","ios","android","windows","SVG","ART","VML","gradient"],"repository":{"type":"git","url":"git+https://github.com/brendan-ch/react-native-svg.git"},"bugs":{"url":"https://github.com/brendan-ch/react-native-svg/issues"},"license":"MIT","readme":"<img src=\"https://user-images.githubusercontent.com/39658211/200319759-006c214f-941c-496c-a3c2-7de5b7ce33dc.png\" width=\"100%\" alt=\"React Native SVG at Software Mansion\" >\r\n\r\n[![Version](https://img.shields.io/npm/v/react-native-svg.svg)](https://www.npmjs.com/package/react-native-svg)\r\n[![NPM](https://img.shields.io/npm/dm/react-native-svg.svg)](https://www.npmjs.com/package/react-native-svg)\r\n\r\n`react-native-svg` provides SVG support to React Native on iOS, Android, macOS, Windows, and a compatibility layer for the web.\r\n\r\n[Check out the Example app](https://github.com/react-native-svg/react-native-svg/tree/main/Example)\r\n\r\n- [Features](#features)\r\n- [Installation](#installation)\r\n- [Troubleshooting](#troubleshooting)\r\n- [Opening issues](#opening-issues)\r\n- [Usage](#usage)\r\n- [TODO](#todo)\r\n- [Known issues](#known-issues)\r\n\r\n## Features\r\n\r\n1. Supports most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...).\r\n2. Easy to [convert SVG code](https://svgr.now.sh/) to react-native-svg.\r\n\r\n## Installation\r\n\r\n### With expo\r\n\r\n> ✅ The [Expo client app](https://expo.io/tools) comes with the native code installed!\r\n\r\nInstall the JavaScript with:\r\n\r\n```bash\r\nnpx expo install react-native-svg\r\n```\r\n\r\n📚 See the [**Expo docs**](https://docs.expo.io/versions/latest/sdk/svg/) for more info or jump ahead to [Usage](#usage).\r\n\r\n### With react-native-cli\r\n\r\n1. Install library\r\n\r\n   from npm\r\n\r\n   ```bash\r\n   npm install react-native-svg\r\n   ```\r\n\r\n   from yarn\r\n\r\n   ```bash\r\n   yarn add react-native-svg\r\n   ```\r\n\r\n2. Link native code\r\n\r\n   ```bash\r\n   cd ios && pod install\r\n   ```\r\n\r\n## Supported react-native versions\r\n\r\n| react-native-svg | react-native |\r\n| ---------------- | ------------ |\r\n| 3.2.0            | 0.29         |\r\n| 4.2.0            | 0.32         |\r\n| 4.3.0            | 0.33         |\r\n| 4.4.0            | 0.38         |\r\n| 4.5.0            | 0.40         |\r\n| 5.1.8            | 0.44         |\r\n| 5.2.0            | 0.45         |\r\n| 5.3.0            | 0.46         |\r\n| 5.4.1            | 0.47         |\r\n| 5.5.1            | >=0.50       |\r\n| >=6              | >=0.50       |\r\n| >=7              | >=0.57.4     |\r\n| >=8              | >=0.57.4     |\r\n| >=9              | >=0.57.4     |\r\n| >=12.3.0         | >=0.64.0     |\r\n\r\n## Support for Fabric\r\n\r\n[Fabric](https://reactnative.dev/architecture/fabric-renderer) is React Native's new rendering system. As of [version `13.0.0`](https://github.com/react-native-svg/react-native-svg/releases/tag/v13.0.0) of this project, Fabric is supported only for react-native 0.69.0+. Support for earlier versions is not possible due to breaking changes in configuration.\r\n\r\n| react-native-svg | react-native |\r\n| ---------------- | ------------ |\r\n| >=13.0.0         | 0.69.0+      |\r\n| >=13.6.0         | 0.70.0+      |\r\n| >=13.10.0        | 0.72.0+      |\r\n\r\n## Troubleshooting\r\n\r\n### Unexpected behavior\r\n\r\nIf you have unexpected behavior, please create a clean project with the latest versions of react-native and react-native-svg\r\n\r\n```bash\r\nreact-native init CleanProject\r\ncd CleanProject/\r\nyarn add react-native-svg\r\ncd ios && pod install && cd ..\r\n```\r\n\r\nMake a reproduction of the problem in `App.js`\r\n\r\n```bash\r\nreact-native run-ios\r\nreact-native run-android\r\n```\r\n\r\n### Adding Windows support\r\n\r\n1. `npx react-native-windows-init --overwrite`\r\n2. `cd windows\\<AppName>`\r\n3. Open `<AppName>.vcxproj`\r\n\r\n#### RN 0.68+\r\n\r\n4. Scroll to the bottom until you find:\r\n   ```xml\r\n   <ItemGroup>\r\n      <PackageReference Include=\"Microsoft.Windows.CppWinRT\" Version=\"X.X.XXXXXX.X\" />\r\n   </ItemGroup>\r\n   ```\r\n5. Add the following to that `<ItemGroup>`\r\n   ```xml\r\n   <PackageReference Include=\"Win2D.uwp\" Version=\"1.26.0\" />\r\n   ```\r\n\r\n#### Pre RN 0.68\r\n\r\n4. Scroll to the bottom until you find:\r\n\r\n   ```xml\r\n   <ImportGroup Label=\"ExtensionTargets\">\r\n   ```\r\n\r\n5. Add the following to that `<ImportGroup>`\r\n   ```xml\r\n   <Import Project=\"$(SolutionDir)\\packages\\Win2D.uwp.1.26.0\\build\\native\\Win2D.uwp.targets\" Condition=\"Exists('$(SolutionDir)\\packages\\Win2D.uwp.1.26.0\\build\\native\\Win2D.uwp.targets')\" />\r\n   ```\r\n\r\n## Opening issues\r\n\r\nVerify that it is still an issue with the latest version as specified in the previous step. If so, open a new issue, include the entire `App.js` file, specify what platforms you've tested, and the results of running this command:\r\n\r\n```bash\r\nreact-native info\r\n```\r\n\r\nIf you suspect that you've found a spec conformance bug, then you can test using your component in a react-native-web project by forking this codesandbox, to see how different browsers render the same content: <https://codesandbox.io/s/pypn6mn3y7> If any evergreen browser with significant userbase or other svg user agent renders some svg content better, or supports more of the svg and related specs, please open an issue asap.\r\n\r\n## Usage\r\n\r\nTo check how to use the library, see [USAGE.md](https://github.com/react-native-svg/react-native-svg/blob/main/USAGE.md)\r\n\r\n## TODO:\r\n\r\n1. Filters ([connected PR](https://github.com/react-native-svg/react-native-svg/pull/896))\r\n\r\n## Known issues:\r\n\r\n1. Unable to apply focus point of RadialGradient on Android.\r\n","readmeFilename":"README.md"}