Develop Reference

Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager

I am having a headache with the error mentioned in the title.
I am using react-native-gifted-charts (https://www.npmjs.com/package/react-native-gifted-charts/v/1.0.3)
The charts works perfectly in ios but in Android it keeps crushing and throwing "Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager."
First I thought it was a problem of my code as it worked for Android before,but even I reverse the code the error continues.
I am using using yarn as a pack manager and Expo Managed Workflow.
The dependencies are the following.
"react-native": "0.70.5",
"react-native-gifted-charts": "^1.2.42",
"react-native-linear-gradient": "2.6.2",
"react-native-svg": "12.1.0",
■Things I tried
I removed the node modules and ran yarn again ← didn't work
I changed the versions of react-native-svg as I read in the article below sometimes this kind of errors happens beacause of the missmatch of the versions.← didn't work
https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/263
I removed react-native-gifted-charts react-native-linear-gradient react-native-svg and yarn added again to see if it solves the problem. ← didn't work
At the end, to confirm my code is not the problem I deleted all the code and made a simple barChart example to see if it works (sample code below) ← didn't work
import React, { useState } from "react";
import { View, StyleSheet, Text, TouchableOpacity, ScrollView } from "react-native";
import type { NativeStackScreenProps } from "#react-navigation/native-stack";
import { MainStackParamList } from "../types/navigation";
import dayjs from "dayjs";
import { BarChart, LineChart, PieChart } from "react-native-gifted-charts";
import { useSelector } from "react-redux";
import { RootState } from "../store";
export const StatisticsScreen: React.FC<Props> = () => {
const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
return (
<BarChart
data={data}
/>
);
};
P.S I also ran yarn cache clean hoping it was the cache but didn't help...

I also got the same problem when trying to use react-native-heroicons which required me to install react-native-svg but when I ran npx expo install react-native-svg, it worked.

I got the error when I used "react-native-svg": "13.6.0", downgrading to "react-native-svg": "13.4.0" solved the issue.
So maybe you can try to upgrade to the 13.4.0 version?

Expo works with 13.4.0 version of react-native-svg but react-native-gifted-charts requires 13.6.0. So I installed react-native-svg with expo install and override nested dependencies to use 13.4.0 version also by adding
"resolutions": {
"react-native-svg": "13.4.0"
}
to my package.json. Solved my issue

SVG rendering requires this module
npm install react-native-svg-transformer --save

npx expo install react-native-svg
it's work for me with fontawesome 6 pro
i have react-native-svg version 13.6.0 but
npx expo install
fix it to version 13.4.0

This happened because the latest library version internally uses
"react-native-svg": "13.6.0"
check this commit
so even though we install a different version of
"react-native-svg"
it uses version "13.6.0" which does not work in android at the moment. For me downgrading to
"react-native-gifted-charts": "1.2.41"
worked.

Use Firebase In-App-Messaging in Expo Project

I'm trying to add in a built-in application with react-native-expo a series of tools from firebase.I managed to add the following features Cloud Messaging and Firebase Analitycs.But I have to integrate In-app-messaging and Dynamic links
First time I install all firebase module/dependencies to do this task.
"#react-native-firebase/app": "^12.9.3",
"#react-native-firebase/in-app-messaging": "^12.9.3",
and my file looks like:
.......
import inAppMessaging from '#react-native-firebase/in-app-messaging
.......
useEffect(()=>{
await inAppMessaging().setMessagesDisplaySuppressed(true);
}[])
but I recive a warning:
]Unhandled promise rejection: Error: You attempted to use a firebase module that's not installed on your Android project by calling firebase.app().
After that I try to find a solution,I learn that expo allow to create plugins to extend expo functionality
I tty to salve problem fallow expo documentation but I couldn't figure out how to create these plugins.
Next I find a module that can help me with-rn-firebase but is not working and the module is depeciated.
Then I searched the internet until I discovered other people with the same problem this is the link I see in their app.json a basic config of plugin and I try to implement in my project,after I install dependencies that I need i add in my file:
"plugins": [
"#react-native-firebase/app",
"#react-native-firebase/analytics",
"#react-native-firebase/in-app-messaging"
],
But the fallowing error occure:
Package "#react-native-firebase/analytics" does not contain a valid config plugin.
Learn more: https://docs.expo.io/guides/config-plugins/#creating-a-plugin
Cannot use import statement outside a module
What I mean is, if anyone has ever faced this problem, I want in my project to be able to use in-app-messaging and dynamyc-links if someone has tried an implementation with expo and has any idea

