Hi, I am using paypal plugin in my project which uses UIwebview which app store started rejecting, if I remove paypal from my project then my project submit successfully to app store. But I want to use Paypal in my project. Please help?
1 post - 1 participant
Hi,
is there a way to build a AFrame.io Ionic app with Angular or React?
any hint appreciated
1 post - 1 participant
Digital marketing service is well known by the common people as internet marketing and our company helps to achieve milestone of many reputed companies.
1 post - 1 participant
Hey there!
I follow this documentation to use ScreenOrientation in my app : https://ionicframework.com/docs/native/screen-orientation
First, I installed libraries using this steps :
npm install cordova-plugin-screen-orientation
npm install @ionic-native/screen-orientation
ionic cap sync
Then, in my component.ts file, I just imported it and try to declare in my constructor like this :
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Subscription } from 'rxjs';
import { SliderModel } from './slider.model';
import { HomeService } from '../home.service';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
@Component({
selector: 'app-slider-images',
templateUrl: './slider-images.component.html',
styleUrls: ['./slider-images.component.scss']
})
export class SliderImagesComponent implements OnInit, OnDestroy {
sliderImgs: SliderModel[];
private sliderImgsSub : Subscription;
isLoaded = false;
@ViewChild('slideWithNav2', { static: false }) slideWithNav2: IonSlides;
sliderTwo: any;
slideOptsTwo = {
initialSlide: 1,
slidesPerView: 2.8,
loop: true,
autoplay: true,
centeredSlides: true,
spaceBetween: 5
};
constructor(private homeService: HomeService, private screenOrientation: ScreenOrientation) {
this.sliderTwo =
{
isBeginningSlide: true,
isEndSlide: false,
slidesItems: []
};
}
ngOnInit() {
this.sliderImgsSub = this.homeService.fetchImage().subscribe(sliderImages => {
this.sliderImgs = sliderImages;
for(let row in this.sliderImgs) {
const imageUrl = {
imageB64: this.sliderImgs[row].imageB64,
};
this.sliderTwo.slidesItems.push(imageUrl);
}
this.isLoaded = true;
});
}
ngOnDestroy() {
if(this.sliderImgsSub) {
this.sliderImgsSub.unsubscribe();
}
}
}
At this moment, I got a problem, this error message is displayed :
Can't resolve all parameters for SliderImagesComponent in /Users/godaltristan/Desktop/Ionic Development/src/app/home/slider-images/slider-images.component.ts: ([object Object], ?).
I also tried to set ScreenOrientation in providers from my app.module.ts but I got the same error message.
I need ScreenOrientation to update the slidesPerView value in my sliderTwo object when orientation change, but I can’t achieved this.
Tried many solutions on many forums but nothing works.
Does anyone have a solution ?
Thanks.
1 post - 1 participant
Hey,
I’m new with Ionic React and I’m looking for the correct way to integrate custom fonts and a custom icon set into my project, so that it’s working on all platforms as intended.
Custom Icon set
My goal is to make my custom icons work with IonIcon so that I can use the default styling options like “size” and the CSS variables (e…g --ioinc-stroke-weight).
What I did so far:
So far the icons are displayed as intended and custom attributes “size” is working.
But, I’m not able to set the icon color or stroke-width programmatically. All the icons have set a default attributes (e.g. < g fill=“none” fill-rule=“evenodd” stroke="#092A5E" stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“8” >). Even if I remove those default attributes, I’m not able to set them via CSS variables
Question 1: Is “public/assets/customicons/” the correct folder to store the icons?
Question 2: How can I make it work that I can change the color of the icon via CSS?
Custom Font
Goal: I want that the custom font is shown on all platforms
What I did so far:
Question 1: Is this the correct folder to store the custom fonts? (I wasn’t able to do the same when the custom font was saved under “public/assets/fonts/” like the icon set)
Unfortunately, I wasn’t able to find any docs, tutorials or posts on any of these topics.
Thanks for your help!
1 post - 1 participant
Is there a guide on how “In App Browser” is used in a React Ionic project?
The current doc (https://ionicframework.com/docs/native/in-app-browser/) on In App Browser seems to be targeted at Angular.
In particular, I’m trying the following code:
import { InAppBrowser } from '@ionic-native/in-app-browser';
// ...
const browser = InAppBrowser.create("some url");
browser.on('loadstart').subscribe(event => {
// ...
})
This code is able to open.a new browser, but I’m seeing an error “Cannot read property ‘subscribe’ of undefined”, which I don’t understand why. Can someone give an example of how I should use “In App Browser” in Ionic + React?
1 post - 1 participant
Hello,
do you have any idea how to change name of the app in the video preview (when screen is locked)? Normally I changed MKC and when the app is installed name of the app is also proper (as tag referes).
But in my app i have video and audio player and when i lock the screen instead of name of my app i have “Ionic App”. I removed app from my devices, simulator, I also removed ionic cordova rm ios and added it again, but nothing helped. Any idea what can it be?
1 post - 1 participant
Hello guys, i’m trying to figure out how to create in the smartest way ionic card dynamically from javascript.
At the moment i’m doing with these bunch of rows:
let card = document.createElement("ion-card");
let cardContent = document.createElement("ion-card-content");
let cardTitle = document.createElement("ion-card-title");
let row = document.createElement('ion-row');
let ionButton = document.createElement('ion-button');
let icon = document.createElement('ion-icon');
icon.slot = 'icon-only';
icon.name = 'expand-outline';
ionButton.color = 'light';
ionButton.append(icon);
cardTitle.append(ionButton);
cardContent.append(row);
card.append(cardTitle);
card.append(cardContent);
I supposed there is a faster way like:
let card = new IonCard({
// options to complete the card like ion-card-header, ion-card-content and stuff like that
})
But i’m wrong.
Any tips?
Thx guys
1 post - 1 participant
I’ve an issue with a FormGroup. I have a list of descriptions of places that I use to fill in a form with corresponding ion-input fields. The user should be able to update the description & submit it.
But when I don’t update the value in the fields, the data sent to the ts file is empty even if it’s well displayed on the screen. Can you please advise how to fix it?
Here is my html file:
<ion-content padding class="form-content" [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Debug</ion-title>
</ion-toolbar>
</ion-header>
<form [formGroup]="validations_form" (ngSubmit)="onSubmit(validations_form.value)">
<div *ngFor="let place of (places | async)">
<ion-item>
<ion-label color="primary"></ion-label>
<ion-input type="text" formControlName="desc_{{place.id}}" [value]="place.name"></ion-input>
</ion-item>
</div>
<ion-button expand="full" type="submit">Save</ion-button>
</form>
</ion-content>
Here is my ts:
import { Component} from '@angular/core';
import { Observable } from 'rxjs';
import { Validators, FormBuilder, FormGroup, FormControl, FormArray, ValidationErrors } from '@angular/forms';
import { PersonService } from '../../person.service';
import Place from '../../types';
@Component({
selector: 'app-debug',
templateUrl: './debug.page.html',
styleUrls: ['./debug.page.scss'],
})
export class DebugPage {//} implements OnInit {
places: Observable<Place[]>;
validations_form: FormGroup;
constructor(
public formBuilder: FormBuilder,
public personService: PersonService
) {
this.places = personService.getAllPlaces_full();
this.validations_form = this.formBuilder.group({
'desc_1': ['', Validators.required],
'desc_2': ['', Validators.required],
'desc_3': ['', Validators.required],
'desc_4': ['', Validators.required],
'desc_5': ['', Validators.required],
'desc_6': ['', Validators.required]});
}
onSubmit(values){
console.log(values);
for (let [key, value] of Object.entries(values)) {
if (!( value ===null))
{
console.log(`${key}: ${value}`);
}
}
}
}
Here is the screen:
Here is the log:
1 post - 1 participant
Hi there!
I received an email from Google with Google Play Developer Program Policy Update and I have a doubt.
I use file and file-opener plugins to write and open files. The route I use is externalDataDirectory and my API level is 21+ and target SDK 28.
Can I have problems with this update?
All Files Access Permission
Files and directory attributes on a user’s device are regarded as personal and sensitive user data subject to the Personal and Sensitive Information policy and the following requirements:
Apps should only request access to device storage which is critical for the app to function, and may not request access to device storage on behalf of any third-party for any purpose that is unrelated to critical user-facing app functionality.
Android devices running R (Android 11, API Level 30) or later, will require the MANAGE_EXTERNAL_STORAGE permission in order to manage access in shared storage. All apps that target R and request broad access to shared storage (“All files access”) must successfully pass an appropriate access review prior to publishing. Apps allowed to use this permission must clearly prompt users to enable “All files access” for their app under “Special app access” settings. For more information on the R requirements, please see this help article.
Thanks in advanced.
1 post - 1 participant
I was in home page, and then i went to another page to add a record. And then i am coming back to home page. In home page i need to show the record(s) added.
In add page, i tried with ion-back-button
<ion-back-button></ion-back-button>
I also tried to use a custom button
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="changeRoute()">Back</ion-button>
</ion-buttons>
<ion-title>Reminder</ion-title>
</ion-toolbar>
</ion-header>
And the route change function is as below
changeRoute() {
this.router.navigate(['/home']);
}
But still, in the home page, none of the below methods are triggering.
ionViewWillEnter() {
console.log('ionViewWillEnter')
}
ionViewDidLoad() {
console.log('ionViewDidLoad')
}
ionViewWillLeave() {
console.log('ionViewWillLeave')
}
ionViewDidLeave() {
console.log('ionViewDidLeave')
}
ionViewWillUnload() {
console.log('ionViewWillUnload')
}
ionViewDidEnter() {
console.log('ionViewDidEnter');
}
My ionic version info is as below
Any help would be appreciated.
1 post - 1 participant
ion-datetime failed to show input-text after changing. I need to flip or change orientation then it will works. Web and Android mode are working fine. Anyone suggestion?
<div id="date-section" [@visibilityChanged]="visibility3" style="opacity: 0">
<div style="margin:40px;">
<ion-item>
<ion-label position="floating">{{ 'CHECK_IN_DATE' | translate | uppercase }}</ion-label>
<ion-datetime (ionChange)="changeSDate($event, 1)" displayFormat="YYYY-MM-DD" min="{{this.startDateS}}" max="{{this.endDateS}}" value="{{this.startDateFinal}}" ></ion-datetime>
</ion-item>
</div>
</div>
1 post - 1 participant
Unable to find explicit activity class
(com.soundcloud.android.crop.CropImageActivity)have you declared this activity in your AndroidManifest.xml?:
it is giving above error after selecting image. and i am not able to crop image.
I am using @ionic-native/crop.
can anyone have solution?
1 post - 1 participant
Hi guys,
I am making a custom modal with a border radius so i can have rounded corners. i manage to do what i want, but the modal content will automatically have a scroll.
I tried to figure it out on the css but no luck.
Any one has any ideas? Here is my code.
CSS
.message-modal {
--height: 250px;
--max-height: 250px;
--border-width: 1px;
--border-style: solid;
--border-color: var(--ps-page-background2);
align-items: flex-end;
--backdrop-opacity: 0.3;
--border-radius: 10px 10px 0px 0px;
}
TS
const modal = await this.modalCtrl.create({
component: MessagePage,
cssClass: 'message-modal'
});
And here is the result
1 post - 1 participant
Hello,
I have a ion-nav in a separate section of my app (independant of the Angular routing that I’m using for the main content of my app). And I would like to INSERT a stack of pages into this ion-nav at a specified index, the functions insertPages and setPages seems perfect but lacks documentation.
To push a view one by one it’s :
@ViewChild("nav") nav: IonNav;
ngOnInit(): void {
await this.nav.push(MyNewComponent, { input1: "value", input2: "value" });
}
And I would like to do something like :
@ViewChild("nav") nav: IonNav;
ngOnInit(): void {
// Index 1
await this.nav.insertPages(1, [
{ component: MyNewComponent, componentProps: { input1: "value", input2: "value" } },
{ component: MyNewComponent, componentProps: { input1: "value2", input2: "value2" } },
{ component: MyNewComponent, componentProps: { input1: "value2", input2: "value3" } }
]);
}
But this is currently not possible … It says incompatible with type NavComponent which is "Function | HTMLElement | ViewController". So I can do the following to have 0 errors but HOW to pass componentProps as well ??
@ViewChild("nav") nav: IonNav;
ngOnInit(): void {
// Index 1
await this.nav.insertPages(1, [ MyNewComponent, MyNewComponent, MyNewComponent ]);
}
I would appreciate any help …
1 post - 1 participant
I would love to learn Ionic more and do more with it, but I don’t have the time. Apparently I can’t stop the projects coming in though so I need an affordable developer to outsource to. Please hit me up and show me some of your projects, cost or hourly of the project to help me to gauge your expertise. Shoot me an email at wilhatfield@gmail.com
Wil
1 post - 1 participant
I am currently using Ionic 4, and I’m looking for a way to cache images from a server on electron and Android + iOS. I currently have tried a bunch of options, the most promising was this one from triniwiz but it seems to be unmaintained and could not configure it for Ionic since the files for config do not exist. I as well found other cordova solutions that unfortunately do not apply to my case because I’m using capacitor.
Then I figured to make my own caching system, I wanted to save them as a base 64 string using the StoragePluginWeb from the ‘@capacitor/core’ package. But at the end I figured it only serves as a key-value database and I would like to fill it with nested objects (like in a map), which is not possible.
What could be a correct Ionic + Capacitor way to achieve this? I’m open to remake the whole thing (the image fetching system) if necessary.
1 post - 1 participant
Is there a way to remove a build from Master channel?
I don’t want to rollback to a previously version neither push another version, just for now.
First I need to understand a problem that is happening, then I’ll be able to submit another build.
1 post - 1 participant
I have been trying to update my Angular version from 5 to version 9,1 and I have been facing some issues with the headers of my API calls. even though I have set up a process for the headers with the proper authorization. but whenever I try to make the API call the headers do not seem to show up. I have tested through postman if the API is callable with the token and it working as intended. Any ideas are appreciated.
getProfileDetails(userid) {
return this.http.get(`${env.p3ApiUrl}/users/${userid}`, this.requestOptions()).pipe(
catchError(this.handleError)).toPromise();
}
private requestOptions() {
const header = new HttpHeaders().set('content-type', 'application/json')
.set('Access-Control-Allow-Origin', '*')
.set('Authorization', 'Bearer ' + this.getTokenString());
const requestOptions = {headers: header};
return requestOptions;
}
async getToken(){
return await this.userToken;
}
getTokenString(): any {
this.getToken().then((val) => {
console.log(val);
return val;
});
}
Error:
Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":401,"statusText":"OK","url":"https://apicarenew.clinakos.com/users/50992","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://apicarenew.clinakos.com/users/50992: 401 OK","error":{"message":"unauthorized"}}
1 post - 1 participant
Hi All,
Am new into ionic development, my manager asked me to upgrade an existing App of ours from ionic 3 to 5. Its a quite big application, my doubt is can i upgrade directly from ionic 3 to 5 or should i go as like from 3 to 4 and then 4 to 5?
2 posts - 2 participants