I am having trouble with react native firebase phone auth. When I run the function then the app redirects to reCaptcha but then the screen remains black and reCaptcha does not appear. It was working fine at first but when I changed the project director it broke. The weirdest part is that there is no error the app just freezes and/or crashes after being frozen for some time.
I reinstalled node_modules. Also, I generated a new sha1 code and tried running it on another computer to see if sha1 may be the cause. I tried creating a completely new react-native project but still no change.
Packages:
"#react-native-firebase/app": "^10.0.0", // also tried older
"#react-native-firebase/auth": "^10.0.0", // also tried older
"react": "16.13.1",
"react-native": "0.63.3"
My sign in function:
const loginWithPhoneNumber = async () => {
const confirmation = await auth().signInWithPhoneNumber(firebaseTestPhonenumber);
};
Add this to your app/build.gradle file dependencies:
implementation 'androidx.browser:browser:1.2.0'
The issue is related to a major update in Firebase. This issue was discussed here
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
I feel like I have tried every possible combination of ways to report a crash on the firebase crashlytics console for the android side of my react-native application.
I have followed the rnfirebase setup instructions and triple checked that everything is where it should be: https://rnfirebase.io/crashlytics/android-setup
I have read in several forums that the app needs to be run in 'release' mode for the crash to be reported and then the app must be closed and opened once again for the report to be sent, I have done this multiple times:
firstly i've tried:
./gradlew installRelease
secondly I tried a method recommended in a github issue forum:
./gradlew assembleRelease
adb install ./app/build/outputs/apk/release/app-release.apk
both methods ran on my emulator and I was able to use the crashlytics().crash() method to cause a crash, alas nothing appears in the console.
I have also added this into a firebase.json file in the root of my project like the docs explain:
{
"react-native": {
"crashlytics_debug_enabled": true
}
}
any help is greatly appreciated as I really don't know where the issue lies.
PS. I have registered my app with the FB console and enabled crashlytics
in firebase.json
{
"react-native": {
"crashlytics_disable_auto_disabler": true,
"crashlytics_debug_enabled": true
}
}
make sure that crashanalytics sdk is installed/initialised
follow: https://rnfirebase.io/crashlytics/android-setup
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 have 2 days of react-native experience and just learned how to build & install app to real device. I signed up apk with key.
executing of:
react-native run-android
works fine on real device, i even can't see any errors in remote debugger
but launching
gradlew installRelease // or
gradlew assembleRelease // plus manually installation
== Unfortunately, App has stopped.
P.S. i can't share code, because it's under NDA, but i use only
redux, react-native-router-flux
and have only 2 simple pages
UP
after launching installation commit after commit starting from empty project, i have found, commit that breaks app on release on device:
i added .babelrc:
"presets": [
"es2015",
"stage-0",
"react-native"
]
}
installed new packages for tests:
"babel-core": "6.11.4",
"babel-loader": "6.2.4",
"babel-preset-es2015": "6.9.0",
"babel-preset-react-native": "1.9.0",
"babel-preset-stage-0": "6.5.0",
"chai": "3.5.0",
"enzyme": "2.4.1",
"eslint-plugin-react": "5.2.2",
"mocha": "2.5.3",
"mockery": "1.7.0",
"react-addons-test-utils": "15.2.1",
"react-dom": "15.2.1",
"react-native-mock": "0.2.5"
After removing
"es2015", "stage-0" from .babelrc app started work on real device also. It would be good to understand why :)