I am trying to import svg which I converted into jsx using transform.tools. However when I try to import it into my component it says unable to resolve module : none of these files exist.

I checked the path in the import line and it was fine.

here is the folder structure :

I want to import Letsplay.jsx in PlayButton.js

and below is how I import the jsx in my component

import React from 'react';
import {TouchableOpacity, Animated} from 'react-native';
import LetsPlay from './LetsPlay'; // <<--- here

const PlayButton = ({navigation}) => {
  return (
    <Animated.View>
      <TouchableOpacity
        onPress={() => {
          navigation.navigate('GameSelection');
        }}>
        <LetsPlay /> // <<-- here
      </TouchableOpacity>
    </Animated.View>
  );
};

export default PlayButton;

here is the jsx component code:

import * as React from 'react';
import Svg, {Circle, G, Path, Defs} from 'react-native-svg';
/* SVGR has dropped some elements not supported by react-native-svg: filter */

function LetsPlay(props) {
  return (
    <Svg
      width={114}
      height={114}
      viewBox="0 0 114 114"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}>
      <Circle
        cx={57}
        cy={57}
        r={53.5}
        fill="#F2D330"
        stroke="#FCFCFA"
        strokeWidth={7}
      />
      <G filter="url(#filter0_d_85_425)">
        <Path
          d="M77 52.67c3.333 1.924 3.333 6.736 0 8.66L50.75 76.486c-3.333 1.924-7.5-.482-7.5-4.33V41.844c0-3.85 4.167-6.255 7.5-4.33L77 52.67z"
          stroke="#FCFCFA"
          strokeWidth={2.5}
          shapeRendering="crispEdges"
        />
      </G>
      <Defs />
    </Svg>
  );
}

export default LetsPlay;

I am using: "react-native": "0.68.2", "react-native-svg": "^13.7.0",

CodePudding user response：

I could not see any mistake but have you tried to change extenstion of LetsPlay.jsx to LetsPlay.js?

CodePudding user response：

Did you rebuild your project after importing it? Does this issue happen on iOS or Android?