@condacore wrote:

Hello Community,

I’m using Ionic for over 3 Years now, created a bunch of apps and now I think it’s finally time to post my first question into the Ionic Forum

The point is, that I really want to use the Android Transitions on iOS when navigating to another page. I’m currently using the good old NavController to keep the forward/back/root hints that Ionic (maybe) uses.

Hope to hear some good answers.

Best Regards
Marius

Posts: 1

Participants: 1

Read full topic

@condacore wrote:

Hello,

I tried to add mode=“ios” to the < html > tag and also put this information in the app.module.ts:

IonicModule.forRoot({
   mode: 'ios'
}),

In Ionic Lab Android still uses the Material Style. Any Ideas?

Best Reagrds
Marius

Posts: 1

Participants: 1

Read full topic

@eyeswideopen wrote:

I’ve just started to use Ionic 4 and am in the process of migrating our ionic1 project. Since this comes with a major design overhaul im currently styling elements starting with our login form containing elements.

At first i was like “this should be fast, just adjust the ion components to our design template”… not so fast.
I realized, that all elements inside the #shadow-root are not accessible with my pages scss.

So my question: How am i supposed to style built-in components when the CSS variables don’t reflect my desired changes?

This is my login form which should be centered (achived with a “text-center” attribute)

clearly the font is not centered on the line but when entering text it gets worse:

The label text is off center even more and i don’t see a way to fix that without using ugly stuff like injecting the CSS via JS into the shadowDOM. Without shadowDOM this would be a 5 min fix which turned into a 5h hour de force without a clean solution on the horizon.

Do i have to style my own input element and abandon the ionic one?

Posts: 1

Participants: 1

Read full topic

@Josef87 wrote:

I use Ionic 3 for my app and have a file on my XAMPP server, just with the input:

var test = 0;
now i wanna get this variable in my app.

i already included the file at index.html with:

 <script src="192.xxx.xxx.xxx/test/filename.js"></script>

i also added it to my GlobalProvider the lines

declare var test;

dif1 = test;

but just have blankscreen
anyway i always have blackscreen when i try to connect to a server or whatever…

when i just write in the provider dif1 = 0, it works very well. so i think it´s a problem to get the js file.

did I do something wrong?

Posts: 1

Participants: 1

Read full topic

@cooldp007 wrote:

When I build apk I got below error:

Failed to resolve: support-core-utils

My AndroidManifest.xml file is as follows:

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0.0" package="com.demo.mobile" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:hardwareAccelerated="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:supportsRtl="true">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:screenOrientation="portrait" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.sarriaroman.PhotoViewer.PhotoActivity" android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen" />
        <provider android:authorities="com.demo.mobile.DocumentViewerPlugin.fileprovider" android:exported="false" android:grantUriPermissions="true" android:name="de.sitewaerts.cordova.documentviewer.FileProvider">
            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/documentviewer_file_paths" />
        </provider>
        <provider android:authorities="${applicationId}.provider" android:exported="false" android:grantUriPermissions="true" android:name="de.appplant.cordova.emailcomposer.Provider">
            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/emailcomposer_provider_paths" />
        </provider>
        <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/fb_app_id" />
        <meta-data android:name="com.facebook.sdk.ApplicationName" android:value="@string/fb_app_name" />
        <activity android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation" android:label="@string/fb_app_name" android:name="com.facebook.FacebookActivity" />
        <activity android:name="com.keyes.youtube.OpenYouTubePlayerActivity" android:screenOrientation="landscape" />
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="com.bunkerpalace.cordova.YouTubeActivity" android:theme="@android:style/Theme.Black.NoTitleBar" android:windowSoftInputMode="adjustResize" />
        <amazon:enable-feature android:name="com.amazon.device.messaging" android:required="false" xmlns:amazon="http://schemas.amazon.com/apk/res/android" />
        <service android:exported="false" android:name="com.onesignal.ADMMessageHandler" />
        <receiver android:name="com.onesignal.ADMMessageHandler$Receiver" android:permission="com.amazon.device.messaging.permission.SEND">
            <intent-filter>
                <action android:name="com.amazon.device.messaging.intent.REGISTRATION" />
                <action android:name="com.amazon.device.messaging.intent.RECEIVE" />
                <category android:name="com.activity.divine_solitaires" />
            </intent-filter>
        </receiver>
        <activity android:clearTaskOnLaunch="true" android:configChanges="orientation|keyboardHidden|screenSize" android:exported="false" android:name="com.google.zxing.client.android.CaptureActivity" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" android:windowSoftInputMode="stateAlwaysHidden" />
        <activity android:label="Share" android:name="com.google.zxing.client.android.encode.EncodeActivity" />
        <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id" />
        <activity android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation" android:label="@string/app_name" android:name="com.facebook.FacebookActivity" />
        <activity android:exported="true" android:name="com.facebook.CustomTabActivity">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="@string/fb_login_protocol_scheme" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="16" android:targetSdkVersion="26" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.USE_CREDENTIALS" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.CALL_PHONE" />
    <uses-feature android:name="android.hardware.telephony" android:required="false" />
    <uses-permission android:name="com.amazon.device.messaging.permission.RECEIVE" />
    <permission android:name="com.demo.mobile.permission.RECEIVE_ADM_MESSAGE" android:protectionLevel="signature" />
    <uses-permission android:name="com.demo.mobile.permission.RECEIVE_ADM_MESSAGE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.FLASHLIGHT" />
    <uses-feature android:name="android.hardware.camera" android:required="true" />
