Hi! I’m creating app and use Wordpress as backend. I’m using ionic capacitor and publish in App Store got rejected because my app just loading without loading post or perform nothing. But when I tested on simulator running external local host working well. I don’t know how to fix it? Can anyone know how to fix my problem? Or I wonder capacitor is not yet support native project?
1 post - 1 participant
Hi, I am having trouble getting the correct CSS for my app.
I Currently have 2 cards at the top of an image. The purpose of my app is to use the native screenshot plugin to take a screenshot of the two cards just above the image. As close as possible to this designed in Android (I am trying to move from Android to Ionic):
Here is what I have currently produced in Ionic:
I would like to align the 2 cards at the top of the screen with no padding then the image right below so. Here is my HTML code:
<ion-content>
<ion-grid>
<ion-row>
<ion-col>
<ion-card>
<ion-card-header>
<ion-card-title>{{this.RetDataType}}</ion-card-title>
<ion-card-subtitle>{{this.RetRefNum}}</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-header>
<ion-card-title>Image Number</ion-card-title>
<ion-card-subtitle>{{this.RetImageNum}}</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
<ion-img [src]="RetTakenImage"></ion-img>
<ion-button (click)="TakeScreenshot()">Screenshot</ion-button>
</ion-content>
I have no CSS added yet as i had tried removing padding etc but cant get them how i want them. Any help would be greatly appreciated!
Thanks
2 posts - 2 participants
Hello,
So I’m using a plugin to create a bluetooth peripheral device. If I repeat a certain pattern of actions, the plugin bugs and it will only work if I restart the app. Is there any way that I can reload the plugin or reset the state during app time ?
Thanks in advance!
1 post - 1 participant
I’m using Stencil JS as UI web components for the project I work for (Vue). Besides the challenges, Stencil is handling well.
I build Stencil and import it as npm package. Basically this https://stenciljs.com/docs/vue
But I’m facing a special situation here: every time I decide to use 3rd party typings.
Example:
Swiper still doesn’t have built-in typings, so I need to install @types/swiper as devDependency
import Swiper, { SwiperOptions } from 'swiper';
// SwiperOptions is just a interface declaration
// [...]
export interface ScrollerBreakpointsConfig extends SwiperOptions {
[index: number]: SwiperOptions;
}
@Component({
// [...]
})
export class ExampleComponent {
// [...]
@Prop() breakpoints: Maybe<ScrollerBreakpointsConfig[]> = null;
// [...]
}
So when I build the project, the generated typings for this component is something like:
dist/types/example-component/exampe-component.d.ts
import { ... } from '../../stencil-public-runtime';
import { SwiperOptions } from 'swiper';
// [....]
export interface ScrollerBreakpointsConfig extends SwiperOptions {
[index: number]: SwiperOptions;
}
export declare class ExampleComponent {
// [...]
}
Stencil build process works as expected. But when to use Stencil component in my Vue Project, I get error when I build the Vue project.
Could not find a declaration file for module 'swiper'. '/xxx/xxx/xxx/xxx/node_modules/swiper/js/swiper.js' implicitly has an 'any' type.
Try `npm install @types/swiper` if it exists or add a new declaration (.d.ts) file containing `declare module 'swiper';`
1 | import { ... } from '../../stencil-public-runtime';
> 2 | import { SwiperOptions } from 'swiper';
This is easily solved by moving @types/swiper from Stencil devDependency to dependencies. But for me it does not make sense use such package as dependency.
I’m aware Stencil is doing his job and doing the necessary imports for definitions files. And if I decide to rely on a 3rd party module I need to ensure that it will load correctly. But imo, typings are merely used for development purposes, so I should kept apart from package dependencies.
Does any one faced this situation and solved it in another way?
Of course I could write my own typings to solve, but I would like to rely on third party typings for my Stencil components.
1 post - 1 participant
Hi,
I’m trying my app on android. I changed my splash screen in Android studio, but I still have .5s of white screen between my splash screen and my app.
Any solution ?
Thanks
4 posts - 2 participants
Hi!
I only have the www folder, and i want to “load” the project from it, is it possible?
Thanks!
5 posts - 2 participants
Hi there!
I deleted my node modules and did npm install, and after that, my website become so slow at loading and i get this message at the start : Angular is running in development mode. Call enableProdMode() to enable production mode."
I was building a ionic app, but now it seems that the main framework is angular. Why and how do i make that ionic becames the number one?
1 post - 1 participant
Hey, I have been upgrading my Ionic platform and I have been able to get all of the components working on the new Ionic 5 platform but there is only this one API that is not working. I have tested on the android application and it was working fine to make this API call. But on the IOS side it does not work. I did receive a CORS error earlier with other API responses but I was able to resolve those issues so Im not sure why this API call is failing. Also I have tested on Postman and the server is working fine.
Any help is appreciated.
import {throwError as observableThrowError, Observable} from 'rxjs';
import {catchError, map} from 'rxjs/operators';
import {Component, ViewChild} from '@angular/core';
import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders, HttpRequest} from '@angular/common/http';
import {env} from '../env/env';
import {ToastController, IonApp, NavController} from '@ionic/angular';
import 'rxjs/add/operator/toPromise';
import {NavigationExtras} from '@angular/router';
import { Storage } from '@ionic/storage';
@Injectable()
export class ApiService {
private userID: string;
private userNotification: string;
private userDetails: string;
private userToken: string;
constructor(
public storage: Storage,
private http: HttpClient,
public toastCtrl: ToastController,
public appCtrl: NavController,
// public device: Device
) {
}
inviteFriend(mobile, username){
return this.http.get(`${env.p3ApiUrl}/users/invite/${mobile}/${username}`).pipe(
catchError(this.handleError)).toPromise();
}
usage:
inviteFriend() {
if (!this.contact.name) {
this.ApiService.showToast('Please enter name');
return false;
}
if (!this.contact.mobile) {
this.ApiService.showToast('Please enter mobile');
return false;
}
if (this.contact.mobile.length != 10) {
this.ApiService.showToast('Please enter a valid mobile number');
return false;
}
for (let i = 0; i < this.friends.length; i++) {
if (this.friends[i].mobile == this.contact.mobile) {
this.ApiService.showToast('You\'ve already invited a contact with ' + this.contact.mobile);
return false;
}
}
this.loadingCtrl.create({
message: 'Inviting friend ...'
}).then((res) => {
res.present();
let userDisplayName;
this.ApiService.getUserDetails()
.then((r: any) => {
userDisplayName = r.firstName + ' ' + r.lastName;
this.ApiService.inviteFriend(this.contact.mobile, userDisplayName)
.then((r: any) => {
console.log(r);
if (r.status == 200) {
this.showUserExistsAlert(this.contact);
}
if (r.status == 201) {
this.addFriend(this.contact);
}
res.dismiss();
})
.catch(e => {
console.log(e);
res.dismiss();
if (e.status == 400) {
this.ApiService.showToast('Please enter a valid mobile number');
}
});
})
.catch(e => {
res.dismiss();
});
});
}
error:
[Log] HttpErrorResponse (cordova.js, line 1540)
error: Event {isTrusted: false, total: 0, totalSize: 0, loaded: 0, position: 0, …}
headers: HttpHeaders
headers: Map {} (0)
lazyUpdate: null
normalizedNames: Map {} (0)
HttpHeaders Prototype
message: "Http failure response for https://link-URL: 400 Bad Request"
No Properties
name: "HttpErrorResponse"
No Properties
ok: false
No Properties
status: 400
No Properties
statusText: "Bad Request"
No Properties
No Properties
HttpErrorResponse Prototype
constructor: function(init)
HttpResponseBase Prototype
2 posts - 2 participants
<IonList>
<IonItem>
<div>
...
</div>
</IonItem>
<IonList>
The content inside the <div> tag will not render properly (incorrect styling). If you remove the <div> it will show just fine. I’m trying to make an IonItem that spans the entire width but with a container inside the item to span only a percentage of the width.
This problem occurs with <span>, <p>, etc. Someone asked this on StackOverflow: https://stackoverflow.com/questions/46991253/why-putting-anything-div-p-or-just-text-inside-ion-item-after-ion-input-is-n
But the answer says to tag the <div> with item-content. But as far as I can see that doesn’t exist for Ionic React? Is there any way to accomplish this?
6 posts - 2 participants
How do i get date like “YYYY-MM-DD” when i clicked on any dates from ion2-calendar.
I have used the below library for calendar,
https://github.com/HsuanXyz/ion2-calendar/tree/v2
My HTML code:
<ion-calendar [(ngModel)]="dateRange" [options]="optionsRange" [type]="'string'" [format]="'YYYY-MM-DD'"
(onChange)="selectedRangeDates($event)" (onSelectStart)="onSelectStart($event)"
(onSelectEnd)="onSelectEnd($event)" >
</ion-calendar>
My TS Code:
optionsRange: CalendarComponentOptions = {
pickMode: 'range'
};
selectedRangeDates(dates) {
console.log(JSON.parse(JSON.stringify(dates));
}
onSelectStart(dates) {
console.log("onSelectStart DATES :: " + JSON.stringify(dates));
}
OUTPUT:
onSelectStart DATES ::{"time":1595442600000,"isToday":false,"title":"23","subTitle":"","selected":true,"isLastMonth":false,"isNextMonth":false,"marked":false,"cssClass":"","disable":false,"isFirst":false,"isLast":false}
On the above output i am getting “23” as selected date but instead of 23 i want to get YYYY-MM-DD when on click a single date as start date and dynamically set next 30 days in calendar from the selected date.
1 post - 1 participant
E/FileTransfer: {
“code”:3,
“source”:“http://localhost/capacitor_file/data/user/0/io.ionic.starter/files/15948856657
66.jpg”,
“target”:“https://mysite/upload",“http_status”:200,“exception”:"Failed to connect to
localhost/127.0.0.1:80”
}
java.net.ConnectException: Failed to connect to localhost/127.0.0.1:80
I want to upload photos on android app using Ionic 5 and capacitor. I get this error.
how can i solve this problem?
1 post - 1 participant
Hey I’m trying to change the fontSize based on toggle state.
<CreateAnimation
play={true}
iterations={Infinity}
duration={350}
fromTo={[
{ property: 'fontSize', fromValue: '64px', toValue: !expanded ? '64px': '24px' }
]}
>
<div>Helloworld</div>
</CreateAnimation>
This doesn’t work. Can someone shed some light here.
Also the documentation seems a bit outdated for react
For example https://ionicframework.com/docs/utilities/animations#overriding-ionic-component-animations
The example shown there, imports CreateAnimation class which is of react but uses in the end the javascript one i.e. createAnimation.
1 post - 1 participant
I’m using a ionic starter pwa and I’ve added service worker in my stencil.config.ts.
I’ve added my pwa to my mobile homepage but If I build another version of the pwa, with npm run build and then deploy the pwa, the app on my phone don’t update.
Stencil doc here says this but don’t work for me.
"Also, because the files Stencil generates are hashed, every time you do a production build and push an update to your app, the service worker will know to update, therefore ensuring your users are never stuck on a stale version of your site."
This is my stencil.config.ts.
...
outputTargets: [
{
type: "www",
serviceWorker: {
globPatterns: [
'**/*.{js,css,json,html,ico,png}'
]
},
...
};
1 post - 1 participant
Hi, Anyone using this https://github.com/transistorsoft/cordova-plugin-background-fetch plug in. It is not working in android. Error says plugin not installed.
.2020-07-15T18:30:00Z2 posts - 2 participants
Hi everyone,
I realized that when clicking on any menu item, when loading the page it has a slight crash. The ion-menu-button button takes time to appear. And when it clicks, it takes time until the sidemenu appears.
When navigating between pages, every time you enter the page, this crash occurs. This html and .ts files are just a piece of the other app. Made this just for tests and even if has nothin installed, just the scaffold when create the app.
if anyone can help me to understand why its happening.
1 post - 1 participant
I just ported and rebuilt my Ionic v1 app on a new mac and have all the latest and greatest versions of Node, NPM, Cordova, and Ionic-cli v6.10.1 etc. I am able to successfully compile my app and deploy it a simulator but when compiling from the CLI I am getting the below issues. Even though my app is still successfully compiling I am getting odd behaviors with iPhoneX/iPhone11 UI layouts where the “safe zones” notch area aren’t working properly. I think the issues might be related but I am not certain.
On my older mac, I am running Ionic cli 5.4.4 with the same GULP versions as below and the gulp files are running properly - and my UI safe zones for iPhoneX/iPhone11 are working fine.
How can I resolve this? Or am I going to have to downgrade the Ionic CLI ?
% ionic cordova build ios
> ionic-v1 build
[08:16:10] Cannot load gulp: ReferenceError: primordials is not defined
[08:16:10] Cannot load gulp: ReferenceError: primordials is not defined
[08:16:10] Cannot run sass task: missing in gulpfile.js
[08:16:10] Cannot load gulp: ReferenceError: primordials is not defined
> cordova build ios
Here is my env info:
% ionic info
Ionic:
Ionic CLI : 6.10.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : ionic1 1.0.0
@ionic/v1-toolkit : 1.0.22
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 32 other plugins)
Utility:
cordova-res : 0.15.1
native-run : not installed
System:
ios-deploy : 1.10.0
ios-sim : 8.0.2
NodeJS : v14.5.0 (/usr/local/Cellar/node/14.5.0/bin/node)
npm : 6.14.5
OS : macOS Catalina
Xcode : Xcode 11.5 Build version 11E608c
% gulp -v
CLI version: 2.3.0
Local version: 3.9.1
1 post - 1 participant
Hi everyone,
Im wondering if someone could help me with the Frosted Glass effect using css only in my ionic app with angular, is it possible?
i’ve been following the tutorial but it seems the blur effect doesnt seems applied to my background
<ion-content [fullscreen]="true" class="background-test">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>
<div class="container">
<strong>Ready to create an app?</strong>
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
</ion-content>
ion-content.background-test
{
--background: url(../../assets/img/test.png) no-repeat center/cover fixed ;
}
if this is possible, could someone let me know what should I set in my container class css ?
thankyou!
1 post - 1 participant
Hi, I am looking to store safe my data with @ionic/storage.
My current setup is @ionic/storage and cordova-sqlite-storage plugin
On my app.module I have this config:
IonicStorageModule.forRoot({
name: ‘myName’,
driverOrder: [‘sqlite’, ‘localstorage’, ‘indexeddb’, ‘websql’],
dbKey: ‘myKey’
}),
To store ciphered data is needed to install Cordova-sqlcipher-adapter plugin? Or I have to install only:
@ionic/storage + Cordova-sqlcipher-adapter plugin ?
thanks
1 post - 1 participant
Firebase Auth doesnt work in IOS Capacitor Application.
Error is:
“auth/cors-unsupported”
message: “This browser is not supported.”
Dependencyes:
"@angular/fire": "^6.0.2",
"@angular/forms": "~8.2.14",
"@angular/http": "^7.2.16",
"@angular/platform-browser": "^8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@angular/service-worker": "~8.2.14",
"@auth0/angular-jwt": "^4.1.2",
"@capacitor/android": "^2.1.0",
"@capacitor/core": "^2.2.0",
"@capacitor/ios": "^2.2.0",
"@ionic-native/core": "^5.0.7",
"@ionic-native/device": "^5.24.0",
"@ionic-native/facebook": "^5.26.0",
"@ionic-native/file": "^5.24.0",
"@ionic-native/file-transfer": "^5.24.0",
"@ionic-native/google-plus": "^5.26.0",
"@ionic-native/in-app-browser": "^5.24.0",
"@ionic-native/network": "^5.24.0",
"@ionic-native/onesignal": "^5.24.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.2.3",
"@ionic/storage": "^2.2.0",
1 post - 1 participant