Issue with react-native-svg 13.6.0 (Android)

rshanidhi · December 27, 2022, 5:02pm

@wodin No I’m not using it.
I tried what you suggested npx expo start --no-dev --minify.
The app is not crashing here, so I’m unable to debug it.
This is what is leading my app to crash:

import React from "react";
import { View } from "react-native";
import Svg, {
  LinearGradient,
  Stop,
  Defs,
  Path,
  Rect,
  G,
  Mask,
} from "react-native-svg";

export default function GroupCreateFlowCard({ color = "#2096F2", children }) {
  return (
    <Svg
      width={480}
      height={250}
      viewBox="0 0 335 200"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <View
        style={{
          position: "absolute",
          top: 100,
          left: "20%",
          justifyContent: "center",
        }}
      >
        {children}
      </View>
      <Rect x={32} y={32} width={271} height={164} rx={8} ry={8} fill={color} />
      <Mask
        id="mask0_3788_51994"
        maskUnits="userSpaceOnUse"
        width={304}
        height={196}
        rx={8}
        ry={8}
      >
        <Rect
          x={42}
          y={32}
          width={260}
          height={196}
          rx={8}
          ry={8}
          fill={color}
        />
      </Mask>
      <G mask="url(#mask0_3788_51994)">
        <Rect
          x={0}
          y={32}
          width={290}
          height={180}
          rx={8}
          ry={8}
          fill={color}
        />
        <Path
          d="M304.179 107.793L334.075 4.739l-13.17 244.83-204.34.841 41.988-51.413a82 82 0 0152.616-29.405l25.152-3.372c32.195-4.316 58.808-27.23 67.858-58.427z"
          fill="url(#paint0_linear_3788_51994)"
        />
        <Path
          d="M326.349 124.586l47.536-96.724-55.72 239.533-201.652-34.739 50.422-43.511a82.002 82.002 0 0156.953-19.849l25.487 1.052c32.457 1.34 62.646-16.608 76.974-45.762z"
          fill="url(#paint1_linear_3788_51994)"
        />
      </G>
      <Defs>
        <LinearGradient
          id="paint0_linear_3788_51994"
          x1={243.033}
          y1={-20.8665}
          x2={222.739}
          y2={256.088}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="#fff" />
          <Stop offset={1} stopColor="#fff" stopOpacity={0} />
        </LinearGradient>
        <LinearGradient
          id="paint1_linear_3788_51994"
          x1={288.576}
          y1={-13.2774}
          x2={220.205}
          y2={256.741}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="#fff" />
          <Stop offset={1} stopColor="#fff" stopOpacity={0} />
        </LinearGradient>
      </Defs>
    </Svg>
  );
}

wodin · December 27, 2022, 7:10pm

@tatianao OK then there’s more than one issue in this thread.

Expo Go includes the native code for react-native-svg version 13.4.x included in it for Expo SDK 47 apps. So if you try to run the JavaScript code from version 13.6.x, it might have problems. That probably explains your first screenshot.

So you should install the correct version (e.g. using expo-cli doctor --fix-dependencies).

Then you should rebuild your APK.

Do you still have issues after that?

wodin · December 28, 2022, 12:04am

If all else fails you could try this: expo.fyi/manual-debugging

I don’t see anything obviously wrong with your code, but how are you calling GroupCreateFlowCard? Maybe you’re sometimes giving it an invalid colour or something?

I’ve just created a new Expo SDK 47 app, installed react-native-svg with:

npx expo install react-native-svg

Added your code to the default App.js as follows:

import React from "react";
import Svg, { LinearGradient, Stop, Defs, Path, Rect, G, Mask } from "react-native-svg";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

function GroupCreateFlowCard({ color = "#2096F2", children }) {
  return (
    <Svg width={480} height={250} viewBox="0 0 335 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <View
        style={{
          position: "absolute",
          top: 100,
          left: "20%",
          justifyContent: "center",
        }}
      >
        {children}
      </View>
      <Rect x={32} y={32} width={271} height={164} rx={8} ry={8} fill={color} />
      <Mask id="mask0_3788_51994" maskUnits="userSpaceOnUse" width={304} height={196} rx={8} ry={8}>
        <Rect x={42} y={32} width={260} height={196} rx={8} ry={8} fill={color} />
      </Mask>
      <G mask="url(#mask0_3788_51994)">
        <Rect x={0} y={32} width={290} height={180} rx={8} ry={8} fill={color} />
        <Path
          d="M304.179 107.793L334.075 4.739l-13.17 244.83-204.34.841 41.988-51.413a82 82 0 0152.616-29.405l25.152-3.372c32.195-4.316 58.808-27.23 67.858-58.427z"
          fill="url(#paint0_linear_3788_51994)"
        />
        <Path
          d="M326.349 124.586l47.536-96.724-55.72 239.533-201.652-34.739 50.422-43.511a82.002 82.002 0 0156.953-19.849l25.487 1.052c32.457 1.34 62.646-16.608 76.974-45.762z"
          fill="url(#paint1_linear_3788_51994)"
        />
      </G>
      <Defs>
        <LinearGradient
          id="paint0_linear_3788_51994"
          x1={243.033}
          y1={-20.8665}
          x2={222.739}
          y2={256.088}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="#fff" />
          <Stop offset={1} stopColor="#fff" stopOpacity={0} />
        </LinearGradient>
        <LinearGradient
          id="paint1_linear_3788_51994"
          x1={288.576}
          y1={-13.2774}
          x2={220.205}
          y2={256.741}
          gradientUnits="userSpaceOnUse"
        >
          <Stop stopColor="#fff" />
          <Stop offset={1} stopColor="#fff" stopOpacity={0} />
        </LinearGradient>
      </Defs>
    </Svg>
  );
}

