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 installedhttps://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?