kristerkari / react-native-svg-transformer

Import SVG files in your React Native project the same way that you would in a Web application.
MIT License
1.61k stars 116 forks source link

Dont exists support to Expo v5 (typescript) #169

Open ericktucto opened 2 years ago

ericktucto commented 2 years ago

My version expo imagen

Steps:

  1. Create new expo project (use typescript) imagen
  2. Add SVGR and transformer with commands npm install react-navite-svg and npm install -D react-native-svg-transformer
  3. Create file metro.config.js and use next config:
    
    const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => { const config = getDefaultConfig(__dirname);

const { transformer, resolver } = config;

config.transformer = { ...transformer, babelTransformerPath: require.resolve("react-native-svg-transformer"), }; config.resolver = { ...resolver, assetExts: resolver.assetExts.filter((ext) => ext !== "svg"), sourceExts: [...resolver.sourceExts, "svg"], };

return config; })();

4. Create `declarations.d.ts` file with next content:
```typescript
declare module "*.svg" {
  import React from 'react';
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}
  1. Import svg on App.tsx
    
    import { StatusBar } from 'expo-status-bar';
    import { View } from 'react-native';
    import LogoEmber from "./assets/ember.svg"; // IMPORT SVG FILE

export default function App() { return (

); }


5. Run app with `expo start` command

### Error on web
![imagen](https://user-images.githubusercontent.com/22831024/152662890-43132201-7bcb-4fe9-9e04-ab3c48ad0627.png)
Fuchsoria commented 2 years ago

Same for me

kristerkari commented 2 years ago

Thanks, I'll try it out and see if I can reproduce the error.