Add Image.resolveAssetSource

Author: oblador

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"

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;

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 = resolveAssetSource(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;