@Sweg wrote:

I am trying to create a record in firebase using my ionic app.

I have already successfully connected to the firebase app because I am using auth() to log in users already.

But now, I am not able to create records when I try to add to a collection. Below is my latest code:

post(): void {
    console.log('attempting post')
    firebase.firestore().collection('posts').add({
      text: this.text,
      created: firebase.firestore.FieldValue.serverTimestamp(),
      owner: firebase.auth().currentUser.uid,
      owner_name: firebase.auth().currentUser.displayName
    }).then((doc) => {
      console.log(doc);
    }).catch((err) => {
      console.log(err)
    })
  }

“attempting post” is logged to the console, so I’m getting into the post() method, but nothing else is appearing in the console, not even an error message.

Also, here are the database rules in my firebase app:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth.uid != null;
    }
  }
}

Can someone please tell me what I’m doing wrong, & how it can be resolved?

Posts: 1

Participants: 1

Read full topic

@xmarkclx wrote:

Is there a way to change this image https://imgur.com/a/f8HVdlz (edited)

on ion-select (edited)

to something like this https://imgur.com/a/GOihXRK (edited) ?

I don’t even think it’s an image, it looks like a div, but replacing it with an image would be cool since it easier than styling a div.

Posts: 2

Participants: 2

Read full topic

@maxipouza wrote:

When using
transform: rotate ( rot * 1deg) translate ( circle-size / 2) rotate ($ rot * -1deg);
To create a circular menu I find that now the buttons do nothing when pressed. If I comment on this part of the code, they are no longer logically circling and the click event works again

Capture css1022×624 31.6 KB

Reference I used for my code:

Posts: 1

Participants: 1

Read full topic

@Zaknafean wrote:

I’ve recently released an Ionic 5 app for a client, and while the android app is a cozy 9 mb file, the iOS app seems to be 74 mb if the app store is reporting that right. I know that iOS apps tend to be larger, but this seems WAY bigger than I’d have thought. I feel I must be doing something wrong, which given I’m not a big apple user, seems likely.

I’m building/signing/etc via the CLI for Android with the --prod --release flag and Xcode for apple after a prepare ios call in the terminal. Is there any tips, flags, something that I am overlooking for these apple builds that could bring the size down?

Posts: 1

Participants: 1

Read full topic

@amanmohammed wrote:

Hello,

I have been trying to work out the simple ionic tab component since a few days. I have a screen were the the user has 3 tabs on the bottom slot. On clicking the tabs, the ngOnInit function fires for the tab but I cant seem to the load the Html associated with the component. Any ideas what could be wrong? I have put a console log message in the ngOnInit method and it shows the message in console so I think the routing is configured correctly. I can also see the URL changing.

My HTML code:

<ion-footer>
    <ion-toolbar>
            <ion-tabs>
                <ion-tab-bar slot="bottom">
    
                    <ion-tab-button tab="journey">
                        <ion-icon name="walk"></ion-icon>
                      <ion-label>Journey</ion-label>
                    </ion-tab-button>
        
                  <ion-tab-button tab="learning">
                      <ion-icon name="book"></ion-icon>
                    <ion-label>Current Learning</ion-label>
                    <ion-badge>6</ion-badge>
                  </ion-tab-button>
              
                  <ion-tab-button tab="profile">
                      <ion-icon name="information-circle"></ion-icon>
                      <ion-label>Profile</ion-label>
                  </ion-tab-button>
                </ion-tab-bar>
              </ion-tabs> 
     </ion-toolbar>
</ion-footer>

I have tried using the ionic page and then also tried using ionic component. Both approaches display the same behaviour of the ngOnInit firing and URL chaning but the HTML associated with the tab does not load.

My routing-module.ts code

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    
    import { ChildDetailPage } from './child-detail.page';
    import { CurrentLearningPageModule } from '../../current-learning/current-learning.module';
    import { CurrentLearningComponent } from '../../current-learning/current-learning.component';
    import { ProfileComponent } from '../../profile/profile.component'
    
    const routes: Routes = [
      {
        path: '',
        component: ChildDetailPage,
        children:[
          {
            path: 'journey',
            children:
                [
                  {
                    path: '',
                    loadChildren: './child-detail.page'
                  }
                ]
          },
          {
            path: 'learning',
            children:
                [
                  {
                    path: '',
                    //loadChildren: '../../current-learning/current-learning.module#CurrentLearningPageModule'
                   // loadChildren: () => import('../../current-learning/current-learning.module').then( m => m.CurrentLearningPageModule)
                   component: CurrentLearningComponent
                  }
                ]
          },
          {
            path: 'profile',
            loadChildren: () => import('../../profile/profile.component').then( m => m.ProfileComponent)
          },
          
          // {
          //   path: '',
          //   redirectTo: 'journey',
          //   pathMatch: 'full'
          // }
        ]
      },
      {
        //path: '',
        //redirectTo: 'child/child-detail/',
        //pathMatch: 'full'
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })
    export class ChildDetailPageRoutingModule {}