</manifest>

My Ionic Info is:-

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 8.0.0 

local packages:

    @ionic/app-scripts : 3.2.0
    Cordova Platforms  : android 6.4.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.12.0
    npm  : 6.4.1 
    OS   : macOS High Sierra

My Plugin list is as follows:

<plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
    <plugin name="cordova-plugin-whitelist" spec="1.3.1" />
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />
    <plugin name="cordova-plugin-ionic-webview" spec="^1.1.11" />
    <plugin name="cordova-plugin-nativestorage" spec="^2.3.2" />
    <plugin name="com-sarriaroman-photoviewer" spec="^1.1.18" />
    <plugin name="cordova-plugin-document-viewer" spec="^0.9.10" />
    <plugin name="cordova-plugin-youtube-video-player" spec="^1.0.6" />
    <plugin name="cordova-plugin-market" spec="^1.2.0" />
    <plugin name="mx.ferreyra.callnumber" spec="~0.0.2" />
    <plugin name="cordova-plugin-network-information" spec="^2.0.1" />
    <plugin name="cordova-plugin-browsertab" spec="^0.2.0" />
    <plugin name="cordova-plugin-device" spec="^1.1.4" />
    <plugin name="cordova-plugin-email-composer" spec="^0.8.15" />
    <plugin name="phonegap-plugin-barcodescanner" spec="^8.0.0" />
    <plugin name="cordova-plugin-compat" spec="^1.2.0" />
    <plugin name="cordova-plugin-googleplus" spec="^5.3.2" />
    <plugin name="onesignal-cordova-plugin" spec="^2.4.5" />
    <plugin name="cordova-plugin-facebook4" spec="^3.2.0">
        <variable name="APP_ID" value="XXXXXXXXXXXXXX" />
        <variable name="APP_NAME" value="demo" />
    </plugin>
    <engine name="android" spec="~6.4.0" />

Please help me

Posts: 1

Participants: 1

Read full topic

@rodrigojrmartinez wrote:

I’m building an app in which I have several pages which I can navigate to (always trough routing, as suggested on new ionic 4 rather than with navController).

My initial idea was to handle this from my AppComponent which is the bootstrap component which is always loaded and present/dismiss the loading spinner on routing navigations by listening to Angular Route Events. I’ve found out that ionic lifecycle hooks are triggered always after the NavigationEnd event of Angular router, so it is not possible to handle this from these events.