export default function App() {
  return (
    <View style={styles.container}>
      <GroupCreateFlowCard color="green">
        <Text style={{ color: "#fff", fontSize: 26 }}>Testing testing 1 2 3</Text>
      </GroupCreateFlowCard>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

and it works fine for me in Expo Go and also if I build a preview APK as follows:

eas build -p android --profile preview

danyhiol · December 28, 2022, 1:36am

@wodin Thanks again. Would you mind elaborating a bit on this? Sry but I feel kind of new with expo right now after 2 years without working with react-native.
When running my app using expo run:android it works well in dev env. And you are right Expo Go is giving the error. So I used the command you provided to build for dev: eas build -p android --profile development. And download the APK on my machine. The command actually proposes to install the APK on the emulator directly. What I approved. But when it crashes showing

Unable to load script. Make sure you're either running Meteor (run 'npx react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.

In your answer you stated:

How to use the development build in this case? I thought the APK would be like every APK that can just be installed on a phone or device without anything else and get it working. Am I missing something?
My aim here is to share the APK with other team members so they can test the app.

I also ran npx expo start --no-dev --minify
When I scan the picture, it shows me a page where I can choose between dev build and expo. Only the expo link is working the dev build button does nothing.

wodin · December 28, 2022, 11:36am

Unless you are writing your own native code, I recommend not running npx expo prebuild or npx expo run:android (which runs prebuild too) because it generates the native projects which then complicates things. See Should I exclude `ios`? - #4 by wodin

tl;dr delete your ios and android directories and avoid expo run/expo prebuild

When the APK is installed on the emulator does it crash immediately with that error? It should open a launcher screen from which you can load your app.

What happens if you install the one I built? (dev build)

Maybe try switching your app back to the managed workflow and rebuilding the dev client.

Yes, that’s how it should work. You can either run npx expo start and press a, or just open the app on your emulator/device and then point it at your development server by scanning the QR code or typing in the URL etc.

If the other team members are also developing the app then they can use the dev build. If they are using the app like a normal user in order to find bugs etc., but not actually developing the app, then you probably want to give them a “preview” build instead. This is built like the production version, but for “internal distribution”, so you don’t first need to upload it to Google Play/App Store.

hmmm… that should work. Alternatively you can log in to the dev build and press the “Fetch development servers” button and it should hopefully pop up there. Otherwise manually enter the URL printed under the QR code. e.g. “exp://192.168.6.7:19000”

Anyway, maybe try getting rid of the android directory and rebuilding the dev client. Then install it on your emulator/phone and open it. Then run npx expo start and try to load that in the dev client. If that works, create a “preview” build and install that and open it.

When those are working you might want to be able to have both the dev build and the preview build installed at the same time. If so, see Installing app variants on the same device - Expo Documentation

danyhiol · December 28, 2022, 8:29pm

Thanks for the hint, I just remove the ios/android folder.

It was crashing immediately with the previous error.

The build work just fine. It installs the app on the simulator/device and it can be launched.

After removing the folders (ios/android) I created a new local build: eas build -p android --profile preview --local I uploaded the APK on my simulator and it installed the app. But when I do run npx expo start when pressing a it loads for sometimes and then shows the following:

When I press on Development Build it runs the app normally. But on the console, nothing is printed. Maybe npx expo start is missing something like a --debug flag? npx expo start --no-dev --minify did not help here. And npx expo start --dev-client directly ran the app on the emulator. Maybe import 'expo-dev-client'; is required?

wodin · December 29, 2022, 7:29am

OK, I think I might not have explained things clearly

A development build can be used for development with npx expo start. Yes, you should import 'expo-dev-client'; at the top of the main file of your app (e.g. App.js).

A preview build is like a production app which cannot connect to a development server. It can be used for QA purposes by people who are not developing the app.

So try building with eas build -p android --profile development --local and install that.

Then try npx expo start.

Yes, that is just useful if your app works in development mode, but the production app crashes. Those flags make the development build more like a production build and hopefully it will also crash and give you more information about the crash.

danyhiol · December 30, 2022, 12:38am

@wodin Thanks a lot for your explanations. I get it now.
One last question related to this one what did the author mean with

Use IP address instead of local host.

I have this same issue my server looks like this: https://<domain>:port and fetch request are failing on android with Network request failed. Everything is fine on ios. This did not help.
Ex.

const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
fetch(url, {
  method: 'POST',  
  body: formData,  
  redirect: 'follow',  
  headers: { 
    'Content-Type': 'multipart/form-data' 
  } 
})

najisawas · January 3, 2023, 11:59pm

@wodin I was able to get react-native-gifted-charts with expo SDK 47 and react-native-svg 13.4.0 by only adding the following to my package.json

  "resolutions": {
    "react-native-svg": "13.4.0"
  }

Since this is only 2 minor versions below what react-native-gifted-charts wants it should make using the library mostly fine with no issues for the majority of use cases. I was able to npx expo install... and expo start with no issues

cc @tatianao

wodin · January 4, 2023, 5:53am

I think they were saying to use something like http://192.168.1.123/ instead of http://localhost/ so I doubt that will help you.

That error is a bit vague. The connection could have failed for various reasons. Do you get any more details? e.g. in the adb logcat -d output?

wodin · January 4, 2023, 5:59am

Yes, that will probably work. Of course it depends on exactly why react-native-gifted-charts decided to depend on react-native-svg version 13.6.x. It could be they found some bug when using earlier versions, in which case you could run into that bug at some point. It could also be that that was just the latest version at the time the Gifted Charts project was releasing the latest version, so maybe things will work fine with the slightly older version.

My theory is that it might be slightly safer to stick with react-native-svg version 13.6.x, since that’s what Gifted Charts says it wants, and it should in theory be backwards compatible with 13.4.x. Also, since you need to build with EAS Build anyway you won’t need to ensure you’re using exactly the right version to make sure it’s compatible with the native code compiled into Expo Go. The downside of using 13.6.x is that you’ll get expo-cli doctor warnings in your build logs with Expo SDK 47.

Anyway, either approach will probably work.

danyhiol · January 4, 2023, 4:15pm

The best I could get from the log is:
ReactNativeJS: java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.
…and after rebuild: (same as this)
Network request failed at <PATH>/node_modules/whatwg-fetch/dist/fetch.umd.js:535:30 in setTimeout$argument_0

wodin · January 4, 2023, 11:13pm

hmmm… OK, so it looks like some sort of SSL certificate verification error. I don’t know why it would work on iOS in that case. Are you connecting to a real web server with proper SSL config? Or is this a development server of some kind?

If it’s a real, public web server, try testing the SSL setup using:

danyhiol · January 17, 2023, 12:52pm

I am still experiencing this issue.

Yes

no issue here. And it looks like the server isn’t even receiving the request from android client. This happens on both device and emulator.

wodin · January 17, 2023, 2:28pm

OK. Looking at the error message again, it looks like the phone/emulator doesn’t trust the root certificate or there’s a missing intermediate certificate. See Common problems verifying server certificates

Can you check the “Certification Paths” section of the SSL Server Test results? In particular the “Android” tab. e.g.:

Certification Paths example

What is the name of the root certificate?

atangaexpo · January 29, 2023, 5:44am

Hey, I’m developing something with Expo, using react-native gifted charts. It used to work before, but it no longer works with expo sdk 47? That’s unfortunate.

I have a few questions: If I use the EAS build, will I still be able to make changes and run the app on my phone as usual? Will it also affect other types of libraries like react-navigation? Also will there be any costs or anything? I’m just trying to make sure.

atangaexpo · February 14, 2023, 4:23pm

Don’t know if I can bump this or not. Is there an answer to my question?

wodin · February 15, 2023, 1:12am

It should work. It’s just that react-native-gifted-charts specifies a version of react-native-svg of 13.x.y where x >= 6, while npx expo install react-native-svg will install version 13.4.0. There are a couple of ways of dealing with this:

Yes, except if by “as usual” you are referring to Expo Go. You can definitely do something like that, but you will have to create a development build to use instead of Expo Go.

I’m not 100% sure what you’re asking. But basically if you create a dev build and then want to install react-navigation you’ll need to create a new dev build.

There’s a free tier. So e.g. if you’re creating fewer than 30 builds a month in total (or 15 iOS builds) and only one at a time, then you don’t have to pay for that. If you’re using EAS Update it depends on how many updaters there are per month.

You can also build on your own machine and it would be possible to implement your own update server, in which case you wouldn’t have to pay Expo anything.

atangaexpo · February 16, 2023, 12:54am

Thank you for answering my question

system · March 18, 2023, 12:55am

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.