Random crash when using react-native-svg in react native

Question

I am using react-native-svg to create speedometer in react native, it is working fine but I am facing random crashes. this issue is in android. Issue in crashlytics:

"com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'height' in shadow node of type: RCTView"

"com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'width' in shadow node of type: RCTView"

"com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'marginTop' in shadow node of type: RCTView"

"com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'paddingLeft' in shadow node of type: RCTView"

It will be very helpful for me if anyone can help me with the solution. thanks. here is my SVG code.

I am using following versions:

"react-native": "^0.55.0", 
"react-native-svg": "^8.0.10",



 render () {
    const {angle} = this.state;
    return (

        <Svg width={300} height={200} viewBox="0 0 300 200">
            <G >
                <Path
                    onPress={() => this.onPressFuel(0)}
                    fill="#ed5a41"
                    d="M20 150a130 130 0 0 1 5.266-36.625l57.57 16.904A70 70 0 0 0 80 150z"
                    stroke="#ed5a41" 
                />
                <Path
                    onPress={() => this.onPressFuel(1)}
                    fill="#ed5a41"
                    d="M25.266 113.375a130 130 0 0 1 15.371-33.658l50.475 32.438a70 70 0 0 0-8.277 18.124z"
                    stroke="#ed5a41"
                />
                <Path
                    onPress={() => this.onPressFuel(2)}
                    fill="#ed5a41"
                    d="M40.637 79.717a130 130 0 0 1 24.231-27.964l39.292 45.345a70 70 0 0 0-13.048 15.057z"
                    stroke="#ed5a41"
                />
                <Path
                    onPress={() => this.onPressFuel(3)}
                    fill="#dfd513"
                    d="M64.868 51.753a130 130 0 0 1 31.128-20.005l24.925 54.578a70 70 0 0 0-16.761 10.772z"
                    stroke="#dfd513"
                />
                <Path
                    onPress={() => this.onPressFuel(4)}
                    fill="#dfd513"
                    d="M95.996 31.748a130 130 0 0 1 35.503-10.425l8.539 59.39a70 70 0 0 0-19.117 5.613z"
                    stroke="#dfd513"
                />
                <Path
                    onPress={() => this.onPressFuel(5)}
                    fill="#dfd51d"
                    d="M131.5 21.323a130 130 0 0 1 37 0l-8.538 59.39a70 70 0 0 0-19.924 0z"
                    stroke="#dfd51d"
                />
                <Path
                    onPress={() => this.onPressFuel(6)}
                    fill="#dfd513"
                    d="M168.5 21.323a130 130 0 0 1 35.504 10.425l-24.925 54.578a70 70 0 0 0-19.117-5.614z"
                    stroke="#dfd513"
                />
                <Path
                    onPress={() => this.onPressFuel(7)}
                    fill="#dfd513"
                    d="M204.004 31.748a130 130 0 0 1 31.128 20.005L195.84 97.098a70 70 0 0 0-16.76-10.772z"
                    stroke="#dfd513"
                />
                <Path
                    onPress={() => this.onPressFuel(8)}
                    fill="#59ba87"
                    d="M235.132 51.753a130 130 0 0 1 24.231 27.964l-50.475 32.438a70 70 0 0 0-13.048-15.057z"
                    stroke="#59ba87"
                />
                <Path
                    onPress={() => this.onPressFuel(9)}
                    fill="#59ba87"
                    d="M259.363 79.717a130 130 0 0 1 15.371 33.658l-57.57 16.904a70 70 0 0 0-8.276-18.124z"
                    stroke="#59ba87"
                />
                <Path
                    onPress={() => this.onPressFuel(10)}
                    fill="#59ba87"
                    d="M274.734 113.375A130 130 0 0 1 280 150h-60a70 70 0 0 0-2.835-19.721z"
                    stroke="#59ba87"
                />
            </G>
            <G >
                <Text transform="translate(10 150)">
                    {'E'}
                </Text>
                <Text transform="translate(140 15)">
                    {'1/2'}
                </Text>
                <Text transform="translate(290 150)">
                    {'F'}
                </Text>
            </G>
            <G  transform="translate(150,150)">
                <Path
                    d="M5,0C4.998730371544071,-0.032502488471773616,1.6666666666666667,-128,0,-128S-5,0,-5,0S-1.6666666666666667,5,0,5S4.583333333333333,0.4166666666666667,5,0"
                    transform={`rotate(${angle})`}></Path>
            </G>
        </Svg>
    );
}`

Sean Wcisel · Accepted Answer · 2018-12-18 17:38:53Z

1

I believe this is the issue you've encountered. It appears to have been fixed in React Native 0.57.4.

answered Dec 18, 2018 at 17:38

Sean Wcisel

765 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

debayan chakravarty · Accepted Answer · 2024-08-28 00:01:12Z

0

if you are using :- expo then ->expo install react-native-svg react-native-qrcode-svg react native ->npm install react-native-svg react-native-qrcode-svg

then build the app again if using expo sudo npx expo run:android --variant release
check ->/android/app/build/outputs/apk/release/app-release.apk try out-> app-release.apk in your android phone

answered Aug 28, 2024 at 0:01

debayan chakravarty

1152 silver badges11 bronze badges

Collectives™ on Stack Overflow

Random crash when using react-native-svg in react native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related