Hello! I have this issue using react-native 13.6.0 running the app on Expo Go:
But using that version of react-native-svg, I don’t have problems if I create an .apk.
If I install react-native-svg 13.4.0, I have problems in the .apk, the app crashes:
But works fine in Expo Go.
Expo sdk: 47
I have this same issue using react-native-gifted-charts@1.2.42 as it requires react-native-svg@"^13.6.0". But expo requires react-native-svg@13.4.0. This is so annoying because my app can’t run at all on any device.
Hi @danyhiol
Although expo-cli doctor might complain, as long as you’re using EAS Build to create your dev build and using that instead of Expo Go, I suspect it should work to install the version that react-native-gifted-charts wants.
Do you get the same error if you try that?
Hi, @wodin thanks for the hint. Yes, no matter what I try, I’m still getting either Invariant Violation: Tried to register two views with the same name RNSVGCircle or RNSVSvgViewAndroid on android. After eas build, my app never run. Just crash at start. From time to time, the app runs on the simulators. But 70-80% of the time it shows me the error.
At this point, I really don’t know what else to do. There may be other users facing this problem too.
Note: This only happens on android and not on ios.
Exactly I’m also facing this issue. I’m on expo sdk 47.0.0.
I tried different versions of react-native-svg (however the one that expo requires is react-native-svg@13.4.0) but all in vain. The dev-client build works perfectly fine.
But the apk build with "developmentClient": false crashes without saying anything.
I’m really tired of this.
Any help from any one would be appreciated @wodin .
Thank you.
Sorry, @tatianao, I missed the fact that you were trying to run this in Expo Go.
React Native Gifted Charts includes native code that is not part of the Expo SDK and is therefore not included in Expo Go. If you try to install it and then run the app in Expo Go you will get this sort of error because of the missing native code.
Instead, you will need to create a development build of your app. e.g.:
eas build -p android --profile development
Then download and install that APK on your emulator/device. Then use the development build instead of Expo Go. When you create a development build it includes the code from all of your dependencies. This means it will include the native code needed by RN Gifted Charts.
I’ve just tested this myself. Although I get warnings about the react-native-svg it works fine.
@danyhiol 
This is the development build (not Expo Go) running in the Android emulator as mentioned in my last message
@rshanidhi are you also trying to use react-native-gifted-charts? If it’s working in the dev client, but a preview APK is crashing, try running the dev client with:
npx expo start --no-dev --minify
That will emulate the production build in the dev client and you might get more information about what is going wrong. See also: Production errors
I have just created a preview build of the above test app and it runs fine. You can download the build here if you want to try running it:
Hello @wodin ! I’m NOT using React Native Gifted Charts.
I have the issue I mentioned in the first post. The react-native-svg versions there are not consistent.
@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>
);
}
@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?
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
@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.
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 Install app variants on the same device - Expo Documentation
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:
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?
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.
@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'
}
})
@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
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?
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.
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
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: