Not working with "expo": "~42.0.1",

[aminsaedi]

Hi, I really need this lib. can anyone help?

[kristerkari]

I'm not using Expo, but I have now some extra time, so I can have a look at checking how things are working with the latest Expo version.

[mlecoq]

@aminsaedi It works with the following configuration in metro.config.js

const { getDefaultConfig } = require("expo/metro-config");

const config = getDefaultConfig(__dirname);

// Remove all console logs in production...
config.transformer.minifierConfig.compress.drop_console = true;

config.transformer.babelTransformerPath = require.resolve(
  "react-native-svg-transformer"
);

config.resolver.assetExts = config.resolver.assetExts.filter(
  (ext) => ext !== "svg"
);

config.resolver.sourceExts.push("svg");

module.exports = config;

[aminsaedi]

I tried this but still noting rendered. This my package.json file

{ "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject" }, "dependencies": { "expo": "~42.0.1", "expo-status-bar": "~1.0.4", "react": "16.13.1", "react-dom": "16.13.1", "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz", "react-native-svg": "12.1.1", "react-native-web": "~0.13.12" }, "devDependencies": { "@babel/core": "^7.9.0", "react-native-svg-transformer": "^0.14.3" }, "private": true }

And metro.config.js `const { getDefaultConfig } = require("expo/metro-config");

const config = getDefaultConfig(__dirname);

// Remove all console logs in production... config.transformer.minifierConfig.compress.drop_console = true;

config.transformer.babelTransformerPath = require.resolve( "react-native-svg-transformer" );

config.resolver.assetExts = config.resolver.assetExts.filter( (ext) => ext !== "svg" );

config.resolver.sourceExts.push("svg");

module.exports = config; `

App.js

`import React from "react"; import { StyleSheet, Text, View } from "react-native"; import StoreFront from "./assets/StoreFront.svg";

export default function App() { return (

Open up App.js to start working on your app!

); }

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, }); `

Do you have any idea?

[mlecoq]

@aminsaedi can you share an example to reproduce the issue ?

[aminsaedi]

Of course there are command I ran 1-expo init svgtest then choose blank managed workflow 2-expo install react-native-svg 3-yarn add --dev react-native-svg-transformer 4-nano metro.config.js and paste code that you commented 5-add "packagerOpts": { "config": "metro.config.js", "sourceExts": [ "expo.ts", "expo.tsx", "expo.js", "expo.jsx", "ts", "tsx", "js", "jsx", "json", "wasm", "svg" ] } to app.json at the end of expo object Now I copied a svg file to asset folder of project and this is my App.js file

import React from "react";
import { StyleSheet, View } from "react-native";
import StoreFront from "./assets/StoreFront.svg";

export default function App() {
  return (
    <View style={styles.container}>
      <StoreFront width={50} height={50} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

also I attach a zip file of project folder Archive.zip

[mlecoq]

@aminsaedi your svg is rendered but has no color

<StoreFront width={50} height={50} fill="black" /> fixes the issue

[aminsaedi]

😑❤️🥲 Sorry . Thanks a lot