I’ve also found out that the option for a new loading spinner to be presented dismissOnPageChange is not available anymore, which initially seemed really handy since we would expect the loader to automatically hide once the new page that has been navigated to is shown.

Then I’ve tried to provide a service provided in root which all page components could trigger methods either to show a loading spinner, or hide a loading spinner depending on the lifecycle hook method. Been playing around with ionViewWillEnter/ ionViewWillLeave and ionViewDidEnter/ionViewDidLeave. The problem with this is that the order of the methods triggered are not always the expected ones, if I’m navigating from page1 to page2 I would expect always for the methods ionViewWillLeave/ionViewDidLeave from page1 to trigger first and then the methods ionViewWillEnter/ionViewDidEnter from page2 afterwards. This doesn’t happen so the behaviour is not the expected one.

Currently I’m mixing the approaches, I’am listening for the NavigationEnd event at the AppComponent for showing the loading spinner. And I’m hiding it on the different pages when the methods ionViewWillEnter/ionViewDidEnter are trigger. Still the result seems buggy.

The best current approach I’ve found so far is using something like:

async navigate() {
  const loading = await this.loadingController.create({});
  await loading.present();
  await this.router.navigate(['/your-route']);
  await loading.dimiss();
}

Based on this post Ionic 4 dismissOnPageChange but instead of doing it with the navController, doing it with the router itself. The problem with this is that by doing so, I’ve always have to navigate to pages programmatically, and this is not always desired. I believe the framework should provide a more easier ‘out-of-the-box’ approach for achieving this kind of behavior.

Does anyone has an idea about how this can be done?
Thanks in advance

Posts: 1

Participants: 1

Read full topic

@Skee wrote:

Hello there,
I have an app with adMob banners on the bottom. Everything works fine, until i open the camera.
After that, my design is broken and that causes the ad banners to overlap my design.
Does anyone have an idea, where this comes from and how i can fix it?

This is, how it should be and is, before the camera opens

IMG_0009.jpg750x1334 157 KB

This is the result, after opening the camera

IMG_0010.jpg750x1334 156 KB

Thank you
Skee

Posts: 1

Participants: 1

Read full topic

@reedrichards wrote:

Yeeeaaaaahhhh Ionic v4 - Release candidate has been shipped

https://blog.ionicframework.com/ionic-framework-4-0-rc-shipped-paving-way-for-final/

Posts: 1

Participants: 1

Read full topic

@chaitya wrote:

I have issue relating to Input boxes hiding behind the keyboard when keyboard opens up on focus on particular Input.

This is very usual in landscape mode of our application even in portrait mode it happens for some input if user isn’t scroll that much where keyboard positioned.

We are using Ionic 3.7.1 and Angular 4 version.
Please guide if have any workaround or any particular solution.

Thanks.

Posts: 1

Participants: 1

Read full topic

@chopuk wrote:

I’m not being funny but Ionic 4 has been ‘almost here’ for ages. I love ionic but I feel in limbo with all this waiting around.

Posts: 2

Participants: 2

Read full topic

@wiesingerh wrote:

hi i postet my question in stackoverflow, anybody here can help me out?

Posts: 1

Participants: 1

Read full topic

@xxstefanoxx wrote:

My app not show ads after upload on play store(Android) and installed on device. The strange thing is that if I use the same signed package and install it via “adb install” command, the ads works. My app is approved inn store and connect in admob page. I’ve connect app today.

let RewardVideoConfig: AdMobFreeRewardVideoConfig = {
  isTesting: false,
  autoShow: true,
  id: id
};
this.admobFree.rewardVideo.config(RewardVideoConfig);
this.admobFree.rewardVideo.prepare().then(() => {
}).catch(e => alert(e));

Someone has already happened or knows the reason? Thanks!

Posts: 1

Participants: 1

Read full topic

@kucci wrote:

I was unable to change swipe effect on ion-slides, can’t find any solution on web.
currently the default effect is ‘slide’.

anyone can assist on this?