Eventually I solved the problem,expo when I use the command expo:build android it only compiles my javascript files,but some of the code was written in java and other optional files in the android / ios folder.So instead of compiling with expo I used eas.
Faloowing command:
Run as administrator cmd and write this line npm install -g eas-cli.
Initialize new module in your expo/react native project with this line eas init.
Build aplication using this line for android: eas build --platform android
*For ios is a bit different you mast edit your file eas.json:
{
"cli": {
"version": ">= 0.43.0"
},
"build": {
"development": {
"distribution": "internal",
"android": {
"gradleCommand": ":app:assembleDebug"
},
"ios": {
"buildConfiguration": "Debug"
}
},
"preview": {
"distribution": "internal"
},
"production": {
"ios": {
"cocoapods": "1.11.2"
}
}
},
"submit": {
"production": {}
}
}
Build aplication using this line for ios: eas build --platform ios
Eas build include in complile all app file .gradle/.js/.java/.xml/.m/.h and this thing offer your posibility to build mobile app in expo with same functionality and complexity like react native cli.
Usefull Link
https://docs.expo.dev/build/setup/
React Native Expo Build Failing due to cocoapods version

I think you need to run locally using expo dev client
https://docs.expo.dev/development/getting-started/
Mostly, the package that is not supported by expo can run natively. But you need successfully built in eas build.

Capacitor v3 plugins not working on android build

I'm using capacitor v3 beta and there are no problem working in web and iOS but can't run android app.
Build is done fine but when running the app appears this error:
E/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 41296 - Msg: ERROR Error: Uncaught (in promise): Error: "Storage" plugin is not implemented on android
Error: "Storage" plugin is not implemented on android
To solve this error I've removed the storage plugin and replaced with ionic/storage plugin. But when I use other plugin, for example the Keyboard, the error shows up saying that Keyboard plugin is not implemented on android.
So I suppose that there is some problem with Android builds or project configuration.
These are de node dependencies in my package.json
"#capacitor/android": "^3.0.0-beta.6",
"#capacitor/core": "^3.0.0-beta.1",
"#capacitor/storage": "^0.3.1",
And my capacitor.config.json file
{
"appId": "net.flowww.me",
"appName": "FLOWwwMe",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "www",
"cordova": {}
}
iOS version works well with this configuration.

Storage plugin not worked after Ionic v3 upgrades from v2.
It work after manually adding a plugin to MainActivity.java for me:
package com.ionic.app;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import com.capacitorjs.plugins.storage.StoragePlugin;
public class MainActivity extends BridgeActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
registerPlugin(StoragePlugin.class);
}
}

I also faced the same problem when upgrading from capacitor 2 to 3
As it turned out, I forgot to execute:
npx cap sync android
This solved the problem

you must in mainActivity : add(StoragePlugin.class);

After creating new project and reviewing file differences saw that I have not installed
"#capacitor/cli": "^3.0.0-beta.6"
So I installed it and all compiles successfully.

In Capacitor's v2 doc, in the page dedicated to Storage Plugin (https://capacitorjs.com/docs/apis/storage) the import is done like:
import { Storage } from '#capacitor/storage';
Then in the Capacitor's v2 doc for Using Plugins (https://capacitorjs.com/docs/v2/apis) you'll find that:
Import the Plugins object. It represents the registry of all Capacitor plugins.
import { Plugins } from '#capacitor/core';
Get a plugin from the Plugin Registry (Plugins object).
const { Browser } = Plugins;
Use the plugin API:
async openBrowser() {
// On iOS, for example, open the URL in SFSafariViewController (the in-app browser)
await Browser.open({ url: "https://ionicframework.com" });
}
A common mistake is to import a plugin directly, then use the plugin API >immediately, resulting in the web implementation being used:
import { Browser } from '#capacitor/core';
async openBrowser() {
// On iOS, for example, this will open the URL in Safari instead of
// the SFSafariViewController (in-app browser)
await Browser.open({ url: "https://ionicframework.com" });
}
By using the plugins from the plugin registry (Plugins object), the native implementation of the plugin is used (if available), with fallback to the web version.
So if you're using Quasar with Capacitor v2 you probably gone crazy like me. Just replace Browser with Storage.
Maybe in v3 that problem is solved and that's why legomolina's answer works.

