@Sweg wrote:

I have 3 ion-cols below, with an ion-button in each.

As you can see from the image, they are not evenly spread across the screen:

Here is my current HTML:

    <ion-row class="bottom-bar">
      <ion-col>
        <ion-button fill="clear" size="small" color="danger" class="border-right">
          <ion-icon slot="start" name="thumbs-up"></ion-icon>
          <small>12</small>
        </ion-button>
      </ion-col>
      <ion-col>
        <ion-button fill="clear" size="small" color="danger" class="border-right">
          <ion-icon slot="start" name="text"></ion-icon>
          <small>12 Comments</small>
        </ion-button>
      </ion-col>
      <ion-col>
        <ion-button fill="clear" size="small" color="danger">
            <small>12 minutes ago</small>
        </ion-button>
      </ion-col>
    </ion-row>

In order to spread the buttons across the page evenly, I tried to add expand="full" to each ion-button, but that doesn’t change anything.

Can someone please tell me what changes are required for this?

Posts: 1

Participants: 1

Read full topic

@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

@alaswer wrote:

Hi everyone,

I’m fairly new to capacitor and I want to use Capacitor Local Notifications, I try to avoid Cordova version because it has some issues on both Android and iOS.

My implementation for registering the action types:

LocalNotifications.registerActionTypes({
        types: [
          {
            id: 'FEEDBACK_RES',
            actions: [
              {
                id: 'survey',
                title: 'Take Survey'
              },
              {
                id: 'dismiss',
                title: 'Remind Me Later',
                destructive: true,
              }
            ]
          }
        ]
      });

The problem:
On iOS, the button Remind Me Later with the property destructive: true works as intended which is dismissing the notification, however on Android, it just takes me to the app while I want it to dismiss the notification.

I really hope anyone can help me on this, thank you very much!

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

@aliexalter wrote:

Hi,
Our organization bought Growth plan team license. We cannot see Teams icon under organization. Is it because we have updated our trial to Growth plan? Do we need to create new organization?
Also having 2 members in organization both cannot login to ionic studio it says upgrade plan.
Please help.

Kind regards

Posts: 2

Participants: 1

Read full topic

@Pedrosss wrote:

I try build my app on ios and getting this error:

ERROR: Preparation failed: The name ‘runner-c93ac604-project-0-concurrent-0’ already exists.
Some tips? Thank you

Posts: 1

Participants: 1

Read full topic

@sikfreeze wrote:

Hi there,

I just started to dig in to capacitor to create my application for Android and Windows Desktop. However, I need my application to start full-screen on both platforms, 100% no status bar, tool bar, etc. Is that possible with capacitor?

Thanks

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

@Rahul635 wrote:

ionic 3 image noitification,
How we solve it.

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: 1

Participants: 1

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: 1

Participants: 1

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