react-native-vector-image 0.5.0 → 0.5.2

package/README.md

@@ -86,6 +86,20 @@ yarn react-native run-ios
 yarn react-native run-android
 ```
 
+### Optional: using source/drawable
+
+If you need to use the underlying image source/drawable you can use the `VectorImage.resolveAssetSource` method, for example with Expo's native tabs:
+
+```tsx
+const iconSource = VectorImage.resolveAssetSource(require('./icon.svg'));
+
+return (
+  <NativeTabs.Trigger name="index">
+    <Icon src={iconSource} drawable={iconSource.uri} />
+  </NativeTabs.Trigger>
+);
+```
+
 ## Troubleshooting
 
 ### `generate` command outputs "Error while parsing image.svg"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-vector-image",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Native vector images generated from SVG",
   "main": "src/index.js",
   "types": "src/index.d.ts",

package/src/cli/getAssets.js

@@ -1,14 +1,20 @@
-const { default: Server } = require('metro/private/Server');
+const server = require('metro/private/Server');
 const { loadConfig } = require('metro-config');
 const output = require('metro/private/shared/output/bundle');
 
+const Server = server.Server || server.default || server;
 const getBabelTransformerPath = () => {
   try {
     // for RN 73+
     return require.resolve('@react-native/metro-babel-transformer');
   } catch (e) {
-    // to ensure backwards compatibility with old RN versions (RN < 73)
-    return require.resolve('metro-react-native-babel-transformer');
+    try {
+      // for Expo
+      return require.resolve('@expo/metro-config/babel-transformer');
+    } catch (e) {
+      // to ensure backwards compatibility with old RN versions (RN < 73)
+      return require.resolve('metro-react-native-babel-transformer');
+    }
   }
 };
 

package/src/index.d.ts

@@ -8,6 +8,10 @@ export interface VectorImageProps extends ImageProps {
   source: ImageRequireSource;
 }
 
-declare const VectorImage: React.FunctionComponent<VectorImageProps>;
+export function resolveVectorAssetSource(source: ImageRequireSource): ImageRequireSource | null;
+
+declare const VectorImage: React.FunctionComponent<VectorImageProps> & {
+  resolveAssetSource: typeof resolveVectorAssetSource;
+};
 
 export default VectorImage;

package/src/index.js

@@ -3,20 +3,27 @@ import { Image } from 'react-native';
 import { getAssetByID } from '@react-native/assets-registry/registry';
 import getResourceName from './getResourceName';
 
-export default function VectorImage({ source, style, ...props }) {
+export function resolveVectorAssetSource(source) {
   const asset = getAssetByID(source);
+  if (!asset) {
+    return null;
+  }
+  const resourceName = getResourceName(asset);
+  return { uri: resourceName,width: asset.width, height: asset.height }
+}
+
+export default function VectorImage({ source, ...props }) {
+  const asset = resolveVectorAssetSource(source);
   if (!asset) {
     console.warn(
       `No asset registered for source "${source}", you may have to generate assets and recompile`
     );
     return null;
   }
-  const resourceName = getResourceName(asset);
+
   return (
-    <Image
-      source={{ uri: resourceName }}
-      style={[{ width: asset.width, height: asset.height }, style]}
-      {...props}
-    />
+    <Image source={asset} {...props} />
   );
 }
+
+VectorImage.resolveAssetSource = resolveVectorAssetSource;