Hi all,

I’m building a Ionic mobile app, which will be compiled as a native app on Android/iOS (so, not a PWA).

I was wondering if there is a way, using for example service workers, to also point to a remote source (which can be edited by the user) for the code (for example https://example.com/my-ionic-app, which will contain the “dist” folder contents) and use the service worker to fetch the updated code in order to upgrade the app without building and installing a new version?
I am not a service workers expert, the first obstacle that i can think of (maybe a blocking one) is that the local files are served with the localhost domain, and there is no way to specify another domain (much less a dynamic domain).

If this is impossible, what would be the correct approach? Using two webviews, one to show a minimal UI to insert the remote URL and then starting another webview to load a PWA from a remote URL?

Thanks in advance,
Dario

1 post - 1 participant

Read full topic

Been trying to make a prod APK from local android-studio and Appflow builds with NO success.
Debug build is done without any problem or warning but prod build is a NO-NO

I get the error:

Task :app:mergeDexRelease FAILED /XXXXX/android/capacitor-cordova-android-plugins/build/.transforms/0930188cce72c864bd49e96356aafb7a/classes/classes.dex, /XXXXX/android/app/build/intermediates/external_libs_dex/release/out/classes.dex","sources":[{"file":"/XXXXX/android/capacitor-cordova-android-plugins/build/.transforms/0930188cce72c864bd49e96356aafb7a/classes/classes.dex"}],"tool":"D8"}

* What went wrong: Execution failed for task ':app:mergeDexRelease'.

I followed all steps to create the necessary certificates to sign the apk, it does not feel like the issue is with the certificates.

For context I have a couple of plugins:

• "cordova-androidx-build": "^1.0.4",
  

• "cordova-plugin-androidx-adapter": "^1.1.3",
  

• "cordova-plugin-geolocation": "^4.1.0",
  

• "cordova-plugin-ionic": "5.4.7",
  

• "cordova-plugin-whitelist": "^1.3.4",
  

• “@mauron85/cordova-plugin-background-geolocation”: “^3.1.0”

UPDATE
Only removing cordova-plugin-background-geolocation I am able to go through the build

1 post - 1 participant

Read full topic

I am running into an issue with Capacitor’s convertFileSrc() method, specifically when running my android live reload development server.

I start with a file URI, like file:///storage/emulated/0/DCIM/Camera/20201210_010103.mp4. This one comes from the cordova MediaCapture plugin after recording a video, but I don’t think that matters.

I want to play this video back in the app using a <video /> element, so I am converting the file path to a web url using Capacitor.convertFileSrc(videoFile). However, since I’m running the app with android live reload, and for that I have to enable the external network interface option, it thinks the “host” is my dev machine’s IP and not localhost or whatever my phone would be.

I am running my live reload server using this command:

> ionic cap run -l android --external

And I am using the conversion method like this:

import { Capacitor } from '@capacitor/core';

// ...

const onTakeVideo = async () => {
    const { fullPath } = await captureVideo(); // file:///storage/emulated/0/DCIM/Camera/20201210_010103.mp4
    const videoUrl = Capacitor.convertFileSrc(fullPath); // http://<desktop_ip>:8100/_capacitor_file_/storage/emulated/0/DCIM/Camera/20201210_010103.mp4
}

And then I want to render the video like this:

<video src={videoUrl} {...otherProps} />;

I believe I am using the Capacitor method correctly, so is this just a flaw between Capacitor and the Ionic live dev server config, or have I missed something when running the server?

1 post - 1 participant

Read full topic

On Ionic-Angular, I have a problem with Ion-slides used in a modal and only on Safari.

When launching programmatically, in a modal, my component containing a slider, it opens properly and after a fraction of a second it moves by half the size of the modal and stays between two slides.
If I swipe manually to the last slide, eventually Safari manages to display it correctly.

Example here: https://app.latourneedesproducteurs.com/drivefermierdesaintvictor
Select a product and click on “Réserver” to open the modal.

Screenshot 2020-12-10 at 08.50.341174×1582 97.6 KB

I tried the *ngIf and the slides.update() as recommended by others, but nothing worked for me.
Chrome, Firefox and mobile apps are ok.

1 post - 1 participant

Read full topic

Hostnetindia is providing the best VPS hosting for your website. In this, you can enjoy many benefits as you have 1000 GB Bandwidth, Admin RDP Access, and much more features. VPS hosting is very user friendly and simple to use at the same time it is very cost-effective. You can easily use it according to your choice and it has become the choice for most of the small and medium business holders. You get a 24*7 support facility and you can ask your query at all times the team will be there for resolving your issues.

Best Regards,
Hostnetindia

1 post - 1 participant

Read full topic

When building Android on the Linux 2020.11 it says it will use Gradle 4.3.1 but it actually uses 6.5.

Can I force the Gradle version somehow?

This causes the error as a previous build using the 4.3.1 Gradle built correctly

Error log:

Unzipping /root/.gradle/wrapper/dists/gradle-6.5-all/2oz4ud9k3tuxjg84bbf55q0tn/gradle-6.5-all.zip to /root/.gradle/wrapper/dists/gradle-6.5-all/2oz4ud9k3tuxjg84bbf55q0tn
Set executable permissions for: /root/.gradle/wrapper/dists/gradle-6.5-all/2oz4ud9k3tuxjg84bbf55q0tn/gradle-6.5/bin/gradle

Welcome to Gradle 6.5!

Here are the highlights of this release:

• Experimental file-system watching
• Improved version ordering
• New samples

For more details see https://docs.gradle.org/6.5/release-notes.html

Starting a Gradle Daemon (subsequent builds will be faster)

Configure project :app
Adding classpath: com.google.gms:google-services:4.2.0

FAILURE: Build failed with an exception.

• Where:
  Build file ‘/builds/MySilentDiscoClub/SilentDisco/platforms/android/app/build.gradle’ line: 424

• What went wrong:
  A problem occurred evaluating project ‘:app’.

Failed to apply plugin [id ‘com.google.gms.google-services’]
Cannot add extension with name ‘googleServices’, as there is an extension already registered with that name.

• 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.

1 post - 1 participant

Read full topic

Hi!

I played around with navigation in Ionic based on this content:

With an Angular Guard I can prevent/enable page activation. Lets say I would like to prevent/enable navigation based on Id, i can choose between the following scenarios:

• Navigation happens with route parameter

  this.router.navigate(['inside/list/details', this.myid]);
  

  Inside canActivate i check if the id is there or not, like this:

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const selectedId = route.paramMap.get('id');
    console.log(selectedId) // Print out myid
    ...
  }
  