Refer: https://beta.ionicframework.com/docs/api/slides

Posts: 1

Participants: 1

Read full topic

@narasimham3 wrote:

Uncaught TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: No function was found that matched the signature provided.

Posts: 1

Participants: 1

Read full topic

@IonicDeveloper02 wrote:

I am trying to save generated qr Code to gallery of mobile, for that i am using Base64ToGallery plugin. Base64ToGallery Plugin is saving image in the following path " /var/mobile/Containers/Data/Application/D453CNA6-ACC1-40F1-916A-D73B5A13975C/Library/NoCloud/_img4622783188.png" in iPhone. But i cant find the image under Photos of iPhone. Following is the code to save image into gallery

save() {
html2canvas(document.querySelector("#screens")).then(canvas => {
  try {
    this.qrCodeGen.base64Image = canvas.toDataURL('image/jpeg', 0.9);
      
        let options:Base64ToGalleryOptions = { prefix: '_img',mediaScanner: true };
        this.platform.ready().then(() => {

          this.base64ToGallery.base64ToGallery(this.qrCodeGen.base64Image,options)
          .then(
            res => {
              debugger
              console.log('Saved image to gallery ', res);
            },
            err => {
              debugger
              console.log('Error saving image to gallery ', err);
            });
        
        });

     } catch (error) {
          console.log("errorr   ", error);
     }
    });

}
If anyone did saving base64 string into gallery, it would be nice to get some solutions.

Posts: 1

Participants: 1

Read full topic

@indraraj26 wrote:

I have added ADMOB_APP_ID to config.xml and also when i am installing the admob free
cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID=“my id”
Getting admob sucesss in console but i cant see popup and all.
When i am clicking the button of showBanner i can see in chrome inspect that web page not available.

code:

showBanner() {
 
  let bannerConfig: AdMobFreeBannerConfig = {
      isTesting: true, // Remove in production
      autoShow: true,
     // id: ''
  };

  this.admob.banner.config(bannerConfig);

  this.admob.banner.prepare().then(() => {
      // success
      console.log("admob Success!")
  }).catch(e => console.log(e));

}

