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

Question

I was running this program to display SVG image

import React, { Component } from 'react';
import { View } from 'react-native';
import Expo from './assets/check-mark.svg';
import SVG from 'react-native-svg';

export default class MyApp extends Component {
 render(){
  return (
    <View style={{backgroundColor:"black"}}>
    <Expo width={20}
    height={15} />
    </View>
   );
 }
}

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

How can I resolve this? or is there any other better approach to use SVG image is React Native?

Answer 1

The best way to display an SVG in react-native(according to me, this is the best and easy method) is:

First install this SVG package: npm i react-native-svg

Secondly,

• Download the SVG image you need.
• Open that SVG file as a text file
• Copy the code from the SVG file and paste it into the below site
• https://react-svgr.com/playground/
• Check the check box against React Native on the left side of the website
• You will get a code on the right side "JSX OUTPUT"
• Now in your project's asset folder (or wherever you want to save that SVG), create a new JS file and copy-paste the code you got from the "JSX OUTPUT" side.
• Save this file and use it as a custom component in your project.

PS: No need to install the SVG transformer package