https://github.com/maxgfr/expo-svg

Sample Expo (react-native) application which uses SVG
https://github.com/maxgfr/expo-svg

expo expo-svg react-native react-native-svg svg

Last synced: 7 days ago
JSON representation

Sample Expo (react-native) application which uses SVG

• Host: GitHub
• URL: https://github.com/maxgfr/expo-svg
• Owner: maxgfr
• Created: 2020-04-25T13:47:22.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-02-29T20:20:30.000Z (9 months ago)
• Last Synced: 2024-04-14T11:31:46.775Z (7 months ago)
• Topics: expo, expo-svg, react-native, react-native-svg, svg
• Language: JavaScript
• Size: 396 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# expo-svg

Sample Expo (react-native) application which uses SVG

## To test

```sh

git clone https://github.com/maxgfr/expo-svg.git

cd expo-svg

expo install

expo start

```

## How did I make this app ?

```sh

expo init

cd expo-svg

expo install react-native-svg

yarn add --dev react-native-svg-transformer

yarn add --dev metro-config

touch metro.config.js

```

Add this to `metro-config.js`

```js

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

module.exports = (async () => {

  const {

    resolver: { sourceExts, assetExts }

  } = await getDefaultConfig();

  return {

    transformer: {

      babelTransformerPath: require.resolve("react-native-svg-transformer")

    },

    resolver: {

      assetExts: assetExts.filter(ext => ext !== "svg"),

      sourceExts: [...sourceExts, "svg"]

    }

  };

})();

```

And add this to `app.json` :

```

{

  "expo": {

    "packagerOpts": {

      "config": "metro.config.js",

      "sourceExts": [

        "expo.ts",

        "expo.tsx",

        "expo.js",

        "expo.jsx",

        "ts",

        "tsx",

        "js",

        "jsx",

        "json",

        "wasm",

        "svg"

      ]

    }

  }

}

```

## Screenshot