• Navigation happens with queryParams

  let navigationExtras: NavigationExtras = {
    queryParams: {
      id: this.myid
    },
    queryParamsHandling: 'merge'
  };
  this.router.navigate(['inside/list/details'], navigationExtras);
  

  Inside canActivate i check if the id is there or not, like this:

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const selectedId = route.queryParams.id;
    console.log(selectedId) // Print out myid
    ...
  }
  

• Navigation happens with extras

  let navigationExtras: NavigationExtras = {
    state: {
      id: this.myid
    }
  };
  this.router.navigateByUrl('inside/list/details', navigationExtras);
  

  Inside canActivate i check if the id is there or not, like this:

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const currentNavigation = this.router.getCurrentNavigation(); //Requires 'private router: Router' in the constructor
    const selectedId = currentNavigation.extras.state.id;
    console.log(selectedId) // Print out myId
    ...
  }
  

However, if i navigate from this page to an another one, and from there i navigate back to the details page using <ion-back-button defaultHref="inside"></ion-back-button>, the guard will run again.
There is no problem with that in case of route parameter or queryParams but if prevoiusly i used extras, then the guard will fail. In every case the data is there where it should be but if i used NavigationExtras state to transfer the id before, then i can not get it from anywhere.

I’m trying to get the data in a wrong way or backward navigation with ionic-back-button has some issue with extras?
Many thanks in advance!!

1 post - 1 participant

Read full topic

Hi,

I’m using an API and Firebase into my Ionic project. All is working well in Ionic.

However, when I open it in Android Studio by Capacitor, I dont’ get data from API and Firebase. All others features which don’t need internet is well working. I added these lines in Android Studio side

But nothing changed.

Many thanks for your help

1 post - 1 participant

Read full topic

Hello Guys,

I would like to use some cordova-plugins (e.g. cordova-plugin-camera) in Ionic 5 in my Mobile Browser.

