I created a simple app with possibility to select photo from mobile phone using #ionic-native/photo-library. Now I want to debug it, print some console logs and check if photo is loaded properly:
private selectPhoto() {
this.photoLibrary.requestAuthorization().then(() => {
this.photoLibrary.getLibrary().subscribe({
next: library => {
library.forEach((libraryItem) => {
console.log(libraryItem) // i want to print it
})
},
error: err => {},
complete: () => { console.log('could not get photos'); }
})
})
.catch(err => console.log(err));
}
Unfortunatelly, I receive an error:
Native: tried calling PhotoLibrary.requestAuthorization, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
I read that native plugins must be tested on device but how to get output from code in my console? When I install apk I do not have any debug information.
Regards
The error means that the plugin won't properly work unless cordova.js is already loaded. This happens because cordova.js is the one responsible for loading your plugins, so if you are calling any of it before cordova is ready it just won't work.
You should use either:
document.addEventListener('deviceready', DeviceReady, false);
function DeviceReady() {
//your plugin code here...
}
or
$ionicPlatform.ready(function() {
//your plugin code here...
});
To properly debug an Android/iOS build with the help of a browser console (chrome/safari) make sure that you're building a debug apk/ipa with the option --debug at the CLI:
$ionic build android/ios --debug
I hope this may help you out =)
Related
I am trying to get current country of device in but didn't find anything. Is there something to do so in React Native?
I tried using react-native-device-info but it is also not supporting but in previous version it can be get by getDeviceCountry(). Now for the latest version it is showing error:
TypeError: _reactNativeDeviceInfo.default.getDeviceCountry is not a
function. (In '_reactNativeDeviceInfo.default.getDeviceCountry()',
'_reactNativeDeviceInfo.default.getDeviceCountry' is undefined)
According to the documentation of react-native-device-info for latest version, they have moved some of their apis to react-native-localize to reduce duplication in the react-native-community modules. react-native-localize worked perfectly for me.
Setup:
$ npm install --save react-native-localize
# --- or ---
$ yarn add react-native-localize
Usage:
import * as RNLocalize from "react-native-localize";
console.log(RNLocalize.getLocales());
console.log(RNLocalize.getCurrencies());
console.log(RNLocalize.getCountry());
console.log(RNLocalize.getCalendar());
console.log(RNLocalize.getTemperatureUnit());
console.log(RNLocalize.getTimeZone());
console.log(RNLocalize.uses24HourClock());
and many more. For detailed description please visit their official documentation by the given link: react-native-localize
Its solved my problem;
BREAKING CHANGE: remove is24Hour, getTimezone, isAutoTimeZone and isAutoDateAndTime, getDeviceLocale, getDeviceCountry, getPreferredLocales
This was the result of a survey. It removes API duplication in the react-native-community modules
Related PR: https://github.com/react-native-community/react-native-localize/pull/65
Use yarn add
https://github.com/mikehardy/react-native-localize.git#e062f0d2dc3171dc18fdb7b7139d347ad03933dc to maintain
isAutoTimeZone + isAutoDateAndTime until merged
The accepted answer didn't work for me, maybe due to https://github.com/zoontek/react-native-localize/issues/81.
However, Expo has something from its ecosystem, which worked out perfectly:
expo install expo-localization
import { getLocales } from 'expo-localization';
console.log(getLocales()[0].regionCode);
Edit: docs here https://docs.expo.io/versions/latest/sdk/localization/#localizationregion
Looks like it's a bug in the React Native. Please check their Troubleshooting section
Here is what they advice:
Seems to be a bug caused by react-native link. You can manually delete
libRNDeviceInfo-tvOS.a in Xcode -> [Your iOS build target] -> Build
Phrases -> Link Binary with Libraries.
Please use this package to get device country . to has different type of configs.
react-native-device-country
Some Examples
import DeviceCountry, {
TYPE_ANY,
TYPE_TELEPHONY,
TYPE_CONFIGURATION,
} from 'react-native-device-country';
DeviceCountry.getCountryCode()
.then((result) => {
console.log(result);
// {"code": "BY", "type": "telephony"}
})
.catch((e) => {
console.log(e);
});
DeviceCountry.getCountryCode(TYPE_TELEPHONY)
.then((result) => {
console.log(result);
// {"code": "BY", "type": "telephony"}
})
.catch((e) => {
console.log(e);
});
DeviceCountry.getCountryCode(TYPE_CONFIGURATION)
.then((result) => {
console.log(result);
// {"code": "BY", "type": "config"}
})
.catch((e) => {
console.log(e);
});
i'm trying to implement Code-Push from AppCenter into my Ionic v4 App. (ref)
I'm stuck on the following Problem: I can update the App, but when i close the App after that and open again it is the old Version again and it says:
Updade ignored, because it was rollbacked
So somehow the update is rolled back after i close the App. After searching for this problem i found that i have to run
this.codePush.notifyApplicationReady()
on application start. I added this to my code, but it doesn't work either. If i run the Application on a Android Emulator and open the Logs, AFTER the Update it says:
cordova_not_available
So it makes sense that the notifyApplicationReady doesn't work, but why is cordova unavailable?
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.codePush.notifyApplicationReady().then(value => {
console.log(value);
});
this.codePush.sync({
deploymentKey: 'MY_KEY',
installMode: InstallMode.IMMEDIATE
}).subscribe(status => {
console.log(status);
});
this.splashScreen.hide();
});
}
Do u use command ionic build --prod ? this conmand will not include cordova.js,so if app installed this package the cordova will not available, in ionic4 i use ionic cordova build android --prod to include the cordova.js and then release the www file to code push serve.it wokrs!
I have a problem with Ionic storage in my Ionic App for Windows (UWP app). I already tested and deployed my app for Android without any trouble.
Now I would like to generate an UWP app.
The app I’m developing is a workshop’s dashboard. The indicators change every day and I need to save them from one day to another. To do this I usethe storage module of Ionic.
When launching the command
$ionic serve
the app responds exactly as it should in the web browser (Firefox). From one launch to another my data are still there.
When I use
$ionic cordova run windows
the installation and launch steps of my app work fine. Every function of my app runs fine, but the call to storage (get and set) doesn’t work : when I close, and then reopen it as an autonomous application, I loose all data every time. It is the same when I run the app from Visual Studio.
Moreover, I write some console.log in the result of the promise and none of them is written in the Javascript console. It is like Windows does not recognize the command.
I tried with Visual Studio 2015 Update 3 and Visual Studio 2017, the result is identical. I followed the recommendation of Ionic Doc and add the target platform windows10 in the config.xml.
Does anyone have an idea of what I’m doing wrong ? Is there an incompatibility between Windows and Ionic ?
Thanks for any help.
Config :
Windows 10 64-bits
Ionic CLI: 3.19.1
Cordova CLI : 8.0.0
Node : v6.11.2
Visual Studio Community 2017 (15.5.27130.2036)
Extract of my code maPage.ts :
import { Storage } from '#ionic/storage';
export class maPage {
constructor(public storage: Storage) {
this.downloadData();
}
ionViewWillLeave()
{
this.saveData();
}
TabData = {
id: 0,
label: '',
Tab1: [],
Tab2: [],
attri1 : 0,
attri2: false
}
Param = {
Objet1: {NbObj1: 7},
Objet2: {NbObj2: 5}
}
saveData()
{
var Data: object;
Data =
{
TData: this.TabData,
TParam: this.Param
}
this.storage.set('Data', Data).then(_=> {
console.log('Backup done!');
}, error => {
console.log('erreur : ', JSON.stringify(error))
});
}
downloadData()
{
this.storage.ready().then(()=>{
console.log('storage ready');
this.storage.get('Data').then((val) => {
this.TabData = val.TData;
this.Param = val.TParam;
console.log('Récupération terminée !');
}).catch(erreur => {
console.log('La variable Data est vide ou n\'existe pas!');
console.log('erreur : ', JSON.stringify(erreur));
}).catch(err => {
console.log('storage not ready');
console.log('err : ', JSON.stringify(err));
});
}
}
On Windows platform, console.log is not supported. To do that, you should install cordova-plugin-console, or need to use alert function.
Regarding storage, I am suggesting you could use localstorage or cordova-sqlite-storage.
I am new to Ionic 2 and everything around. I'm tryng to setup my first mobile app: touching a button I would open native navigation (Google Maps for Android, for instance). I've installed launchnavigator plugin:
ionic plugin add uk.co.workingedge.phonegap.plugin.launchnavigator
and inside cremony.ts page:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LaunchNavigator, LaunchNavigatorOptions } from 'ionic-native';
#Component({
selector: 'page-ceremony',
templateUrl: 'ceremony.html'
})
export class Ceremony {
constructor(public navCtrl: NavController) {
}
navigate() {
let options: LaunchNavigatorOptions = {
start: ""
};
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
}
}
make a build npm run buildand upload it to IonicView with ionic upload.
I've do everything like suggested in this link but with different luck.
But when I click the button (a simple <button ion-button (click)="navigate()">Navigate</button> in the ceremony.html) in the Ionic View an error say: Error launghing navigator: plugin_not_installed.
I inspected the project, the plugins directory contains uk.co.workingedge.phonegap.plugin.launchnavigatorlooks directory. So I look at package.json and config.xml and I've added the value uk.co.workingedge.phonegap.plugin.launchnavigator in the cordovaPlugins
and tag <plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" spec="~3.2.1" /> in the widget root. npm run build, ionic upload but nothing changed.
Where is my error?
New answer, there is something wrong with your project. Have you modified your index.html file? Is it still including cordova.js? If so what version of Ionic and Cordova are you using?
I made this sample application with your exact code and it works perfectly on both iOS and ANdroid: https://github.com/roblouie/navigator-plugin-test
Did a screen recording on iOS: https://giphy.com/gifs/xTiN0EEQV82aIXWnQI
Just grabbed an image on Android, but it works the same:
Please try the project from github.
Cordova plugins need to be called only once platform is ready.
constructor(public navCtrl: NavController,public platform:Platform) {//inject in constructor
}
In your function navigate()
this.platform.ready().then(()=>{
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
});
The reason for your error is that you are using Ionic View. Your Ionic app is just html, css, and javascript. However, any plugins you use are written in Java for Android and Objective C for iOS. That plugin source code is then compiled into your app for each platform.
With Ionic View, it only uploads your app, the html, css, and javascript. Nothing is compiled. Ionic View is the app itself, and it loads your code. So no plugins you have are included. Ionic View itself does have some plugins installed on it, and you can see that list here: https://docs.ionic.io/tools/view/#supported-plugins
Unfortunately you will not be able to test any plugin not in that list without building and deploying to a device or emulator.
I have a Meteor(v1.0.3.1) app and installed AdMob Cordova plugin like this:
meteor add cordova:com.google.cordova.admob#https://github.com/floatinghotpot/cordova-admob-pro/tarball/94a31660d1bb35337e3430e2608b7710ea4d882a
with the following code as the doc suggests:
if(Meteor.isCordova){
admobid = {
banner: 'ca-app-pub-xxxxxxxxxxxxxxxxxxx'
};
if(AdMob){
AdMob.createBanner( {
adId: admobid.banner,
position: AdMob.AD_POSITION.BOTTOM_CENTER,
autoShow: true
});
}
}
And started the app with meteor run android-device with my Android phone plugged in.
The following error appears in the stack trace:
Uncaught ReferenceError: AdMob is not defined
I looked for AdMob object on window and other places but couldn't find it.
I can confirm that the plugin you are using is working. But you should probably not use the tarball. Use the current version (2.7.4) instead.
Try this. This worked for me using the iOS simulator.
Remove the plugin you installed with meteor remove
Install with version number
meteor add cordova:com.google.cordova.admob#2.7.4
Run the simluator (use the Android one, if you do not have Xcode )
meteor run ios
Then the AdMob variable should be available. At least it was when I tried it.
Update
The plugin also works with Android.
`meteor run android`
Also, make sure that your code is in Meteor.startup(), to ensure that the Cordova plugin is available.
Meteor.startup(function () {
if (Meteor.isCordova) {
if (AdMob) {
AdMob.createBanner( {
adId: 'ca-app-pub-3080070244198226/2109901818',
position: AdMob.AD_POSITION.BOTTOM_CENTER,
isTesting: true,
autoShow: true,
success: function() {
console.log("Received ad");
},
error: function() {
console.log("No ad received");
}
});
} else {
console.log("No Admob");
}
} else {
console.log("No Cordova ");
}
}
I would suggest you to try with this other plugin:
meteor add cordova:com.admob.google#https://github.com/appfeel/admob-google-cordova/tarball/f3851132148aae4c600563d4124cc875c8c5f73e
Then in your code:
if(Meteor.isCordova){
if(admob){
admob.createBannerView({publisherId: "ca-app-pub-xxxxxxxxxxxxxxxxxxx"});
}
}
Meteor had a security upgrade v1.0.4. You need to add the regex for the website to your mobile config file to get the google sdk. Otherwise if you dont you will see the whitelist error in x-code's logs.
I used this to get the sdk.
App.accessRule('*://googleads.g.doubleclick.net');
reference from meteor telling you about the upgrade.
https://www.meteor.com/blog/2015/03/17/meteor-104-mongo-cordova-template-subscriptions