Realized some type of Apple Clips styled cards

https://output.jsbin.com/luqaxud

1 post - 1 participant

Read full topic

Hi, I m working with google plus login in my ionic project, but I am facing an issue called “10”. I tried with client id, web client id but did not work. I searched a lot but did not find a helpful post. Please help, thanks!

1 post - 1 participant

Read full topic

Hello, am having a rare exception on one of my apps that are currently in use. The app works fine on most of devices, but there are some devices that it dont, the app install but does not run. Im using sentry and im receiving the next exception

RuntimeException

failed to set system property

• android.os.SystemProperties in native_set

• android.os.SystemProperties in set at line 183

• me.phh.treble.app.QtiAudio$startup$1 in invoke at line 67

• me.phh.treble.app.QtiAudio$startup$1 in invoke at line 14

• kotlin.concurrent.ThreadsKt$thread$thread$1 in run at line 30

In some devices the app get stuck on splashscreen but i dont know if it is the same problem. I really appreciate any help. Thanks in advance

1 post - 1 participant

Read full topic

Hello everyone!

As you can see in the video, page is shifted 50% to the left after navigating, and then gets back to normal.
Navigation is fine in browser, this only happens on IOS

Any help is welcome!

Ionic info:

Ionic:

Ionic CLI : 6.0.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 4.11.10
@angular-devkit/build-angular : 0.802.2
@angular-devkit/schematics : 8.2.2
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 1.5.2
@capacitor/core : 1.5.2

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (2 plugins total)

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v12.15.0 (/usr/local/bin/node)
npm : 6.13.4
OS : macOS Catalina
Xcode : Xcode 11.5 Build version 11E608c

1 post - 1 participant

Read full topic

I’m using react-hook-form for form validations. When I use normal DOM as Input element the reset works fine. But when I use IonInput as Controller element, after submission Input values cleared but the errors are still visible.

import { IonItem, IonLabel, IonText, IonInput, IonButton, IonGrid, IonRow, IonCol } from '@ionic/react';
      import React, { useRef, useState, useEffect, useContext } from 'react';
      import { useForm, Controller } from "react-hook-form";
  
  const defaultValues = {
    name: "",
    email: ""
  };
  
  const ContactForm: React.FC = () => {
    const { control, errors, handleSubmit, reset, formState  } = useForm({
      defaultValues: { ...defaultValues },
      mode: "onChange"
    });
  
    const showError = (_fieldName: string, msg: string) => {
      let error = (errors as any)[_fieldName]; 
      return error ? (
        (error.ref.name === _fieldName)? (
          <div className="invalid-feedback">
          {error.message || `${msg} is required`}
        </div>
        ) : null
      ) : null;
    };

    const onSubmit = (data: any, e: any) => { console.log(data);
        console.log(errors);
        // reset({ name: '', email: '', company: '', phone: '', message: '' });
        reset(defaultValues);
    }
  
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <IonGrid>
                <IonRow>
                <IonCol>
                    <IonItem class="ion-no-padding">
                        <IonLabel position="stacked">Name <IonText color="danger">*</IonText></IonLabel>    
                        <Controller
                            as={IonInput}
                            control={control}
                            onChangeName="onIonChange"
                            onChange={([selected]) => {
                            return selected.detail.value;
                            }}
                            name="name"
                            placeholder="John"
                            defaultValue=""
                            rules={{
                            required: true,
                            pattern: {
                                value: /^[A-Z0-9 ]{2,25}$/i,
                                message: "Invalid Name"
                            }
                            }}
                        />
                    </IonItem>
                    {showError("name", "Name")}
                </IonCol>
                </IonRow>

                <IonRow>
                <IonCol>
                    <IonItem class="ion-no-padding">
                        <IonLabel position="stacked">Email <IonText color="danger">*</IonText></IonLabel>
                        <Controller
                            as={IonInput}
                            control={control}
                            onChangeName="onIonChange"
                            onChange={([selected]) => {
                            return selected.detail.value;
                            }}
                            name="email"
                            placeholder="john@example.com"
                            rules={{
                            required: true,
                            pattern: {
                                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                                message: "Invalid Email Address"
                            }
                            }}
                        />
                        </IonItem>
                        {showError("email", "Email")}
                </IonCol>
                </IonRow>
                    
            </IonGrid>
            
            <IonButton className="ion-margin-top" expand="block" type="submit">
                Submit
            </IonButton>
        </form>
       );
     };
  
      export default ContactForm;