If I view the website in Android Chrome Browser (Developer Mode) it says the following:

“/vendor-es2015.js:126829 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator”

My question is:
Is the browser support the Cordova Plugin or it is supported only if it is in the Android / IOS App packaged?

The following command were also executed in my projcect:
ionic cordova platform add browser

which added a directory “platforms/browser” (whic contains basically cordova.js)
This directory is also in my project directory…but the same result.

If I run “ionic cordova run browser” then on my desktop the camera is active but in mobile browser the .js missing…

any links? or same experience?

ThanksCsaba

1 post - 1 participant

Read full topic

Hey guys, love Ionic for Vue, but I find the resources on the net very lacking in terms of how to implement stuff in Vue (with Capacitor). We are making an app in which we need push notifications. We have our own server so “pushing” is no problem, the problem we are having is that we have no clue where to start in (Ionic) Vue.

We need to listen to specific sockets I guess for incomming messages. User needs to give permissions for push notifications, stuff like that.

Is there anyone who got push notifications working and would be able to write a small step-by-step guide on how to get something like this working?

We do not want to use a 3rd-party or anything for push notifications since we have our own server and we are able to send pushes no problem. Just need to know how to implement it in Vue.

2 posts - 2 participants

Read full topic

Hi all,

I’m facing a problem with redirecting to my capacitor android/ios app after login with angular oauth2 oidc.
I’m using identity server with angular-oauth2-oidc lib to authenticate my users. This works very well when i test with ionic serve, but i get an “unhautorized client” error when testing on mobile.

My problem is (i think) my redirectUri. I tried a lot of things but i still not found what to set inside…

Here is my is4.conf.ts file

export const authConfig: AuthConfig = {
  issuer: environment.authIS4Api,
  clientId: environment.authIS4clientId,
  responseType: 'code',
  redirectUri: 'com.myapp.mybundle:/home', // window.location.origin // <-- for ionic serve
  postLogoutRedirectUri: 'com.myapp.mybundle:/home', // window.location.origin // <-- for ionic serve
  scope: environment.authIS4scope,
  useSilentRefresh: true,
  silentRefreshTimeout: 20000,
  timeoutFactor: 0.75,
  sessionChecksEnabled: true,
  showDebugInformation: true,
  clearHashAfterLogin: false,
  nonceStateSeparator : 'semicolon'
};

And my bootstrap code :

initializeApp(): void {
    this.oauthService.configure(authConfig);
    this.oauthService.loadDiscoveryDocumentAndLogin(); // redirige vers la page d'authent kalya uniquement si pas authentifié
    
    // Automatically load user profile
    this.oauthService.events
    .pipe(filter(e => e.type === 'token_received'))
    .subscribe(_ => this.oauthService.loadUserProfile());

    this.oauthService.setupAutomaticSilentRefresh();
  }

I also add the following intent in my AndroidManifest.xml

 <intent-filter>
     <data android:scheme="com.myapp.mybundle"/>
     <action android:name="android.intent.action.VIEW"/>
     <category android:name="android.intent.category.DEFAULT"/>
     <category android:name="android.intent.category.BROWSABLE"/>
 </intent-filter>

If you got an idea… Thanks a lot

1 post - 1 participant

Read full topic

IMG_00441536×2048 256 KB

How to remove/Hide Reset button, I am using Ionic v1 with IOS 14 when I click on reset button my app crashes every time. Anyone please suggest anyway to hide the reset button

1 post - 1 participant

Read full topic

Ionic 6 app dont work(show only white-screen) on android v8.1 but works on lesser version android v.6 devices

Ionic 6, Angular 10, Node 12

oikoi516×555 10.7 KB

2 posts - 1 participant

Read full topic

Why Buy Google Positive Reviews?

Google reviews improve credibility for any business. Studies have shown that the vast majority of 18-34-year-olds, about 91%, trust online reviews and advice from family and friends. That is, provided the review meets certain conditions, such as (1) trustworthiness, (2) belonging to the correct industry, and (3) multiple reviews on the same site. If you can’t get real reviews from your customers, especially if your business is new or in a harsh industry, it would be beneficial to pay for reviews initially.

1 post - 1 participant

Read full topic

