react-native-vector-image 0.5.1 → 0.5.3

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.1",
+  "version": "0.5.3",
   "description": "Native vector images generated from SVG",
   "main": "src/index.js",
   "types": "src/index.d.ts",
@@ -42,6 +42,14 @@
     "tempy": "^1.0.1",
     "yargs": "^16.2.0"
   },
+  "peerDependencies": {
+    "expo": ">=47.0.0"
+  },
+  "peerDependenciesMeta": {
+    "expo": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "jest": "^26.6.3",
     "metro": ">=0.83.3",

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): { uri: string; width: number; height: number } | 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;