Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

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

$
0
0

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?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>