{"library":"react-native-svg-transformer","title":"React Native SVG Transformer","description":"React Native SVG Transformer enables developers to import SVG files directly into their React Native projects, treating them as React components. This mimics the development experience of web applications using libraries like SVGR, facilitating code sharing between web and mobile platforms. The package is currently at version 1.5.3 and demonstrates an active release cadence, frequently updating to support new versions of React Native and Expo SDK, as indicated by multiple releases within recent months addressing compatibility issues. It's a crucial tool for projects aiming for scalable vector graphics that can be dynamically styled and manipulated, differentiating itself by seamlessly integrating SVG assets into the Metro bundler workflow for both bare React Native and Expo projects.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-svg-transformer"],"cli":null},"imports":["import Logo from \"./assets/logo.svg\";\n// ...\n<Logo width={100} height={100} fill=\"blue\" />","babelTransformerPath: require.resolve(\"react-native-svg-transformer/react-native\")","babelTransformerPath: require.resolve(\"react-native-svg-transformer/expo\")"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"npm install --save-dev react-native-svg-transformer\nnpm install react-native-svg\ncd ios && pod install # For iOS projects\n\n// metro.config.js (for React Native v0.72.1 or newer)\nconst { getDefaultConfig, mergeConfig } = require(\"@react-native/metro-config\");\n\nconst defaultConfig = getDefaultConfig(__dirname);\nconst { assetExts, sourceExts } = defaultConfig.resolver;\n\nconst config = {\n  transformer: {\n    babelTransformerPath: require.resolve(\n      \"react-native-svg-transformer/react-native\"\n    )\n  },\n  resolver: {\n    assetExts: assetExts.filter((ext) => ext !== \"svg\"),\n    sourceExts: [...sourceExts, \"svg\"]\n  }\n};\n\nmodule.exports = mergeConfig(defaultConfig, config);\n\n// App.js or any component file\nimport React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport Logo from './assets/logo.svg'; // Assuming logo.svg is in an assets folder\n\nconst App = () => {\n  return (\n    <View style={styles.container}>\n      <Logo width={200} height={200} fill=\"#FF6347\" />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n});\n\nexport default App;\n","lang":"javascript","description":"Demonstrates how to install `react-native-svg-transformer` and `react-native-svg`, configure Metro for a bare React Native project, and then import and render an SVG file as a React component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}