Hi guys, I am using Ionic Vue with Capacitor. I am trying to implement the “push notifications” part. My code below:

const push = Plugins.PushNotifications;
        push.register();
        push.requestPermission().then((answer) => {
            if (answer.granted) {
                push.createChannel({
                    id: 'relay',
                    name: 'relay',
                    description: '',
                    sound: '',
                    importance: 1,
                    visibility: 1,
                    lights: true,
                    lightColor: "green",
                    vibration: true,
                });

                push.addListener('pushNotificationReceived', notification => {
                    console.log(notification);
                });
            }
        });

The only part that I do not understand is, how can I push a notification to the phone now? I do not want to use a 3rd party tool of some kind. Can anyone please explain to me how I can push a message to the phone?

1 post - 1 participant

Read full topic

I’m using the latest Ionic with Capacitor, and I’ve added dark mode for my app.

However, the dark mode modifies styles (CSS variables) globally with the help of this media query:

@media (prefers-color-scheme: dark) {
    ...
}

How can I preserve ALL CSS styles for a specific component, so that they look exactly the same in both Light mode and Dark mode, while the rest of the components reflect the dark mode changes as expected?

I’ve tried overriding :root variables inside of my-ever-light-component.scss but they get ignored.

Any suggestions are greatly appreciated!

1 post - 1 participant

Read full topic

Hello.

Following this tutorial: https://github.com/ionic-team/tutorial-photo-gallery-react

When I press the camera button in tab2.tsx, it does not open the camera to take a photo but it opens the photo gallery to select one. Why won’t the device camera open?

Could you please help me? I need to take a photo of the camera and not select it from the gallery

This is the code that I have taken and implemented

tabs2.tsx

import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonGrid, IonRow, IonCol, IonImg, IonActionSheet } from '@ionic/react';
import { camera, trash, close } from 'ionicons/icons';
import { Photo, usePhotoGallery } from '../hooks/usePhotoGallery';

const Tab2: React.FC = () => {
  const { deletePhoto, photos, takePhoto } = usePhotoGallery();
  const [photoToDelete, setPhotoToDelete] = useState<Photo>();

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Photo Gallery</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
      <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Photo Gallery</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonGrid>
          <IonRow>
            {photos.map((photo, index) => (
              <IonCol size="6" key={index}>
                <IonImg onClick={() => setPhotoToDelete(photo)} src={photo.webviewPath} />
              </IonCol>
            ))}
          </IonRow>
        </IonGrid>

        <IonFab vertical="bottom" horizontal="center" slot="fixed">
          <IonFabButton onClick={() => takePhoto()}>
            <IonIcon icon={camera}></IonIcon>
          </IonFabButton>
        </IonFab>

        <IonActionSheet
          isOpen={!!photoToDelete}
          buttons={[{
            text: 'Delete',
            role: 'destructive',
            icon: trash,
            handler: () => {
              if (photoToDelete) {
                deletePhoto(photoToDelete);
                setPhotoToDelete(undefined);
              }
            }
          }, {
            text: 'Cancel',
            icon: close,
            role: 'cancel'
          }]}
          onDidDismiss={() => setPhotoToDelete(undefined)}
        />


      </IonContent>
    </IonPage>
  );
};

export default Tab2;

usePhotoGallery.ts

import { useState, useEffect } from "react";
import { useCamera } from '@ionic/react-hooks/camera';
import { useFilesystem, base64FromPath } from '@ionic/react-hooks/filesystem';
import { useStorage } from '@ionic/react-hooks/storage';
import { isPlatform } from '@ionic/react';
import { CameraResultType, CameraSource, CameraPhoto, Capacitor, FilesystemDirectory } from "@capacitor/core";
const PHOTO_STORAGE = "photos";

