I'm trying to use SVG icons in my react native android app (running Expo). I've tried cleaning up the builds, starting fresh but it just does not work at all. Here is a sample source code I've used, package.json and the screenshot of the error that appears.
import Svg, { Circle } from 'react-native-svg'
<View style={styles.iconContainer}>
<Ionicons name="mail" size={60} color="#4CAF50" />
</View>
<Svg height="100" width="100" viewBox="0 0 100 100">
<Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
</Svg>
this is my package.json
{
"name": "********",
"main": "expo-router/entry",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"reset-project": "node ./scripts/reset-project.js",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"lint": "expo lint",
"format": "prettier --write **/*.{js,ts,tsx,json}"
},
"dependencies": {
"@expo/vector-icons": "^14.1.0",
"@react-native-async-storage/async-storage": "2.1.2",
"@react-navigation/bottom-tabs": "^7.3.10",
"@react-navigation/elements": "^2.3.8",
"@react-navigation/native": "^7.1.6",
"expo": "~53.0.22",
"expo-blur": "~14.1.5",
"expo-constants": "~17.1.7",
"expo-dev-client": "~5.2.4",
"expo-haptics": "~14.1.4",
"expo-image": "~2.4.0",
"expo-linking": "~7.1.7",
"expo-router": "~5.1.5",
"expo-splash-screen": "~0.30.10",
"expo-status-bar": "~2.2.3",
"expo-symbols": "~0.4.5",
"expo-system-ui": "~5.0.11",
"expo-web-browser": "~14.2.0",
"lucide-react-native": "^0.542.0",
"prettier": "^3.6.2",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-native": "0.79.5",
"react-native-gesture-handler": "~2.24.0",
"react-native-mmkv": "^3.3.1",
"react-native-nitro-modules": "^0.29.3",
"react-native-reanimated": "~3.17.4",
"react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.11.1",
"react-native-web": "~0.20.0",
"react-native-webview": "13.13.5",
"react-native-worklets": "^0.5.0",
"react-native-svg": "15.11.2"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/react": "~19.0.10",
"eslint": "^9.25.0",
"eslint-config-expo": "~9.2.0",
"typescript": "~5.8.3"
},
"private": true
}
And this is the error I'm facing:
Either I get the above error or
ViewManagerREsolver returned null for either RNSVGViewAndroid or RCTRNSVGSvgViewAndroid
This is also my metro config
const { getDefaultConfig } = require('expo/metro-config');
module.exports = (() => {
const config = getDefaultConfig(__dirname);
// For inline SVG components, use default configuration
return config;
})();
and my babel config
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin', 'react-native-worklets/plugin'],
};
};
What could be the issue? Thanks!