For Capacitor V3 plugins (tested on Android 11 & Ionic 5)
capacitor.plugins.json has the entry for Storage plugin,
MainActivity.java should not have the onCreate function, where CapV3 uses native API,
Try setting minifyEnabled=false in build.gradle.
If error disappears, create pro-guard rules in proguard-rules.pro as in https://github.com/ionic-team/capacitor/issues/739

I found the issue was solved by simply starting up Android Studio. It sync'd Gradle automatically and then I just restarted my Android dev environment - the error was gone and I was able to access Storage as per the capaitor plugin docs.
See https://capacitorjs.com/docs/android/troubleshooting#plugin-not-implemented

Incompatible receiver, Map required! (Issue with Android)

I am using this component https://github.com/wix/react-native-calendars. It Works good in iphone but having issue with android. When i open calendar page it gives me an error as
Incompatible receiver, Map required!
Environment
List of Packages Installed
"react-native": "^0.52.0",
"react-native-calendars": "^1.20.0"
Seems like there is an issue with core-js.I have also tried everything from this reference link https://github.com/zloirock/core-js/issues/368
Do anybody know, How to resolve this issue.
Thanks in advance!

Reverting back to v2.5.2 of core-js fixed it. We use core-js via babel-preset-env, in order to get it fixed the solution is to set the version hard in the resolutions property of the package.json file:
"resolutions": {
"core-js": "2.5.2"
}
the resolutions section of the package.json file is a yarn feature!

Migrating to react native 0.49

Recently I tried to update react native version from 0.48.4 to 0.49.0. I have read documentation about breaking changes.I installed react-native v0.49.0. When I am trying to run I got error like this
node_modules\react-native\local-cli\util\findSymlinkedModules.js:37
ignoredRoots? = [])
^
SyntaxError: Unexpected token ?
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at loader (\node_modules\babel-register\lib\node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (node_modules\babel-register\lib\node.js:154:7)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
I tried to upgrade using react-native-git-upgrade and react-native upgrade.But getting errors like not recognized as an internal or external command.
I found one change in New features and Enhancements change log in RN 0.49.0 like this
Refactor how symlinks are discovered in local-cli, support scoped modules.
Is there anything to do with this

If you're using a git repo, try deleting the project folder then re-clone the repo. This worked for a friend who was having the same issue.
I found this solution here:
https://github.com/facebook/react-native/issues/16458

To fix this thing I had to use babel-plugin-transform-flow-strip-types plugin.
Steps :
npm install --save-dev babel-plugin-transform-flow-strip-types
In .babelrc
{
"plugins": ["transform-flow-strip-types"]
}
More details https://www.npmjs.com/package/babel-plugin-transform-flow-strip-types

Upgrading to "react-native": "0.54.1", fixed this for me.

Ran into the same issue updating to 0.54.
The root cause here is that Node is trying to interpret JS code with Flow types (in this case, ignoredRoots?).
Normally Babel would have removed these types via babel-plugin-transform-flow-strip-types, as Dinesh suggested. But that transform is contained in the standard react-native Babel preset, which does a bunch of other things too.
So what you really have to do is to make sure you have that preset setup. It should be under a devDependency in package.json:
"devDependencies": {
"babel-preset-react-native": "^4.0.0",
And then configured in .babelrc:
{
"presets": ["react-native"]
}
After that's setup you still may need to reset the packager cache:
npm start -- --reset-cache
This is what did it for me, hope it helps.

removing ? from findSymlinkedModules.js line no 37 worked for me