export function usePhotoGallery() {

  const [photos, setPhotos] = useState<Photo[]>([]);
  const { getPhoto } = useCamera();
  const { deleteFile, readFile, writeFile } = useFilesystem();
  const { get, set } = useStorage();

  useEffect(() => {
    const loadSaved = async () => {
      const photosString = await get(PHOTO_STORAGE);
      const photosInStorage = (photosString ? JSON.parse(photosString) : []) as Photo[];
      // If running on the web...
      if (!isPlatform('hybrid')) {
        for (let photo of photosInStorage) {
          const file = await readFile({
            path: photo.filepath,
            directory: FilesystemDirectory.Data
          });
          // Web platform only: Load the photo as base64 data
          photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
        }
      }
      setPhotos(photosInStorage);
    };
    loadSaved();
  }, [get, readFile]);

  const takePhoto = async () => {
    const cameraPhoto = await getPhoto({
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
      quality: 100
    });
    const fileName = new Date().getTime() + '.jpeg';
    const savedFileImage = await savePicture(cameraPhoto, fileName);
    const newPhotos = [savedFileImage, ...photos];
    setPhotos(newPhotos);
    set(PHOTO_STORAGE, JSON.stringify(newPhotos));
  };

  const savePicture = async (photo: CameraPhoto, fileName: string): Promise<Photo> => {
    let base64Data: string;
    // "hybrid" will detect Cordova or Capacitor;
    if (isPlatform('hybrid')) {
      const file = await readFile({
        path: photo.path!
      });
      base64Data = file.data;
    } else {
      base64Data = await base64FromPath(photo.webPath!);
    }
    const savedFile = await writeFile({
      path: fileName,
      data: base64Data,
      directory: FilesystemDirectory.Data
    });

    if (isPlatform('hybrid')) {
      // Display the new image by rewriting the 'file://' path to HTTP
      // Details: https://ionicframework.com/docs/building/webview#file-protocol
      return {
        filepath: savedFile.uri,
        webviewPath: Capacitor.convertFileSrc(savedFile.uri),
      };
    }
    else {
      // Use webPath to display the new image instead of base64 since it's 
      // already loaded into memory
      return {
        filepath: fileName,
        webviewPath: photo.webPath
      };
    }
  };

  const deletePhoto = async (photo: Photo) => {
    // Remove this photo from the Photos reference data array
    const newPhotos = photos.filter(p => p.filepath !== photo.filepath);

    // Update photos array cache by overwriting the existing photo array
    set(PHOTO_STORAGE, JSON.stringify(newPhotos));

    // delete photo file from filesystem
    const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
    await deleteFile({
      path: filename,
      directory: FilesystemDirectory.Data
    });
    setPhotos(newPhotos);
  };

  return {
    deletePhoto,
    photos,
    takePhoto
  };
}

export interface Photo {
  filepath: string;
  webviewPath?: string;
}

App.tsx

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet, IonSplitPane } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';
import Registro from './pages/Registro';
import Ingresar from './pages/Ingresar';
import Menu from './pages/Menu';
import MisServicios from './pages/MisServicios';
import Favoritos from './pages/Favoritos';
import HistorialServicios from './pages/HistorialServicios';
import Tab2 from './pages/Tabs2';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
    <IonSplitPane contentId="main" when="(min-width: 4096px)">
          <Menu />
      <IonRouterOutlet id="main">
        <Route path="/home" component={Home} exact={true} />
        <Route exact path="/" render={() => <Redirect to="/home" />} />
        <Route path="/registro" component={Registro} exact={true}></Route>
        <Route path="/ingresar" component={Ingresar} exact={true}></Route>
        <Route path="/MisServicios" component={MisServicios} exact={true}></Route>
        <Route path="/Favoritos" component={Favoritos} exact={true}></Route>
        <Route path="/HistorialServicios" component={HistorialServicios} exact={true}></Route>
        <Route path="/tab2" component={Tab2} exact={true} />



      </IonRouterOutlet>
      </IonSplitPane>
    </IonReactRouter>
  </IonApp>
);

export default App;

1 post - 1 participant

Read full topic

I am trying to run my project on my device without live reload. Currently when I run it, it works fine in google chrome with ionic serve as well as running with a liveReload setup with

ionic capacitor run ios -l --external --live-reload --source-map=false

When I run it from xcode without the server option in my capactiro.config.js, however, I just see the capaacitor splashscreen and it never goes away.

I thought I’d put some console.log statements in to see what was being reached, and it turns out none of my code is even running. This leads me to believe it may be a dependency / configuration issue. My capacitor.config.json file looks like this

{
  "appId": "com.oneonline.utahAreaPriorities",
  "appName": "Utah Area Priorities",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "build",
  "plugins": {
    "SplashScreen": {
      "launchAutoHide": false
    }
  },
  "cordova": {}
}

