How to export SVG from a typescript custom package to React Native Project

Question

I have a custom package called "app-packages", and i want all of my .png and .svg stored in this package. I manage to export the .png files but i have problems exporting and using the .svg file.

I already installed https://github.com/kristerkari/react-native-svg-transformer & https://github.com/react-native-svg/react-native-svg in my app-packages and react native app.

What i have tried:

I have src/Arrow.svg in the package, and i export it like this in src/index.tsx.

export { default as SvgPicture} from './Arrow.svg'

i already create a declaration.d.ts in src/

declare module "*.svg" {
    import React from 'react';
    import {
        SvgProps
    } from "react-native-svg";
    const content: React.FC<SvgProps> ;
    export default content;
}

here is my tsconfig.json

{
"compilerOptions": {
  "target": "ESNext",
  "module": "ESNext",
  "strict": true,
  "outDir": "build",
  "declaration": true,
  "jsx": "react",
  "importHelpers": true,
  "moduleResolution": "node",
  "experimentalDecorators": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "noImplicitAny": false,
  "allowJs": false,
  "sourceMap": true,
  "lib": ["es6", "dom", "dom.iterable", "es2016", "es2017"],
  "forceConsistentCasingInFileNames": true,
  "resolveJsonModule": true,
  "isolatedModules": true,
  "noImplicitReturns": true,
  "noImplicitThis": true,
  "strictNullChecks": true,
  "suppressImplicitAnyIndexErrors": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
  "noEmit": true
},
"include": ["src", "src/declaration.d.ts"],
"exclude": ["node_modules", "build"]

}

after all that done, i build the package and tried it in my app. like this

import {SvgPicture} from 'app-packages';

and call it like this in render because i already installed react-native-svg-transformer

 <SvgPicture />

but the result is this

Invariant Violation: View config getter callback for component `../../../Arrow.svg` must be a function (received `undefined`).

if the SVG file is in my react native app, the step above will show the .svg. But it will fail if i move it to app-packages. Anybody have a solution?

Answer 1

等待大神答复