Capacitor has never allowed to build signed APKs from the CLI.
If the Build → Generate Signed Bundle / APK is greyed out, there is probably something wrong with your project, try clicking the “Sync Project with Gradle Files” (elephant icon)
↧
Building Android App with Capacitor 3
↧
How to show a popover while retaining focus?
Glad it works! We are looking into ways to give developers better control over the focus behavior with overlays, so this context is really helpful.
↧
↧
Taking a picture using the ionic-native camera plugin sometime makes the app restart
VERSIONS:
Ionic CLI (ionic -v): 6.12.1
cordova (cordova -v): 9.0.0
@ionic/angular: 5.2.3
@ionic-native/camera: 5.27.0
cordova-android: 8.1.0
Problem
I have an Ionic app which uses the ionic-native camera plugin. 99% of the time I take a picture with that plugin, everything works as intended and I get an bas64 string back from the camera. However, sometimes when confirming the photo in the camera app (when it should return to my app), it restarts my app.
I’ve tried using the cordova-plugin-background-mode plugin to enable the backgroundMode just before starting the camera, but this doesn’t change the outcome (this makes it “worse” because now the app doesn’t restart, but is just killed).
I’ve checked if it’s a memory issue, but it also happens on devices that have more than enough memory (8gb, more than 3gb free)
Code example
// Camera options
this.defaultCameraOptions = {
quality: 80,
destinationType: DestinationType.DATA_URL,
encodingType: EncodingType.JPEG,
mediaType: MediaType.PICTURE,
targetHeight: 1000,
targetWidth: 1000,
correctOrientation: true,
saveToPhotoAlbum: false,
cameraDirection: 0,
sourceType: PictureSourceType.CAMERA
};
const cameraResult: string = await this.camera.getPicture(this.defaultCameraOptions);
let resultBase64: string = '';
if (cameraResult) {
resultBase64 = 'data:image/jpeg;base64,' + cameraResult;
}
console.log(resultBase64);
Debug logs:
Using logcat I got the following logs:
PluginManager: THREAD WARNING: exec() call to Camera.takePicture blocked the main thread for 40ms. Plugin should use CordovaInterface.getThreadPool().
CordovaActivity: Paused the activity.
CordovaActivity: Stopped the activity.
Process : Sending signal. PID: 29900 SIG: 9
Zygote : Process 29900 exited due to signal 9 (Killed)
ActivityManager: Process <package.id> (pid 29900) has died: fore TOP
libprocessgroup: Successfully killed process cgroup uid 10175 pid 29900 in 0ms
↧
Building Android App with Capacitor 3
Sorry, my original post wasn’t more clear.
I had recently updated my project from Cordova to Capacitor 3, so I was unaware that with Capacitor you were required to use the IDE to compile now for Android.
This is what I was previously seeing when loading the app in Android Studio:
I updated my Android Studio to 2020.3.1 (Arctic Fox) and I know have the ability to build the app.
↧
How to create bottom-sticking buttons idiomatically?
have you tried using IonFooter? and removing the padding and margin around the buttons?
↧
↧
How to create bottom-sticking buttons idiomatically?
D’oh! Thank you–but I assume that can’t be used if I have bottom tab nav, or can it? I will try. My use case is modal, so footer should work fine.
↧
beforeRouteEnter next(vm => ()) callback not firing
This should be fixed in Ionic Vue v5.6.15: fix(vue): router guards are now fired correctly when written in a com… · ionic-team/ionic-framework@3c44222 · GitHub
↧
Apple store publish app Understanding ITMS-90809: UIWebView API Deprecation
I’m getting the exact same email. I’ve updated all the plugins as per my knowledge.
Below i’ve attached a screenshot of my package.json and my search results for ‘UIWebView’ in /platforms/ios.
Requesting you to kindly review this code as well, since I’ve been stuck here for over a month.
Thank you in advance.
↧
beforeRouteUpdate not fired when indirectly loading same route?
This should be fixed in Ionic Vue v5.6.15: fix(vue): router guards are now fired correctly when written in a com… · ionic-team/ionic-framework@3c44222 · GitHub
↧
↧
Avoid page transitions only for specific routes
In Ionic Vue v5, the best way to do this is to use :router-link="/myroute" and then set router-direction="none" on your button. Doing this will disable any page transition.
In Ionic Vue v6, we are introducing a new API that will let you do programmatic navigation while also controlling the animation: Vue Navigation | Ionic Documentation
↧
Installing the LESS CSS Preprocessor
Took a look at what the packages that are installed with vue-cli by default it you pick sass, and it looks like this will be the right packages.
npm i sass sass-loader@8
But I’d suggest trying regular CSS if you can. A few less deps you need to worry about plus modern CSS replaces almost all the needs of sass.
↧
Network error when axios call has parameters on IOS
- Are you testing on an iOS beta release?
- Are you making a request to an HTTPS endpoint?
↧
Ionic Payments - NFC - Tap to Pay
Does the newly supported Ionic Payments API allow for integration with native NFC functionality in order to allow for Tap to Pay payments when presenting devices to a payment terminal?
↧
↧
Ionic + angular PWA freezes sometime and won't be able to navigate through pages
l have an ionic app and on browser, it works fine, but once l install the PWA on the mobile home screen, l can watch at least 2 videos over a media player then after finishing a quiz the app tabs freeze, and l won’t be able to navigate to any page.
Please check the following link with the video demonstrating the behavior.
and for the code the tabs
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomePage } from './home.page';
const routes: Routes = [
{
path: 'home',
component: HomePage,
children: [
{
path: 'homepage',
loadChildren: () => import('../pages/homepage/homepage.module').then(
m => m.HomepagePageModule
)
},
{
path: 'search',
loadChildren: () => import('../pages/search/search.module').then(
m => m.SearchPageModule
)
},
{
path: 'leaderboard',
loadChildren: () => import('../pages/leaderboard/leaderboard.module').then(
m => m.LeaderboardPageModule
)
},
{
path: 'account',
loadChildren: () => import('../pages/account/account.module').then(
m => m.AccountPageModule
)
},
{
path: 'redeem',
loadChildren: () => import('../pages/redeem/redeem.module').then(
m => m.RedeemPageModule
)
},
{
path: 'watch/:id',
loadChildren: () => import('../pages/watch/watch.module').then(
m => m.WatchPageModule
)
},
{
path: 'campaign/:id',
loadChildren: () => import('../pages/campaign/campaign.module').then(
m => m.CampaignPageModule
)
},
{
path: 'quiz/:n/:id',
loadChildren: () => import('../pages/quiz/quiz.module').then(
m => m.QuizPageModule
)
},
{
path: 'course/:name',
loadChildren: () => import('../pages/course/course.module').then(
m => m.CoursePageModule
)
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
<ion-tab-button tab="leaderboard">
<ion-icon name="grid"></ion-icon>
<ion-label>Leaderboard</ion-label>
</ion-tab-button>
<ion-tab-button tab="redeem">
<ion-icon name="basket-outline"></ion-icon>
<ion-label>Redeem</ion-label>
</ion-tab-button>
<ion-tab-button tab="account">
<img src="./assets/face28.jpg" alt="pic">
<ion-label>Account</ion-label>
</ion-tab-button>
l face no console errors by the way
↧
Finding the IP address of a device (with name or MAC adress)
Hello,
No, still no solution
↧
Events SDK facebook Ionic /4
How can I activate the events of the facebook SDK in Ionic4 to track the campaigns in my app?
↧
Swipe Back Nav Flicker (iOS PWA)
There are 2 issues I can see in the video provided:
-
There is jank when the page shown in the video is entering. I am assuming you are performing some work in
ionViewWillEnterthat causes your template to re-render. This triggers a bug in WebKit. The good news is that the issue was fixed by Apple and should be released in an upcoming version of iOS. The workaround for now is to move the logic toionViewDidEnter(or avoid it altogether). -
Swiping back appears to happen twice. What’s happening here is you are triggering the swipe to go back gesture that is built into Safari in addition to the swipe to go back gesture that is built into Ionic. The end result is you “swipe to go back” using the Safari gesture, and then Ionic’s gesture kicks in which results in a visible flicker. There is an open issue here: bug: ios, cannot disable Safari swipe to go back when running as PWA · Issue #22299 · ionic-team/ionic-framework · GitHub. While this is not a bug in Ionic, there is no good workaround at the moment other than disabling Ionic’s swipe to go back gesture. We have proposed an addition to the CSS
pointer-eventsAPI to help account for this, but there has not been any movement on that front yet.
↧
↧
Keyboard not hide (Ionic v5 - Angular v11 - Capacitor v2)
Good evening, I have been trying and trying again for days but I cannot in any way make the keyboard disappear or remove the focus from the ion-serch-bar.
This is my system information
Ionic:
Ionic CLI : 6.16.3 (/Users/gosumania/.nvm/versions/node/v14.11.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.6.3
@angular-devkit/build-angular : 0.1102.14
@angular-devkit/schematics : 11.2.6
@angular/cli : 11.2.6
@ionic/angular-toolkit : 2.3.3
Capacitor:
Capacitor CLI : 2.4.7
@capacitor/android : 2.4.2
@capacitor/core : 2.4.7
@capacitor/ios : 2.4.9
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : 0.15.3
native-run (update available: 1.4.0) : 1.3.0
System:
ios-deploy : 1.11.3
ios-sim : 8.0.2
NodeJS : v14.11.0 (/Users/gosumania/.nvm/versions/node/v14.11.0/bin/node)
npm : 7.8.0
OS : macOS Big Sur
Xcode : Xcode 12.5.1 Build version 12E507
This is the code I use:
import { Keyboard } from '@ionic-native/keyboard/ngx';
constructor(private keyboard: Keyboard){}
closeKeyboard() {
this.keyboard.hide()
}
I try on IOS device and on Android device.
On Xcode i have di warn :
[warn] - Native: tried calling Keyboard.hide, but the Keyboard plugin is not installed.
[warn] - Install the Keyboard plugin: 'ionic cordova plugin add cordova-plugin-ionic-keyboard’
I cannot upgrade to Capacitor 3.0 because I have too many errors if I try to do so.
↧
Components from different route paths loads in every route enter
Hi, I just started my project with Ionic Vue and I love it, however I have a problem I don’t understand completely. Maybe I don’t know some mechanisms or I screwed up something.
Let’s say I’ve got home page (/home) and some elements with router-link, which push the application to another page. Every page is a separate component. When I go from /home to /products, the products component automatically loads products using axios (when created). I go back to home and I click element which change route to /settings. The new components loads, but the component that I just visited is also loading, even though I can’t see it. I know it, because I see axios request from products component and I started login every lifecycles of every component to the console. I wonder where it comes from, why the components, that I don’t use at the moment loads with another components…Of Course i will share my code, but maybe you faced similar problems?
↧
Components from different route paths loads in every route enter
example:
router:
const routes = [
{
path: '/settings',
name: 'Settings',
component: () => import('../pages/SettingsPage.vue')
},
{
path: '/empty',
name: 'empty',
component: () => import('../pages/EmptyPage.vue')
}
]
empty:
<template>
<base-layout back-link="/home">
<ion-list>
<ion-item lines="full">
<ion-icon size="large" slot="start"></ion-icon>
<ion-label>Dark Mode</ion-label>
<ion-toggle slot="end"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Tryb pobierania zdjęć</ion-label>
<ion-select placeholder="Select" ok-text="OK" cancel-text="Cancel">
<ion-select-option value="3">Mode 3</ion-select-option>
<ion-select-option value="2">Mode 2</ion-select-option>
<ion-select-option value="1">Mode 1</ion-select-option>
<ion-select-option value="0">Mode 0</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</base-layout>
</template>
<script>
import {
IonToggle,
IonLabel,
IonItem,
IonList,
IonSelect,
IonSelectOption,
IonIcon,
} from '@ionic/vue';
export default {
components: {
IonToggle,
IonLabel,
IonItem,
IonList,
IonSelect,
IonSelectOption,
IonIcon,
},
created() {
console.log("Empty created")
},
mounted() {
console.log("Empty mounted")
},
updated(){
console.log("Empty updated")
},
beforeUpdate(){
console.log("Empty beforeUpdate")
},
beforeUnmount(){
console.log("Empty Destroyed")
}
}
</script>
settings:
<template>
<base-layout page-title="Ustawienia" back-link="/home">
<ion-list>
<ion-item lines="full">
<ion-icon size="large" slot="start" :icon="moonOutline"></ion-icon>
<ion-label>Tryb ciemny</ion-label>
<ion-toggle slot="end" @ionChange="switchTheme($event)" :checked="darkMode"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Tryb pobierania zdjęć</ion-label>
<ion-select @ionChange="switchImgMode($event)" placeholder="Wybierz" :value="imageDownloadMode" ok-text="OK" cancel-text="Anuluj">
<ion-select-option value="3">Wszystkie</ion-select-option>
<ion-select-option value="2">Tylko jedno</ion-select-option>
<ion-select-option value="1">Tylko miniaturka</ion-select-option>
<ion-select-option value="0">Wyłączone</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</base-layout>
</template>
<script>
import {
IonToggle,
IonLabel,
IonItem,
IonList,
IonSelect,
IonSelectOption,
IonIcon,
} from '@ionic/vue';
import { moonOutline } from 'ionicons/icons';
export default {
components: {
IonToggle,
IonLabel,
IonItem,
IonList,
IonSelect,
IonSelectOption,
IonIcon,
},
data() {
return {
moonOutline
};
},
methods: {
switchTheme(event) {
if (event.detail.checked) {
document.body.setAttribute('color-theme', 'dark');
this.$store.dispatch('config/setDarkMode', { darkMode: true, db: this.$db });
} else {
document.body.setAttribute('color-theme', 'light');
this.$store.dispatch('config/setDarkMode', { darkMode: false, db: this.$db });
}
},
switchImgMode(event) {
this.$store.dispatch('config/setImageDownloadMode', { imgDwnMode: event.detail.value, db: this.$db });
},
},
computed:{
darkMode(){
return this.$store.getters['config/darkMode'];
},
imageDownloadMode(){
return this.$store.getters['config/imageDownloadMode'].toString();
}
},
created() {
console.log("Settings created")
},
mounted() {
console.log("Settings mounted")
},
updated(){
console.log("Settings updated")
},
beforeUpdate(){
console.log("Settings beforeUpdate")
},
beforeUnmount(){
console.log("Settings Destroyed")
}
};
</script>
fragment of Home
<ion-card router-link="/empty">
<ion-icon :icon="cloudOutline"></ion-icon>
<h2>Online</h2>
<ion-ripple-effect />
</ion-card>
// and so on
Now see console:
Why I have Empty created and Empty mounted in /settings path?
↧