and my package.json looks like this

{
  "name": "xxx",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@capacitor-community/contacts": "0.0.3",
    "@capacitor/core": "^2.4.4",
    "@capacitor/ios": "^2.4.4",
    "@ionic-native/core": "^5.28.0",
    "@ionic-native/device": "^5.30.0",
    "@ionic-native/local-notifications": "^5.28.0",
    "@ionic-native/unique-device-id": "^5.30.0",
    "@ionic/react": "^5.5.2",
    "@ionic/react-router": "^5.5.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^8.0.3",
    "@types/jest": "^24.0.25",
    "@types/node": "^12.19.8",
    "@types/react": "^16.14.2",
    "@types/react-dom": "^16.9.10",
    "@types/react-router": "^5.1.4",
    "@types/react-router-dom": "^5.1.3",
    "animated-number-react": "^0.1.1",
    "aws-amplify": "^3.3.10",
    "aws-appsync": "^4.0.1",
    "aws-appsync-react": "^4.0.1",
    "axios": "^0.21.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-ionic": "5.4.7",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-uniquedeviceid": "^1.3.2",
    "cordova-plugin-whitelist": "^1.3.4",
    "es6-promise-plugin": "^4.2.2",
    "framer-motion": "^2.9.5",
    "graphql-tag": "^2.11.0",
    "ionicons": "^5.0.0",
    "js-sha256": "^0.9.0",
    "moment": "^2.29.1",
    "node-sass": "^4.14.1",
    "react": "^16.13.0",
    "react-apollo": "^2.5.8",
    "react-circular-progressbar": "^2.0.3",
    "react-confetti": "^6.0.0",
    "react-dom": "^16.13.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "typescript": "3.8.3"
  },
  "scripts": {
    "start": "ionic serve",
    "build": "ionic build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "sync": "ionic build; npx cap sync ios; npx cap open ios;",
    "ios": "ionic capacitor run ios -l --external --live-reload --source-map=false"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@capacitor/cli": "2.4.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "react-scripts": "3.4.0"
  },
  "description": "An Ionic project"
}

Any ideas on what i’m doing wrong here would be extremely useful. Thanks guys!

1 post - 1 participant

Read full topic

I want to open the URL directly in the app. In Android it is working fine. On iOS it only shows a blank white screen after starting. I have set target to _blank, because I do now want iOS to open the URL in Safari App.

import {InAppBrowser, InAppBrowserOptions} from '@ionic-native/in-app-browser/ngx';
...
options: InAppBrowserOptions = {
    location : 'no',
    hidden : 'no',
    zoom : 'yes',
    hideurlbar: 'yes',
    toolbar: 'no',
    hidenavigationbuttons: 'yes',
};

constructor(private iab: InAppBrowser) {
    this.iab.create('https://www.google.com', '_blank', this.options);
}

confif.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>MyApp</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <access origin="*" />
    <allow-intent href="*" />
    <allow-navigation href="*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="19" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        ....
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        ...
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
    <plugin name="cordova-plugin-statusbar" spec="2.4.2" />
    <plugin name="cordova-plugin-device" spec="2.0.2" />
    <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
    <engine name="android" spec="7.1.4" />
</widget>

…

$ cordova plugins ls
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-inappbrowser 4.1.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 5.0.0 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

…

$ ionic info

Ionic:

   Ionic CLI                     : 5.4.16 (/Users/u2007750/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 7.1.4, ios 6.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 5.0.0, (and 5 other plugins)

Utility:

   cordova-res (update available: 0.15.2) : 0.8.0
   native-run (update available: 1.3.0)   : 0.2.7

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v10.15.3 (/Users/u2007750/.nvm/versions/node/v10.15.3/bin/node)
   npm        : 6.4.1
   OS         : macOS Catalina
   Xcode      : Xcode 11.5 Build version 11E608c

1 post - 1 participant

Read full topic

Hello, I have a Form in which there is a dropdown which is having two options a and b

if option a is selected nothing has to happen if option b was selected one extra field has to appear under that dropdown

Can someone help me with this I’m struggling

instead of dropdowns is there any other way ??

1 post - 1 participant

Read full topic