Hello there,

I’m transforming a react project into an ionic project.
I build my commits with Appflow and preview the web. When I run the project over Ionic Hub, it cannot connect to the API and returns an error. (Network Error)
I download the project as a zip file and distribute it over IIS. I do not have any problems here. What can be the problem?
I don’t think there is a problem with Cors. Because it wouldn’t work on my own IIS either.

I made the following setting in the capacitor.config.json file, but it didn’t work.
"server": {
** “allowNavigation”: “[‘http://web.com’]”**
** },**
Then I entered the proxy information as below in the package.json file, but that didn’t work for me either.
"proxy": "http://web.com"

Then I added the following settings for the axios library that I connected to the API. But there was no solution for me.

axios.defaults.baseURL = API_URL;
** axios.defaults.headers.post [‘Content-Type’] = ‘application / json; charset = utf-8’;**
** axios.defaults.headers.post [‘Access-Control-Allow-Origin’] = ‘*’;**

I want to deploy a React project with Ionic for mobile devices. However, I have to overcome such problems.

1 post - 1 participant

Read full topic

I am trying to log into the Ionic CLI so that I can link my Appflow app. My Ionic account uses GitHub SSO for authentication, when I enter my GitHub credentials into the CLI, it says that the email or password is incorrect - I am entering the correct email and password.

Is there something else I need to do to be able to log into the CLI?

Thanks,
Dan

1 post - 1 participant

Read full topic

Code walkthrough of the photo gallery tutorial in ReactJS using Firebase and React-Query. ReactQuery is using to simply state management around fetching and updating your data

Video

Source code for the two versions are available

• Firebase Only: https://buff.ly/2WCLNwF

• Firebase w/ ReactQuery: https://buff.ly/3rt26KS

1 post - 1 participant

Read full topic

Hello everyone and sorry for my bad English. I am developing an APP in Ionic 5 / Cordova, which must display VR 360 videos, using the cardboard. I can’t find a viewer for these types of videos. Can someone give me some indications, even of paid plugins.
Thanks

1 post - 1 participant

Read full topic

Every time I try to give the command

ionic cordova build android

presents me the following error

Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=C:\Users\Mairom\AppData\Local\Android\Sdk (recommended setting)
ANDROID_HOME=C:\Users\Mairom\AppData\Local\Android\Sdk (DEPRECATED)
Using Android SDK: C:\Users\Mairom\AppData\Local\Android\Sdk
Subproject Path: CordovaLib
Subproject Path: app
> Task :app:processDebugResources FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugResources'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
   > Android resource linking failed
     AAPT: error: failed writing to 'C:\Users\Mairom\Desktop\APLICATIVOS\-- HIBRIDOS\ionic\proDelivery\platforms\android\app\build\intermediates\runtime_symbol_list\debug\R.txt': Os dados são inválidos. (13).



* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1m 31s
16 actionable tasks: 1 executed, 15 up-to-date
Command failed with exit code 1: C:\Users\Mairom\Desktop\APLICATIVOS\-- HIBRIDOS\ionic\proDelivery\platforms\android\gradlew cdvBuildDebug -b C:\Users\Mairom\Desktop\APLICATIVOS\-- HIBRIDOS\ionic\proDelivery\platforms\android\build.gradle
[ERROR] An error occurred while running subprocess cordova.

        cordova.cmd build android exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

help plis

1 post - 1 participant

Read full topic

Good evening. I am developing an app with ionic cli 5.4, cordova, gradle 6.7 with android sdk 9.0. I would like to build the application using android sdk 5.0.0, but even when I delete the version of sdk 9, leaving only what I want in the android studio folder, assigning the gradle and sdk path as global windows variables or giving commands set ANDROID_HOME and GRADLE_HOME, when I give the command ionic cordova platform add android@5.0.0 he cannot find the sdk

1 post - 1 participant

Read full topic

I was given the task to set up our application to run with a root context. Instead of http://somehost/index.html, it should run with http://somehost/ourapp/index.html. I was able to set this up with Angular correctly using the command line options base-href and deploy-url:

ng build --prod --base-href /ourapp --deploy-url /ourapp/

The application is deployed to IBM IHS (basically Apache) in a subfolder called “ourapp” in the document root. The application can be reached fine with http://host/ourapp, but the ion-searchbar cannot find its own icon, the console prints:

GET http://host/svg/ios-search.svg 404 (Not Found)

, which makes sense because the icons are actually at http://host/ourapp/svg/ios-search.svg.

This is what I have in angular.json for these assets:
“assets”: [
{
“glob”: “/*",
“input”: “src/assets”,
“output”: “assets”
},
{
“glob”: "/*.svg”,
“input”: “node_modules/ionicons/dist/ionicons/svg”,
“output”: “./svg”
},

And these are the relevant versions (I just got this from another developer so I’m not sure if this makes sense):

“dependencies”: {

"@angular/common": "~8.1.2",

"@angular/compiler": "~8.1.2",

"@angular/core": "~8.1.2",

"@angular/forms": "~8.1.2",

"@angular/platform-browser": "~8.1.2",

"@angular/platform-browser-dynamic": "~8.1.2",

"@angular/pwa": "^0.803.16",

"@angular/router": "~8.1.2",

"@angular/service-worker": "~8.1.2",

"@ionic-native/core": "^5.0.0",

"@ionic-native/splash-screen": "^5.0.0",

"@ionic-native/status-bar": "^5.0.0",

"@ionic/angular": "^4.7.1",

Is there some additional configuration I need to take care of for Ionic to find the icons in the correct location?

Thanks,
Peter

1 post - 1 participant

Read full topic

Hello
I develop an app, and would be grateful for your help.

1. Providing variables with setup() there only right way to make them reactive? There is no data-section as in vanilla vue?
2. How access to component variables from methods? Now I use passing as parameter when it called from template, is this right way?
3. How to use router.push in setup() and inside methods?
4. How create component variable with data from Storage? It still empty after assignment in setup().

1 post - 1 participant

Read full topic

ERROR Error: Uncaught (in promise): TypeError: WEBPACK_IMPORTED_MODULE_2_rxjs_Observable.Observable.fromEvent is not a function
TypeError: WEBPACK_IMPORTED_MODULE_2_rxjs_Observable.Observable.fromEvent is not a function
at new SuperTabs (super-tabs.js:136)

My rxjs version is :

“rxjs”: “^6.3.2”,
“rxjs-compat”: “^6.3.2”

I have modified super-tabs.d.ts and super-tabs.js with following imports

import { Observable } from ‘rxjs/Observable’;
import ‘rxjs/add/observable/fromEvent’;

But still gets the same error.

Is there any other solution ??

Other Configurations:
Ionic Framework: 3.9.2
Ionic App Scripts: 3.2.4
Angular Core: 5.2.10
Angular Compiler CLI: 5.2.10
Node: 15.4.0
OS Platform: Linux 5.4
Navigator Platform: Linux x86_64

1 post - 1 participant

Read full topic

Hi,

Is it possible to use Custom hooks in Ionic? I am not talking about the ones included in capacitor core, like useGeolocation. I am talking about react custom hooks, for example

const useField = (type: any) => {
  const [value, setValue] = useState('')

  const onChange = (event: any) => {
    setValue(event.target.value)
  }

  return {
    type,
    value,
    onChange
  }
}

const App = () => {
const person = useField('text')
}

Thanks

1 post - 1 participant

Read full topic

Hello to all

I’m struggling with this issue, for fcm integration i’ve followed this tutorial:

https://www.positronx.io/ionic-firebase-fcm-push-notification-tutorial-with-example/

all go well till to the compilation, when i received first a warning:

FCMPlugin: Support for Gradle v4 or lower is deprecated. Please upgrade to a newer version.

and successively the build fail with this message:

FAILURE: Build failed with an exception.

• What went wrong:
  A problem occurred configuring project ‘:app’.
  Could not create task ‘:app:processDebugGoogleServices’.
  Cannot create a proxy class for abstract class ‘GoogleServicesTask’.

my ionic info are:

Ionic:

Ionic CLI : 5.4.2 (C:\Users\Programmazione\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.11.7
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0

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.2, (and 10 other plugins)

Utility:

cordova-res : 0.15.1
native-run : 0.2.9

System:

Android SDK Tools : 26.1.1 (C:\Users\Programmazione\AppData\Local\Android\Sdk)
NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10

Thanks in advance for any suggestion

1 post - 1 participant

Read full topic

I am trying Ionic + Vue3 and just want to know how to change these colours in the screenshot for Android (specifically Pixel 5)? I’m sure it’s a simple change but it’s all new to me!

Thanks!

image1088×2354 109 KB

1 post - 1 participant

Read full topic

I installed @ionic/vue @ionic/core and vue-router using npm and imported them in my main.js using

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import IonicVue from '@ionic/vue';

createApp(App).use(router).use(IonicVue).mount('#app');

The routing works and there are no errors. But when I use this tag in the About-View:
<ion-button>Button</ion-button>
it just displays the text “Button”

Any idea how to get it working?

1 post - 1 participant

Read full topic

Are there any events for this 2 buttons?

I just want to catch this buttons for 1 purpose, and onPause and onResume they do not serve me because onPause is activated when screen is bloqued, or power on button is pressed, i don’t want execute nothing in last cases, just i want to control minimize intentionally by these buttons.

Regards,

Samuel

1 post - 1 participant

Read full topic

When writing a plugin in iOS, I see the native function can return one of these types as defined in CAPBridgedPlugin.h. Here are all of the return types:

#define CAPPluginReturnNone @"none"
#define CAPPluginReturnCallback @"callback"
#define CAPPluginReturnPromise @"promise"
#define CAPPluginReturnWatch @"watch"
#define CAPPluginReturnSync @"sync" // not used

My questions are:

1. What is CAPPluginReturnWatch and how does it work?
2. Why does CAPPluginReturnSync have the “not used” comment beside it?

1 post - 1 participant

Read full topic

Please recommend an SVG Editor that works with Ionic / Ionic native - Angular

1 post - 1 participant

Read full topic

In the code excerpt below there are two inputs, each with a label.
In the first, the select input is displayed on the far right of the page.
In the second, the text input is to the left, immediately to the right of its the label.
How can I make this text input also right-align? This is a popup form to add a record and I would like all the inputs to line up the same way, labels on the left, inputs on the right.

    <ion-item>
      <ion-label>Strategy</ion-label>
      <ion-select interface="popover">
        <ion-select-option>..(dynamic list of options).</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label position="inline">Value</ion-label>    
      <ion-input placeholder="Estimated value"></ion-input>
    </ion-item>

I tried the solutions suggested in this page: https://stackoverflow.com/questions/47221045/align-text-in-ion-input-ionic-2

Thanks.

1 post - 1 participant

Read full topic

Using this main.js:

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
import './ionic-variables.css';

const app = createApp(App);
app.use(router);
app.use(Ionic);
app.config.productionTip = false
app.mount('#app');

I always get this error:

1 post - 1 participant

Read full topic

So far I’m able to receive my product information for an iOS device but not Android.

Here is my code in the component module:

registerProduct() {
    this.inAppPurchase.verbosity = this.inAppPurchase.DEBUG;
    this.inAppPurchase.register({
      id: 'android.prod',
      type: this.inAppPurchase.NON_CONSUMABLE
    });
    this.registerHandlersForPurchase('android.prod');
    this.inAppPurchase.refresh();
  }

  registerHandlersForPurchase(productId) {
    const self = this.inAppPurchase;
    this.inAppPurchase.when(productId).updated((product) => {
      if (product.loaded && product.valid && product.state === self.APPROVED && product.transaction != null) {
        product.finish();
      }
    });
    this.inAppPurchase.when(productId).registered((product: IAPProduct) => {
      // alert(` owned ${product.owned}`);
    });
    this.inAppPurchase.when(productId).owned((product: IAPProduct) => {
      // alert(` owned ${product.owned}`);
      product.finish();
    });
    this.inAppPurchase.when(productId).approved((product: IAPProduct) => {
      // alert('approved');
      product.finish();
    });
    this.inAppPurchase.when(productId).refunded((product: IAPProduct) => {
      // alert('refunded');
    });
    this.inAppPurchase.when(productId).expired((product: IAPProduct) => {
      // alert('expired');
    });
  }```

This is the console log

[store.js] DEBUG: state: android.prod -> registered
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2012 [store.js] DEBUG: store.trigger -> triggering action refreshed
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2781 InAppBilling[js]: setup ok
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2781 InAppBilling[js]: load ["android.prod"]
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2781 InAppBilling[js]: listener: {"type":"ready","data":{}}
/pages-profile-profile-module-es2015.js:178 this.currentUser Ice Berg
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2012 [store.js] DEBUG: plugin -> ready
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2781 InAppBilling[js]: getAvailableProducts()
unpkg.com/ionicons@4.5.10-0/dist/ionicons/svg/ios-chevron-forward.svg:1 Failed to load resource: the server responded with a status of 404 ()
/pages-profile-profile-module-es2015.js:210 ionViewDidEnter
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2012 [store.js] DEBUG: plugin -> loaded - []
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2012 [store.js] DEBUG: state: android.prod -> invalid
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2012 [store.js] DEBUG: iabGetPurchases()
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2781 InAppBilling[js]: getPurchases()
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2781 InAppBilling[js]: listener: {"type":"setPurchases","data":{"purchases":[]}}
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2012 [store.js] DEBUG: iabSetPurchases: []
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2012 [store.js] DEBUG: inappbilling.getPurchases() -> Success
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2012 [store.js] DEBUG:                             -> object
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2012 [store.js] DEBUG:                             -> []
/plugins/cc.fovea.cordova.purchase/www/store-android.js:2012 [store.js] DEBUG: iabUpdatePurchases: []

Run code snippet

The difference in iOS is that this is valid: [store.js] DEBUG: state: android.prod -> valid

and when I naviage to the page here is the code:

  setupProducts() {

    this.androidProduct = this.inAppPurchase.get('android.prod');
    console.log('product reg', JSON.stringify(this.androidProduct));
  }

product reg {"id":"android.prod","alias":"android.prod","type":"non consumable","group":"","state":"invalid","title":null,"description":null,"priceMicros":null,"price":null,"currency":null,"countryCode":null,"loaded":true,"canPurchase":false,"owned":false,"introPrice":null,"introPriceMicros":null,"introPricePeriod":null,"introPriceNumberOfPeriods":null,"introPricePeriodUnit":null,"introPriceSubscriptionPeriod":null,"introPricePaymentMode":null,"ineligibleForIntroPrice":null,"discounts":[],"downloading":false,"downloaded":false,"additionalData":null,"transaction":null,"valid":false}

One thing I've read in the searching for solutions is a BILLING_KEY...but there's no billing_key in the Google Play Console. I've added my product to Google Play and I've uploaded my .apk into the Closed Testing Beta Track.

My InApp product shows Active in Google Play Console.

ionic -v 6.0.1

cordova -v 9.0.0 (cordova-lib@9.0.1)

"cc.fovea.cordova.purchase": "^10.1.1",

So I'm not sure how to register the Android product so that it's active instead of inactive and retrieve the product information.

Any help would be greatly appreciated.

1 post - 1 participant

Read full topic

Hello developers, I’ve been with this same problem for months and I still can’t find a solution. I have an application where there are several forms, when focusing on an input field the keyboard covers this input field and the user cannot see anything. This only happens on ios, on android everything works normal.

In this application I am using ionic 5 with capacitor.

This is how I would like my application to work: https://i.stack.imgur.com/DEEiA.gif

It is currently working like this: https://i.stack.imgur.com/23DoT.gif

.HTML

<form [formGroup]="formSubmit" (ngSubmit)="formSubmit()">      
  <mat-form-field appearance="outline" class="field-style">
    <input matInput maxlength="35" class="input-form" placeholder="Agregar un alias (opcional)" formControlName="alias">
  </mat-form-field>
  <button mode="ios" class="btn-siguiente-enable" expand="block" type="submit" *ngIf="formSubmit.valid">Siguiente</button>    
</form>

.TS

ngOnInit() {
    this.initForms();

    Plugins.Keyboard.setScroll({isDisabled: true});

    Plugins.Keyboard.addListener('keyboardWillShow', (info: KeyboardInfo) => {
      Plugins.Keyboard.setResizeMode({mode: KeyboardResize.None});
    });

    Plugins.Keyboard.addListener('keyboardWillHide', () => {
      Plugins.Keyboard.setResizeMode({mode: KeyboardResize.Native});
    });
  }  

Any idea how to solve this?

1 post - 1 participant

Read full topic