launchInterstitial() {

  let interstitialConfig: AdMobFreeInterstitialConfig = {
      isTesting: true, // Remove in production
      autoShow: true,
     // id: ''

  };

  this.admob.interstitial.config(interstitialConfig);

  this.admob.interstitial.prepare().then(() => {
      // success
      console.log("admob Success!")

  });

ionic info
:\indraraj\test-ionic\test>ionic info

Ionic:

ionic (Ionic CLI) : 4.4.0 (C:\Users\HP\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.2
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 10 other plugins)

System:

Android SDK Tools : 26.1.1 (C:\Users\HP\AppData\Local\Android\Sdk)
NodeJS : v8.14.0 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10

build gradle

project.ext {
defaultBuildToolsVersion=“27.0.1” //String
defaultMinSdkVersion=19 //Integer - Minimum requirement is Android 4.4
defaultTargetSdkVersion=27 //Integer - We ALWAYS target the latest by default
defaultCompileSdkVersion=27 //Integer - We ALWAYS compile with the latest by default
}

Thank you

Posts: 1

Participants: 1

Read full topic

@Ram1122 wrote:

Hi i am trying to add two child pages in parent page with two tabs in ionic 4 using below code but i was confused about ion-router-outlet not showing admin with two tabs,when i select tabs respective pages have to show but its directly showing child1 page

I wan wondering when i use router-outlet its working fine please suggest me some one where did i do wrong?

admin.html

<ion-content padding>
  <ion-row>
    <ion-col col-4><button ion-button color="secondary" (click)="child1()">Child1</button></ion-col>
    <ion-col col-4><button ion-button color="secondary" (click)="child2()">Child2</button></ion-col>
  </ion-row>
  <ion-router-outlet></ion-router-outlet>

</ion-content> 

admin-router.module.ts

const routes: Routes = [
    {
        path: 'Admin',
        component: AdminPage,
        children: [
            { path: '',redirectTo: '/Admin/Child1',pathMatch: 'full'},
            { path: 'Child1', component: Child1Page },
            { path: 'Child2', component: Child2Page },
        ]
    }
];

adminModule.ts

@NgModule({
    imports: [
        CommonModule,
        IonicModule,
        AdminRoutingModule
    ],
    declarations: [
        AdminPage,
        Child1Page,
        Child2Page
    ]
})
export class AdminModule {

}

Posts: 1

Participants: 1

Read full topic

@gokujy wrote:

I found a code to get google blogger post and open single post, but i’m getting 10 last post so i don’t know how can i get more post or open them in next page using next page token…please help.

home.html

<ion-header>
  <ion-navbar>
  <ion-title style="padding: 0;">
    {{ title }}
  </ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
  	<ion-item ion-item *ngFor="let post of posts" (click)="openPost(post)">
  	<ion-avatar item-left>
      <img src="{{ post.author.image }}">
    </ion-avatar>
    <h2 [innerHTML]="post.title"></h2>
    <p [innerHTML]="post.author.displayName"></p>
</ion-item>
</ion-list>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

//Import the Http library and add it to the constructor.
//Import the Constants provider and add it to the constructor.
import { Http } from '@angular/http';
import { ConstantsProvider } from '../../providers/constants/constants';

//Import the post page
import { PostPage } from '../post/post';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

	//Create a property for the title of the blog.
	//Create a property for the list of blog posts.
	title: string;
	posts: any[];

  constructor(public navCtrl: NavController, public constants: ConstantsProvider, public http: Http) {
	  	http.get('https://www.googleapis.com/blogger/v3/blogs/byurl?key=' + constants.getApiKey() + '&url=' + constants.getUrl())
	  .subscribe(response => {
	    let data = response.json();
	    this.title = data.name;
	    this.getPosts(data.posts.selfLink);
	  });
  }

  //Create a getPosts() function
  getPosts(url:string) {
  this.http.get(url+'?key='+this.constants.getApiKey())
    .subscribe(response => {
      let data = response.json();
      console.log(data);
      this.posts = data.items;
    });
 }

  //Create and openPost(post) function to open the post page and pass the selected post as a parameter.
  openPost(post) {
    this.navCtrl.push(PostPage, {post:post})
  }

}

Posts: 1

Participants: 1

Read full topic

@saisundeep wrote:

Here is my code in ionic v4

<ion-row class="b-1 mt-2">
    <ion-col size="1" class="center br-1" id="sno">
        <span class="left">S.No</span>
        <ion-icon class="float-right" name="arrow-dropdown"></ion-icon>
    </ion-col>
    <ion-col size="3" class="center br-1" id="name">
        <span>Name</span>
        <ion-icon name="arrow-dropdown" class="float-right"></ion-icon>
    </ion-col>
    <ion-col size="2" class="br-1" name="lastpurchasal">
        <span class="left">Last Purchasal</span>
        <ion-icon name="arrow-dropdown" class="float-right"></ion-icon>
    </ion-col>
    <ion-col size="2" class="br-1" id="phonenumber">
        <span>Phone Number</span>
        <ion-icon name="arrow-dropdown" class="float-right"></ion-icon>
    </ion-col>
    <ion-col size="2" class="center br-1" id="place">
        <span>Place</span>
        <ion-icon name="arrow-dropdown" class="float-right"></ion-icon>

    </ion-col>
    <ion-col size="2" class="center" id="amount">
        <span>Amount</span>
        <ion-icon name="arrow-dropdown" class="float-right"></ion-icon>
    </ion-col>
</ion-row>

How to hide col in mobile view here I want to hide the cols “s.no” and “last purchasal” col and the expected output in mobile view is in below image

custom – 1.jpg1080x1920 72.9 KB

Posts: 1

Participants: 1

Read full topic

@DeanCMSSystems wrote:

DELETE this post

DELETE

Posts: 1

Participants: 1

Read full topic