react-native-svg-transformer: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number.

I just followed the tutorial and got this error.

All i have is

package.json

"dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.7.4",
    "@react-navigation/stack": "^5.9.1",
    "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-gesture-handler": "^1.8.0",
    "react-native-reanimated": "^1.13.0",
    "react-native-safe-area-context": "^3.1.8",
    "react-native-screens": "^2.11.0",
    "react-native-svg": "^12.1.0",
    "react-native-svg-transformer": "^0.14.3"
  },

login.js

import React, {Component} from 'react';
import {Text, View} from 'react-native';
import Logo from '../assets/images/logo-white.svg';

class Login extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Logo />
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

export default Login;

Error i got is below ,

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number.

Check the render method of `Login`.

This error is located at:
    in RCTView (at View.js:34)
    in View (at login.js:8)
    in Login (at SceneView.tsx:122)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneView.tsx:114)
    in SceneView (at useDescriptors.tsx:150)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:221)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:220)
    in RCTView (at View.js:34)
    in View (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:563)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:545)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Card.tsx:539)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:535)
    in RCTView (at View.js:34)
    in View (at Card.tsx:529)
    in Card (at CardContainer.tsx:189)
    in CardContainer (at CardStack.tsx:558)
    in RCTView (at View.js:34)
    in View (at Screens.tsx:69)
    in MaybeScreen (at CardStack.tsx:551)
    in RCTView (at View.js:34)
    in View (at Screens.tsx:48)
    in MaybeScreenContainer (at CardStack.tsx:461)
    in CardStack (at StackView.tsx:458)
    in KeyboardManager (at StackView.tsx:456)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:74)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at StackView.tsx:453)
    in GestureHandlerRootView (at GestureHandlerRootView.android.js:31)
    in GestureHandlerRootView (at StackView.tsx:452)
    in StackView (at createStackNavigator.tsx:84)
    in StackNavigator (at navigation.js:12)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:390)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at navigation.js:11)
    in MyStack (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

Tried everything but couldn’t be able to solve it. I’m not using EXPO. Kindly anyone help me.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 22 (4 by maintainers)

Most upvoted comments

For React Native 0.68.2,

npm i react-native-svg npm i react-native-svg-transformer

Delete every line of metro.config.js file.

Then paste this inside: (Then Rebuild your app!)

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

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

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

This worked for me… 🥂

ChukwuebukaN on Jul 10, 2022

@hugoh59 @kurovskyi @vlad-dewitt Any chance you guys found a solution?

Facing the exact same issue using a NX monorepo (iOS release mode fails).

Fixed it by moving metro.config.js at the root level instead of apps/my-app/.

samih7 on Jul 14, 2021

Same problem in iOS release variant. It works in debug, but not in release. When I’m trying to log the component, as example

import Logo from "logo.svg"
console.log(Logo)

It shows 5, number… Any solution ?

vizet on Jan 11, 2021

@hugoh59 @kurovskyi @vlad-dewitt Any chance you guys found a solution?

Facing the exact same issue using a NX monorepo (iOS release mode fails).

samih7 on Jul 13, 2021

add the configuration to metro.config.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'],
    },
  };
})();

MahmoudAziz1996 on Jun 12, 2021

@kristerkari, this is ejected expo app, bare react native. I also tested if the config isn’t triggered, but if I change any of these configurations, then the release version of the application crashes

vizet on Jan 18, 2021