3

I have problem with my SVG Component. I think that I've did everything properly, but this after compiling I keep getting this error: 

Unable to resolve "./elements/Marker" from "node_modules\react-native-svg\src\ReactNativeSVG.ts"
Failed building JavaScript bundle.

Can somebody check code that I provided below and tell me what's wrong? I'm currently working on latest Expo SDK and react-native-svg package. Ohh one more important thing to say.. I've tested it in Expo-Snack and it worked!

import React, { Component } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import Svg, { Defs, RadialGradient, Stop, G, Use, Path } from 'react-native-svg';

const { height, width } = Dimensions.get('window');

export default class SvgRadialBackground extends Component {
    render() {
        return (
            <View
                style={[
                    StyleSheet.absoluteFill,
                    { alignItems: 'center', justifyContent: 'center' },
                ]}>
                <Svg width={width} height={height}>
                    <Defs>
                        <RadialGradient
                            cx="50%"
                            cy="14%"
                            fx="50%"
                            fy="25%"
                            r="177%"
                            gradientTransform="matrix(0 .5 -1 0 .5 -0.146)"
                            id="prefix__b"
                        >
                            <Stop stopColor="#FFF" stopOpacity={0.5} offset="0%" />
                            <Stop stopColor="#003232" offset="100%" />
                        </RadialGradient>
                        <Path id="prefix__a" d="M0 0h375v667H0z" />
                    </Defs>
                    <G fill="none" fillRule="evenodd">
                        <Use fill="#244F77" xlinkHref="#prefix__a" />
                        <Use
                            fill="url(#prefix__b)"
                            style={{
                                mixBlendMode: 'soft-light',
                            }}
                            xlinkHref="#prefix__a"
                        />
                        <Use stroke="#979797" xlinkHref="#prefix__a" />
                    </G>
                </Svg>
            </View>
        );
    }
}
Patryk Krawczuk
  • 61
  • 1
  • 7

1 Answers1

3

I've figured it out.. This marker which cannot be resolved it's kinda new feature, they actually update package couple days ago. I've installed it using expo install.. and it didn't give me the latest version. Now I've updated it manually and it worked.

Patryk Krawczuk
  • 61
  • 1
  • 7
  • Can you please share details how did you update your configuration? – Piotr Ponikowski Oct 15 '19 at 17:37
  • Sure @PiotrPonikowski , running "expo install react-native-svg" adds "react-native-svg": "~9.9.2" in my package.json. I've checked official documentation for this package which is available here: https://github.com/react-native-community/react-native-svg and notice that actually the latest version is 9.11.1. I've manually changed entry in package.json to "react-native-svg": "~9.11.1" and ran "npm install" one more time. It solved my problem. – Patryk Krawczuk Oct 15 '19 at 18:36
  • Thanks for following up there @PatrykKrawczuk, that solved it for me too. – Fernando Rojo Nov 12 '19 at 18:35
  • No problem @Nando. I'm glad that I can help – Patryk Krawczuk Nov 12 '19 at 20:10