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.
Related
Is #react-native-firebase/admob deprecated? or just.. Why it doesn't work?
I am using #react-native-firebase/admob (https://rnfb-docs.netlify.app/admob/usage).
Everything works fine before to use "admob()". When I add admob() to the code appears this error:
"TypeError: (0, _admob.default) is not a function"
Do someone know why?
My code below (basic usage):
import React from 'react';
import { Text, View} from 'react-native';
import admob, { MaxAdContentRating } from '#react-native-firebase/admob';
import { InterstitialAd, RewardedAd, BannerAd, TestIds } from '#react-native-
firebase/admob';
import { BannerAdSize} from '#react-native-firebase/admob';
class App extends React.Component{
componentDidMount(){
// this was taked of official page: https://rnfb-docs.netlify.app/admob/usage#installation
admob()
.setRequestConfiguration({
// Update all future requests suitable for parental guidance
maxAdContentRating: MaxAdContentRating.PG,
// Indicates that you want your content treated as child-directed for purposes of COPPA.
tagForChildDirectedTreatment: true,
// Indicates that you want the ad request to be handled in a
// manner suitable for users under the age of consent.
tagForUnderAgeOfConsent: true,
})
.then(() => {
// Request config successfully set!
});
}
render(){
return(
<View style={{
alignItems:"center",
justifyContent:"center",
height:"100%"}}>
<Text style={{color:"black"}}>
Hola
</Text>
<BannerAd
unitId={TestIds.BANNER}
size={BannerAdSize.FULL_BANNER} />
</View>
)
}
}
export default App;
Despite #CodeJoe Answer, I still got confused by different Documentations for the React Native Firebase that where around, hence I spend lots of time and energy to get around it.
I open an issue here where is confirmed that Google removed the AdMob Package since v11.5.0.
AdMob is no longer in Firebase APIs, so this module no longer wraps it, there is no documentation to correct.
However it did exist as recently as v11.5.0 here and if you browse the repository at that point, you may consider the e2e tests for AdMob at the time a primer on "How To Use AdMob" https://github.com/invertase/react-native-firebase/tree/0217bff5cbbf233d7915efb4dbbdfe00e82dff23/packages/admob/e2e
Please, don't be like me and check the correct Documentation and website:
Correct
https://rnfirebase.io
Wrong Wrong Wrong, this refers to an older verison
https://rnfb-docs.netlify.app
The internet has a long memory, so there are stale copies of the docs out and about yes, but rnfirebase.io is always the official and current doc site
Admob was removed completely from the firebase ecosystem by Google so it does not exist here no. There are some community packages for it, our v11.5 version that has it, and we hope to peel our implementation out and update it for the community but it takes time and we are unfortunately still backlogged on official firebase apis, so it has not happened yet
So for AdMob solution I would use another Library, and use react-native-firebase for the Solutions that they currently provide
Alternative Library (August 2021)
DISCLAIMER
React Native Firebase is a great library still for the other packages they provide (Firebase, Analitycs...) and the Admob version 11.5 is still a solution. These are just suggestion for alternatives for Admob.
react-native-admob-alpha Simple and fresh library, recently updated.
react-native-admob-native-ads Another brand new library, they implement Admob Native Advanced Ads.
Expo AdMob (Available also for bare React-Native Projects)
To complete your searching I'll add that Admob is removed from React Native Firebase and there is no plan to implement it again. Only re-host code on an external repository.
Last supported version is 11.5.0
It means if you would like to use RN Firebase Admob before re-host you need to use all other services (like RNF analytics) with this version.
For more info please check https://github.com/invertase/react-native-firebase/issues/5329#issuecomment-843272057
Remember to use
dependencies{
"#react-native-firebase/admob": "11.5.0",
"#react-native-firebase/app": "11.5.0",
}
instead of
dependencies{
"#react-native-firebase/admob": "^11.5.0",
"#react-native-firebase/app": "^11.5.0",
}```
I could solve it.
SOLVED
Just check in the file "package.json" that packages of firebase has the same version, example:
dependencies{
"#react-native-firebase/admob": "^11.5.0",
"#react-native-firebase/app": "^11.5.0"
}
TIP
Works to similars errors.
I am able to use 11.5.0 downgrade trick in react native 0.65.1 for my RewardedAds. I edited the package.json file as said. It didn't work but I managed to run it in a different way:
Close any running react-native related terminals. Uninstall #react-native-firebase/app.
npm uninstall #react-native-firebase/app
Install the #react-native-firebase/app version 11.5.0 directly with this command.
npm install #react-native-firebase/app#11.5.0
After the installation, go to package.json>dependencies and do both packages versions the same(11.5.0) and remove ^.
"#react-native-firebase/admob": "11.5.0",
"#react-native-firebase/app": "11.5.0",
Start the react-native with fresh cache then run-android.
npx react-native start --reset-cache
npx react-native run-android
We use Angular in a nx monorepo in which we have been using Capacitor 2.4 for half a year now. We only use the android platform as of now. Now, we need to upgrade to Capacitor 3.0. The app itself is running again, however, as soon as I use any Plugin I always get the following exception: ERROR Error: "Device" plugin is not implemented on android
This is the same for every Plugin I have tried to use. So, if I would use the Storage Plugin I would get the same exception only for "Storage". I have followed the Capacitor migration guide (https://capacitorjs.com/docs/v3/updating/3-0) in detail, but I can't figure out where I went wrong. In general, the app works now, as long as I have any code that uses a Capacitor Plugin commented out. The code using the Plugins did work before the upgrade.
As according to the migration guide, I added import '#capacitor/core'; at the main.ts file, although I also tried putting it in the app.module.ts but had no success there either. I have installed every plugin for the whole app (the root) and for the nx-capacitor app (the capacitor app added with #nxtend-capacitor) as suggested here https://nxtend.dev/docs/capacitor/getting-started/. I also have updated the capacitor cli, the capacitor core and the capacitor android version for both package.json files.
Furthermore, according to the android upgrading guide, I have also updated gradle and the android gradle plugin. I have also updated the Android variables accordingly.
I honestly do not have too much experience or in-depth knowledge of Capacitor and I am aware that Capacitor 3 is still in Beta as of this point. However, maybe someone has already stumbled upon this problem and found a solution. I am also not sure, if this problem could somehow be caused by using this monorepo approach with nx. Has someone had experience in upgrading Capacitor to 3.0 while using a Nx monorepo?
For reference, this is the current package.json for the capacitor app:
{
"name": "app-cap",
"dependencies": {
"#capacitor-community/electron": "^1.3.2",
"#capacitor/android": "^3.0.0-rc.0",
"#capacitor/app": "^0.3.6",
"#capacitor/camera": "^0.4.3",
"#capacitor/cli": "^3.0.0-rc.0",
"#capacitor/core": "^3.0.0-rc.0",
"#capacitor/device": "^0.5.6",
"#capacitor/filesystem": "^0.5.2",
"#capacitor/ios": "^3.0.0-rc.0",
"#capacitor/local-notifications": "^0.6.0",
"#capacitor/push-notifications": "^0.3.6",
"#capacitor/storage": "^0.3.6",
"capacitor-secure-storage-plugin": "^0.5.0",
"com-darryncampbell-cordova-plugin-intent": "^2.0.0",
"com.darktalker.cordova.screenshot": "^0.1.6",
"cordova-plugin-advanced-http": "^3.1.0",
"cordova-plugin-app-launcher": "^0.4.0",
"cordova-plugin-appcenter-analytics": "^0.5.1",
"cordova-plugin-appcenter-crashes": "^0.5.1",
"cordova-plugin-appcenter-shared": "^0.5.1",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-file-opener2": "^3.0.5",
"cordova-plugin-zip": "^3.1.0",
"jetifier": "^1.6.6"
}
}
Both answers are wrong.
Capacitor 3 allows android plugins to auto register, but for that you need to remove the init method from MainActivity.java, if it's there the automatic registration won't work as init is the legacy way of registering plugins.
So you have two options:
Remove the init method from MainActivity.java as explained on the capacitor 3 updating docs
Keep the legacy init method and add plugins as you did on Capacitor 2. I.E. add(DatepickPlugin.class);
By removing android folder as answer 1 suggests, the init method gets removed and that's why that answer works, but it's destructive, it will remove all your manual changes in your projects.
And adding plugins as answer 2 suggests also works, but there is no need for doing that if using automatic plugin registration, that method is really there for non npm plugins.
Try removing android platform
(IMPORTANT: backup your android directory before removing.)
and run:
npm install #capacitor/core#next #capacitor/cli#next
npx cap init
npm install #capacitor/android#next
npx cap add android
then build your project and:
npx cap sync
I had the same problem
You need to add the plugins manually in your MainActivity.java
public class MainActivity extends BridgeActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// --- Remove bridge init as it's deprecated and add these lines
registerPlugin(com.capacitorjs.plugins.app.AppPlugin.class);
registerPlugin(com.capacitorjs.plugins.device.DevicePlugin.class);
// ---
}
}
When using live reload, make sure you have http:// in url.
As per documentation:
"server": {
"url": "http://192.168.1.68:8100",
"cleartext": true
},
When I used just ip, it rendered site, but plugins did not work (not implemented exception).
As per doc, you just need to update MainActivity.java file
https://capacitorjs.com/docs/updating/3-0
In my case, i just need to update my MainActivity.java
import com.getcapacitor.BridgeActivity;
public class MainActivity extends BridgeActivity {}
Using nxtend plugin I found that I also had to add the plugin package name to "includePlugins": [] in capacitor.config in order for sync to identify the needed plugins and populate the downstream gradle files in the android project. From what I understand cap is supposed to inspect the project package.json and automatically determine what plugins are used but this doesn't seem to be working for me.
I'm currently using Nx Monorepo with NxExt and Capacitor 4.0.
I solved the import problem by adding in the package.json of the mobile app (apps/mobile-app/package.json) the relative plugins required:
{
"name": "mobile-ionic-app",
"dependencies": {
"#capacitor/device": "^4.0.1"
},
"devDependencies": {
"#capacitor/android": "^4.2.0",
"#capacitor/cli": "^4.2.0",
"#capacitor/core": "^4.2.0"
}
}
In this way Capacitory can synchronize the plugins in the build phase:
Android Capacitor Build
This is because Capacitor changes the underlying Gradle files but Android Studio doesn't know about it
.
to fix this, go to Android studio click File -> Sync Project with Gradle Files
When I transitioned to Expo's Managed Workflow (SDK 37 and now 38 as well), in-app update checking broke.
My code:
import * as Updates from 'expo-updates';
async checkForUpdate() {
const update = await Updates.checkForUpdateAsync();
if (update.isAvailable) {
this.updateApp();
}
}
async updateApp() {
await Updates.fetchUpdateAsync();
Updates.reloadAsync();
}
Logcat shows me that the checkForUpdateAsync() promise is being rejected with this message:
Error: The method or property Updates.checkForUpdateAsync is not available on android, are you sure you’ve linked all the native dependencies properly?
For the record I did install it via expo install expo-updates
Thanks.
I solved this by creating a new Expo project and looking for differences from my many-times-upgraded one. I found two:
I was using off-the-shelf React Native instead of the Expo build, so I changed the dependency in package.json to "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.1.tar.gz"
I also updated my expo version to ^38.0.8, as used by the new project.
Finally, I also deleted some build relics that I had generated during the way, but I think the fix came from one of the steps above.
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!
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