Anyone can help this?

1 post - 1 participant

Read full topic

Can anyone tell me how to use PHP database as a back end in ionic 4 android app?

I am developing ionic 4 android app (using cordova) it includes CRUD operations.

1 post - 1 participant

Read full topic

Hi community,

I am trying to increase the padding for the ion-item-option because i need this options to be bigger since the users are using gloves and options might be a little too small. I have tried several ways but i do not see --padding-start option for this element on the documentation.

Thanks in advance.

1 post - 1 participant

Read full topic

Is there a working SAML authentication solution for Ionic? We need to build an app that uses SAML authentication to access our enterprise ADFS.

1 post - 1 participant

Read full topic

Is there any way to set the ion-back-button text font size?

I am able to set the icon size with CSS variables, but can’t find a way to set the text size.

I am using ionic v5.

Thanks.

1 post - 1 participant

Read full topic

I have developed an app which uses facebook login.
I used ionic facebook plugin with firebase user authentication.
The app perfectly working with devices Facebook app is not installed. If facebook app is installed in a device plugin open the login view through the facebook app and it is not working.
Is there any way to bypass the FacebookApp even if it’s installed and just go like Facebook app is not installed in the device?

this.fb.login([‘email’])
.then((response: FacebookLoginResponse) => {
this.onfbLoginSuccess(response);
console.log(response.authResponse.accessToken);
}).catch((error) => {
console.log(error.errorMessage)
window.alert(error.errorMessage)
});

1 post - 1 participant

Read full topic

Hi Everyone,

I am using Ionic 4 and using geolocation plugin to read device’s location. I followed all instruction given in official website, even though when I deploy app in read device its giving error as.

1 post - 1 participant

Read full topic

We use Angular and Ionic 4 for an application, and we need to navigate to a specific page by passing through others to create a router history.

As of now, we allow the user to go back using the back button, we had to create a stack of routes and go through them, but we can see on screen the navigation happening automatically through all of the routes, which is a terrible UX.

Here’s a piece of the code for the routes:

public async navigateRoutes() {
    await this.navCtrl.navigateRoot([routes.root]);
    for (let i = 0; i < routes.history.length; i++) {
        await this.router.navigate([routing.history[i]]);
    }
 }

Thinking about it, what else I’d love how to know how to do is how to insert routes into router history, but only navigate to the last one.

Any thoughts?

1 post - 1 participant

Read full topic

0

I am a IONIC newbie I have following function that returns membership plan.

async getMembership(){
await this.Products.WooCommerceAPI().get(‘memberships/plans’).then( (data) => {
this.plans = data.data.map(e => ({

   // used spread method here to call another function that gets the price 
    ...e,
    price: this.getPlanPrice(e.access_product_ids[0]).then(async (res) => {
      return  await res;
    }),
  }));
}).catch((error) => {
  // Invalid request, for 4xx and 5xx statuses
  console.log('Response Status:', error.response.status);
  console.log('Response Headers:', error.response.headers);
  console.log('Response Data:', error.response.data);
})
.finally(() => {
  // Always executed.
});
console.log(this.plans);

}

in this function I used another function that gets price of each membership using ... spread method.

    async getPlanPrice(id): Promise<any> {
    if (id !== undefined) {
      return await this.Products.WooCommerceAPI().get('products/' + id).then(data => {
        return data.data;
      });
    } else {
      return 0;
    }
  }