Any help would be deeply appreciated!

• List item

Posts: 1

Participants: 1

Read full topic

@aaronksaunders wrote:

Using React Hook Form with Ionic React Components - DEV Community https://buff.ly/2vgFK76

Posts: 1

Participants: 1

Read full topic

@J4N wrote:

Hi,

I need to have a three state toggle in my app. Not a checkbox, not a radio group button, and I’m investigating if/how it can be done with ionic.

The idea is that it would be bound to a “true/false/indeterminate” value. It’s about filtering a list of elements on the map. Every feature should be “Wanted”(true) or “Excluded”(false) or basically “I don’t care”(inderminate)

I’ve found this: https://nozzle.io/devblog/ng-tri-toggle-angularjs-triple-state-checkbox-directive which is going to the right direction, but I’m not a CSS expert and I’m not sure this is going in the right direction.

How would you do to have such a component in an app that will be used on web/android/ios(and therefore have it’s style derivating from the original toggle) ?

Thank you very much

1. List item

Posts: 1

Participants: 1

Read full topic

@juan9222 wrote:

Hi there. I’m having a Error 429 once my app is compiled in my smartphone, I’m to expecting to solve this problem with the community:
´´´
x {headers: h, status: 429, statusText: “Too Many Requests”, url: “https://cors-anywhere.herokuapp.com/https://geolocate.herokuapp.com/users/”, ok: false, …}
´´´
In my navigator it works perfectly. With postman i tried to emulate that problem, sending various requests, and it works too. This only happens when i have my app compiled in my smartphone.

A solution that come up to my mind was whitelisting my endpoint in config.xml

  <allow-navigation href="*" />
    <allow-navigation href="https://cors-anywhere.herokuapp.com/https://geolocate.herokuapp.com/users/" />

Another solution was trying to define my platforms in order to make them work

<platform name="android">
        <preference name="android-minSdkVersion" value="19" />
        <preference name="android-targetSdkVersion" value="29" />
<platform/>

But my app doesn’t works when I try to make my request.

Testing Platform: Android 8.1.0
Development OS: Mac OS Catalina
Cordova Version: 9.0.0 (cordova-lib@9.0.1)
Ionic CLI version: 6.2.0

´´´
Ionic:

Ionic CLI : 6.2.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 4.11.9
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.1.2

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 6 other plugins)

Utility:

cordova-res : not installed
native-run : 0.3.0

System:

NodeJS : v12.16.1 (/usr/local/bin/node)
npm : 6.14.1
OS : macOS Catalina
Xcode : Xcode 11.3.1 Build version 11C504

´´´

Posts: 1

Participants: 1

Read full topic

@NemanjaZoric wrote:

Hi, is there a way to trigger swipe down action for e2e testing purposes? We are trying to test a page with ion-refresher, but until now, we weren’t able to trigger it.

Posts: 1

Participants: 1

Read full topic

@EuanDScott wrote:

Hey everyone

TL;DR? How does one get custom page transitions to work in Ionic 5?

Long version:

I am having an issue using the new Animations in Ionic 5 to create custom page transitions.

My app is a Mobile Point of Sale that runs on a specific android device - not available for the mass public to be run on multiple types of devices. Due to the size/complexity of the app and the specifications of the device it can be laggy at times. To counter this, we implemented custom animations to create a perceived performance. However thanks to the latest version of Ionic, the overall performance has improved for the app - so many thanks to the Ionic Team. We still however need the custom animations in the app.

I have been able to get the modal animations to work thanks to help received in a previous post that I opened and closed. I have tried to use that same logic in my page animations but am not having much luck.

What I am trying to do is implement a page transition similar to that of iOS, whereby the current page will slide out and the new page will slide in. I have had some luck on this in that it applies the animation correctly. The animation however plays both the leave and enter animation at the same time which causes a ‘morphing’ of the 2 sets of markup on the 2 pages. So everything goes funky.

I have tried to implement it using this logic, but have had no success .

I have created a demo project on github to demonstrate this issue. If somebody could perhaps help me with this it would be most appreciated. There is a README.me describing how to re-create the issue.

This is a v5 project, using Angular 8 and Capacitor.

My Ionic info:

   Ionic CLI                     : 6.1.0 (/Users/euanscott/.npm-global/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.4
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.5.1
   @capacitor/core : 1.5.1

Utility:

   cordova-res (update available: 0.10.0) : 0.8.0
   native-run (update available: 0.3.0)   : 0.2.8

System:

   NodeJS : v12.12.0 (/usr/local/bin/node)
   npm    : 6.11.3
   OS     : macOS Catalina

Regards,
Euan

Posts: 1

Participants: 1

Read full topic

@janicklasM79 wrote:

Problem: When swiping through the map and/or quickly zooming out at the same time, the app crashes. The app is built with Ionic 5/Angular and the map comes from mapboxgl. This happens to the installed App on both Android and iOS, but not when debugging in the browser. When debugging with XCode on my device (iPhone 8, iOS 13.3.1) I could not find an error message (other than: [Process] kill() returned unexpected error 1 , which I think is related to a bug with WKWebview, but not to this problem, since this also happens on Android).

Here are the installed dependencies and cordova plugins:

“dependencies”: {
“@agm/core”: “^1.1.0”,
“@angular/animations”: “^8.2.14”,
“@angular/common”: “^8.2.14”,
“@angular/core”: “^8.2.14”,
“@angular/fire”: “^5.4.2”,
“@angular/forms”: “^8.2.14”,
“@angular/platform-browser”: “^8.2.14”,
“@angular/platform-browser-dynamic”: “^8.2.14”,
“@angular/router”: “^8.2.14”,
“@ionic-native/background-geolocation”: “^5.22.0”,
“@ionic-native/core”: “^5.22.0”,
“@ionic-native/diagnostic”: “^5.22.0”,
“@ionic-native/geolocation”: “^5.22.0”,
“@ionic-native/google-maps”: “^5.5.0”,
“@ionic-native/http”: “^5.22.0”,
“@ionic-native/ionic-webview”: “^5.22.0”,
“@ionic-native/keyboard”: “^5.22.0”,
“@ionic-native/splash-screen”: “^5.22.0”,
“@ionic-native/status-bar”: “^5.22.0”,
“@ionic-native/vibration”: “^5.22.0”,
“@ionic/angular”: “^5.0.4”,
“@mauron85/cordova-plugin-background-geolocation”: “^3.1.0”,
“@ngx-translate/core”: “^12.1.2”,
“@ngx-translate/http-loader”: “^4.0.0”,
“@turf/along”: “^6.0.1”,
“@turf/bearing”: “^6.0.1”,
“@turf/circle”: “^6.0.1”,
“@turf/destination”: “^6.0.1”,
“@turf/distance”: “^6.0.1”,
“@turf/helpers”: “^6.1.4”,
“@turf/invariant”: “^6.1.2”,
“@turf/length”: “^6.0.2”,
“@turf/line-intersect”: “^6.0.2”,
“@turf/meta”: “^6.0.2”,
“@turf/nearest-point-on-line”: “^6.0.2”,
“@types/mapbox-gl”: “^1.8.0”,
“cordova-android”: “8.1.0”,
“cordova-ios”: “^5.1.1”,
“cordova-js”: “^5.0.0”,
“cordova-plugin-advanced-http”: “^2.4.1”,
“cordova-plugin-file”: “^6.0.2”,
“cordova-plugin-geolocation”: “^4.0.2”,
“cordova-plugin-ionic-webview”: “^4.1.0”,
“cordova-plugin-vibration”: “^3.1.1”,
“cordova.plugins.diagnostic”: “^5.0.1”,
“core-js”: “^2.6.11”,
“firebase”: “^7.9.3”,
“geofirex”: “^0.1.0”,
“geojson-rbush”: “^3.1.2”,
“hammerjs”: “^2.0.8”,
“lodash.debounce”: “^4.0.8”,
“mapbox-gl”: “^1.8.1”,
“moment”: “^2.24.0”,
“node-sass”: “^4.13.1”,
“rxjs”: “^6.5.4”,
“tslib”: “^1.11.1”,
“zone.js”: “~0.9.1”
},
“devDependencies”: {
“@angular-devkit/architect”: “~0.801.2”,
“@angular-devkit/build-angular”: “^0.803.25”,
“@angular-devkit/core”: “~8.1.2”,
“@angular-devkit/schematics”: “~8.1.2”,
“@angular/cli”: “^8.3.25”,
“@angular/compiler”: “^8.2.14”,
“@angular/compiler-cli”: “^8.2.14”,
“@angular/language-service”: “^8.2.14”,
“@ionic/angular-toolkit”: “~2.0.0”,
“@types/jasmine”: “~3.3.8”,
“@types/jasminewd2”: “~2.0.3”,
“@types/node”: “~8.9.4”,
“codelyzer”: “^5.2.1”,
“cordova-plugin-device”: “^2.0.3”,
“cordova-plugin-ionic-keyboard”: “^2.2.0”,
“cordova-plugin-splashscreen”: “^5.0.3”,
“cordova-plugin-statusbar”: “^2.4.3”,
“cordova-plugin-whitelist”: “^1.3.4”,
“jasmine-core”: “~3.4.0”,
“jasmine-spec-reporter”: “~4.2.1”,
“karma”: “~4.1.0”,
“karma-chrome-launcher”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “~2.0.1”,
“karma-jasmine”: “~2.0.1”,
“karma-jasmine-html-reporter”: “^1.5.2”,
“protractor”: “^5.4.3”,
“ts-node”: “~7.0.0”,
“tslint”: “~5.15.0”,
“typescript”: “~3.5.3”
},
“cordova”: {
“plugins”: {
“cordova-plugin-geolocation”: {},
“cordova-plugin-whitelist”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-ionic-keyboard”: {},
“cordova.plugins.diagnostic”: {},
“cordova-plugin-advanced-http”: {},
“cordova-plugin-vibration”: {},
“cordova-plugin-background-geolocation”: {
“ALWAYS_USAGE_DESCRIPTION”: “This app always requires location tracking”,
“MOTION_USAGE_DESCRIPTION”: “This app requires motion detection”
},
“cordova-plugin-ionic-webview”: {
“ANDROID_SUPPORT_ANNOTATIONS_VERSION”: “27.+”
}
},
}

Plugins in config.xml:

Posts: 1

Participants: 1

Read full topic

@karabillie wrote:

Hi everyone.
I want to show some urls inside my app just like the components. The reason I want to do it is that I want to show every time my app main menu.
Is it possible to do that with SafariViewController or InAppBrowser?
If yes, does anyone have some appropriate examples or documentation to share with the above case?
Thanks.

Posts: 3

Participants: 2

Read full topic

@nmckeown wrote:

Hello,

We are about to build a new Ionic/Angular app. I’ve worked mostly with Ionic v1.
Curios if users have recommendations on which is best version for greenfield app ?

My guess would be v3 is best supported but would like hear experiences of v4 & v5. Thanks

Posts: 2

Participants: 2

Read full topic

@Vartex05 wrote:

Hi, iam trying to implement service, which handles nfc scanning through reader mode. In this service, i have subject, which is accessible from outside as observable and it emits scanned tags. The problem is, i have to start scan and end nfc scan manually from component too. Is it possible to run some code when someone unsubscribes from observable? For this concrete example i would like to call stopNfcScan function, when someone unsubscribes form getTagSource. Is it possible?

export class NfcService {

  private _tagSource=new Subject();

  constructor() { }

  getTagSource(){
    return this._tagSource.asObservable();
  }

  startNfcScan() {
    nfc.readerMode(nfc.FLAG_READER_NFC_A,(tag)=>{
      console.log(this.transformTag(tag.id));
      this.stopNfcScan();
    },err=>{
      console.log(err);
  });

  }

  stopNfcScan() {
    nfc.disableReaderMode(
      () => console.log("NFC reader mode disabled"),
      error => console.log("Error disabling NFC reader mode", error)
    );
  }

Posts: 1

Participants: 1

Read full topic

@UnnatiPatadia wrote:

I want to reload the page after calling API in ionic 4.

When the app starts after the splash screen white screen is removed by adding this in config.xml

<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="30000" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="SplashScreen" value="screen" />
<preference name="ShowSplashScreen" value="true" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="true" />   

After login, it navigates to the tabs pages, In tab1 I check if the user is approved by an admin or not and according to that value message is shown on the screen.

In tab1 I am using ion-refresher to refresh the page and call API to check whether the user is approved or not.

For update UI of the screen on success if API I call :

window.location.reload();

But an issue is that after reloading page white screen appears for a while.

How to remove that white screen?

.html

<ion-refresher #refresherRef slot="fixed" (ionRefresh)="load($event)">
    <ion-refresher-content
    pullingIcon="arrow-dropdown"
    pullingText="Pull to refresh"
    refreshingSpinner="circles"
    refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

  <div *ngIf="userData.userStatus == 2" class="emplty_class">
    Your request has been pending.
  </div>

  <div *ngIf="userData.userStatus == 1">
    Your request is approved.
  </div>

.ts

load(refresher) {
    if(this.userData.userStatus == "2"){
      let postData = new FormData();
      postData.append('user_id', this.userData.userId);

      this.authService.postData(postData, "is_verified_or_not.php").then((result) => {
        this.responseData = result;

        this.success = this.responseData.success;
        if (this.success == 1) {
          refresher.target.complete();
          // refresher.complete();
          let userDeatil = this.responseData.users_details;
          localStorage.setItem('userData', JSON.stringify(userDeatil));
          for (let data1 of userDeatil) {
            this.userStatus = data1.status;
            localStorage.setItem('userStatus', JSON.stringify(this.userStatus));
            console.log("userStatus" + this.userStatus);
          }
          if(this.userStatus == 1){
            window.location.reload();
          }
        } else {
          this.message = this.responseData.message;  
          refresher.target.complete();
          this.showToast(this.message);
        }
      }, (err) => {
        refresher.target.complete();
        console.log("Error", err);
      });
    } else{
      refresher.target.complete();
      console.log("User is already approved: " + this.userData.userStatus);
    }
  }

Posts: 1

Participants: 1

Read full topic

@LazCoder wrote:

Hello, I have been having a build issue related to Google Services version for a few days. How can I solve this problem?

Ek Açıklama 2020-03-11 1453241085×672 122 KB

Posts: 1

Participants: 1

Read full topic

@andrenosaurio wrote:

Hola cree una PWA con Ionic 4, al cargarla por el navegador perfecto, se instala normal, el problema esta cuando trato de entrar a la PWA ya instalada, le hago click al icono, carga el splash y sale un mensaje que dice “No se puede conectar con el sitio”, pero si se conecta por que si espero dos segundos desaparece el mensaje y entra normal.

como puedo quitar ese mensaje?

gracias

Posts: 1

Participants: 1

Read full topic

@vicatcu wrote:

While I can scroll by swiping up and down on a page that overflows the viewport, it may be non-obvious in some cases that there is more content below-the-fold. In such cases, I would like to make it abundantly clear that the user can scroll down, when in fact they can. I can’t quite work out how to make that happen in ionic 4 on the mobile targets (including device emulation in chrome dev-tools, which fleetingly shows the scrollbar while scrolling, but hides it when inactive). Anyone got a solution for this?

Posts: 1

Participants: 1

Read full topic

@selmo47 wrote:

I use Inexed-DB in ionic3 application in some cases, some IDB nodes are deleted by the userAgent. in MDN, i found a method navigator.storage , that persists the storage and prevents the userAgent from deleting in case of storage pressure

I try to run this in my ionic 3 code like:

declare var navigator;
navigator.storage.persist().then(function(persistent) {
      if (persistent)
        console.log("true");
      else
        console.log("false");
    });

but i got always

false

Is ther any way to persist it (such as permissions or any thing else)

these links may help:
Chrome Persistnet storage

StorageManager.persist() Reference

Posts: 1

Participants: 1

Read full topic

@ctfrancia wrote:

I have a chat dashboard, and whenever a new private message arrives the new item is created. However, once created if there is a new message that arrives the css is not changed unless I move to another page and then come back to the page in question, then the css is updated accordingly, I believe the issue has to do with Angular change detection and no matter what I try to do it doesn’t seem to work.

chatdashboard.html

 33     <ng-container *ngFor="let doctor of peerConversations$ | async">
 32       <message-list (click)="openConversation(doctor)" (press)="peerConversationOptions(doctor)" [peerConversations]="doctor"
 31         [isPeerChat]="true">
 30       </message-list>
 29     </ng-container>
 28   </ng-container>

message-list.ts

    5 @Component({
    6   selector: 'message-list',
    7   templateUrl: './message-list.component.html',
    8   styleUrls: ['./message-list.component.scss'],
    9   changeDetection: ChangeDetectionStrategy.OnPush,
   10 })
   11 export class MessageListComponent implements OnInit {
   12   @Input() public messageStatus: string;
   13   @Input() public groupConversation: GroupDashboard;

   18   public peerConversation: ChatDashboard;
   19   @Input() public set peerConversations(peer) {
   20     this.peerConversation = peer;
   21     this.changeDetect.markForCheck();
   22   }

message-list.html

<ng-container *ngIf="isPeerChat">
 43   <ion-grid>
 42     <!-- <ion-row [class]="style"> -->
 41     <ion-row [ngClass]="{
 40         urgent: peerConversation.unreadMessages.urgent > 0,
 39         normal: peerConversation.unreadMessages.urgent === 0 && peerConversation.unreadMessages.normal > 0
 38       }"> 

so the elements css isn’t being dynamically changed depending on the message received that isn’t read. I hope I explained it well enough.

Posts: 1

Participants: 1

Read full topic