but the problem is

price: this.getPlanPrice(e.access_product_ids[0]).then(async (res) => {
          return  await res;
        }),

this part return [Object Promise] I have tried everything but can’t get price for example 500 insdeat of this object promise.

1 post - 1 participant

Read full topic

Hi,
I’m using the plugin AppAvailability to check if an app is installed on a device.

I’m using it in this way:

    this.appAvailability.check(appUrl).then(flag => {
      console.log('--->appAvailability-flag:', flag);
      this.isAppAvailable = flag;
    });

Where appUrl is “newapp://” for Android and “com.newapp.stag” for iOS.

On Android it works, on iOS I have the error:

-canOpenURL: failed for URL: "newapp://" - error The operation could not be completed (OSStatus error -10814)
THREAD WARNING: ['AppAvailability'] took '14.01' ms. Plugin should use a background thread.

I’ve added to Info.plist (as described in https://github.com/ohh2ahh/AppAvailability and in https://medium.com/@guanshanliu/lsapplicationqueriesschemes-4f5fa9c7d240) the string “newapp” to the array LSApplicationQueriesSchemes, but I still get the same error.

Which could be the problem according to you?
Is still possible on iOS to check is an App is available?

Thank you

cld

1 post - 1 participant

Read full topic

My requirement:
Show time picker within the range of 60 minutes.
(i.e) from now till next 60 minutes - user shall select a time.

Challenge / Problem :
In general it works fine, except one scenario.
If the user opens the time picker by 11:00 PM - the picker is not showing any value.
(i.e) as the maximum value for this case falls on the next day - the picker values are not showing properly.

Any help on this - would be really appreciable.

My html -
<ion-datetime picker-format=“HH:mm” [min]=“minTime” [max]=“maxTime” (ionFocus)=“setMinMaxTime()” >

js/ts file -
setMinMaxTime() {
this.minTime = (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString();
this.maxTime = (new Date((new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).getTime() + 60 * 300 * 1000).toISOString());
}

1 post - 1 participant

Read full topic

I have an Android/Web project made with the last Ionic version fully functional, my last step is to make the iOS version, but since some news about ITMS-90809: Deprecated API Usage - Apple will stop accepting submissions of apps that use UIWebView APIs, I want to know if I will be able to public in Apple Store with Cordova and using just WKWebViewOnly or we need to full migrate to Capacitor?

Thanks for your attention.

1 post - 1 participant

Read full topic

I’m passing some data, which is an array of objects, from one component to a page. For this I’m using a service with a Subject and an Observable, like this:

myservice.service.ts

public mySubject = new Subject<{ data1:string, data2:number, data3: Object }[]>();
public myObservable = this.mySubject.asObservable();

I’m sending the data from the component to my page this way, which is the way I pass data from components and between pages from some time:

mycomponent.component.ts

this.myService.mySubject.next(myData);

And I’m receiving the data in my page this way:

mypage.page.ts

ngOnInit() {
	this.mySubscription = this.myService.myObservable.subscribe(data => {
		console.log(data); // I can see the data in console
		console.log(data.length); // Returns 0
	
		// process data
		...
	});
}

...

ngOnDestroy() {
	this.mySubscription.unsubscribe();
}

Well, my problem is that when I try to process the data, it is empty. If I check the data on the console, I can see that it is there, even though it appears with the empty array icon, but I can open it and see the info. Just below the size of this array is returned as 0, which suggests that the variable has not yet been populated at the time I am trying to process it, but is already populated by the time I check the console.

I would like to know a way to carry out the processing only when this variable is actually populated. This is the first time that something like this happens with this methodology, I imagine it is due to the size of the array (30 objects +).

1 post - 1 participant

Read full topic

Hi there, I’m not sure if I’m in the right place to ask this, but any help anyone can provide would be appreciated.

I’m developing a project using Cordova/Ionic 3, and I’m trying to add the javascript-obfuscator plugin following this guide.

I’ve installed the javascript-obfuscator package via NPM, I’ve got a config folder with a copy of webpack.config.js in that’s being recognised and used. I’ve added my plugin:

var JavaScriptObfuscator = require('webpack-obfuscator');

And in the plugins section:

  plugins: [
    new Dotenv({
      path: '.env.dev', // load this now instead of the ones in '.env'
      systemvars: true, // load all the predefined 'process.env' variables which will trump anything local per dotenv specs.
      silent: true // hide any errors
    }),
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    ionicWebpackFactory.getCommonChunksPlugin(),
    new JavaScriptObfuscator({
      stringArrayEncoding: 'base64'
    })
  ],

But when I run the ionic cordova run android command, I get the following output:

PS C:\MobileDev\sd-site-induction> ionic cordova build android
> ionic-app-scripts.cmd build --target cordova --platform android
[15:53:49]  ionic-app-scripts 3.2.4 
[15:53:49]  build dev started ...
[15:53:50]  clean started ...
[15:53:50]  clean finished in 7 ms
[15:53:50]  copy started ...
[15:53:50]  deeplinks started ...
[15:53:50]  deeplinks finished in 451 ms
[15:53:50]  transpile started ...
[15:54:04]  transpile finished in 13.94 s
[15:54:04]  preprocess started ...
[15:54:04]  preprocess finished in 1 ms
[15:54:04]  webpack started ...
[15:54:04]  ionic-app-script task: "build" 
[15:54:04]  TypeError: Cannot read property 'emit' of undefined 
TypeError: Cannot read property 'emit' of undefined
    at WebpackObfuscator.apply (C:\MobileDev\sd-site-induction\node_modules\webpack-obfuscator\dist\index.js:22:24)
    at Compiler.apply (C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\node_modules\tapable\lib\Tapable.js:375:16)
    at webpack (C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\node_modules\webpack\lib\webpack.js:33:19)
    at C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\dist\webpack.js:132:24
    at new Promise (<anonymous>)
    at runWebpackFullBuild (C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\dist\webpack.js:113:12)
    at webpackWorker (C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\dist\webpack.js:70:19)
    at Object.webpack (C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\dist\webpack.js:29:12)
    at bundleWorker (C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\dist\bundle.js:13:22)
    at Object.bundle (C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\dist\bundle.js:6:12)
[ERROR] An error occurred while running subprocess ionic-app-scripts.

Any ideas why this is happening, or what the error means?

Thanks,
bengrah

1 post - 1 participant

Read full topic

Since the last update, ionic v1 don’t load images on the iOS platform using the ng-src command. There is no problem on Android and WEB. The path I set is e.g.
Inside controller:
$ scope.uiData.showDaysImage = “img/main_menu_expand_selected.svg”
Later in html:

I also tried to create a new project from scratch with the help of a command:
ionic start myApp tabs --type ionic1
Images loaded with ng-src do not load there either

1 post - 1 participant

Read full topic

HI, I need some help. I need to use safariViewController to open a url inside the app. This is my code, the same as the documentation, but when i try the app in the xcode simulator it doesn’t work, nothing happens.

<a (click)="goUrl()"> OPEN </a>

goUrl(){
this.safariViewController.isAvailable()
  .then((available: boolean) => {
      if (available) {

        this.safariViewController.show({
          url: 'http://ionic.io',
          hidden: false,
          animated: false,
          transition: 'curl',
          enterReaderModeIfAvailable: true,
          tintColor: '#ff0000'
        })
        .subscribe((result: any) => {
            if(result.event === 'opened') console.log('Opened');
            else if(result.event === 'loaded') console.log('Loaded');
            else if(result.event === 'closed') console.log('Closed');
          },
          (error: any) => console.error(error)
        );

      } else {
        // use fallback browser, example InAppBrowser
      }
    }
  );
}

Any idea why??

1 post - 1 participant

Read full topic