@rodrigojrmartinez wrote:

I have a doubt regarding how to arrange my pages to ensure a nice experience when navigating to one page an another. Lately I have changed the whole structure of the application and I still have several problems, with different approaches it looks bad on android and on some others on ios

What is the ‘expected’ or ‘recomended’ way to arrange your pages?

Because now I have one login page, and a dashboard page. They both get injected on the main router outlet from app component.

From the dashboard page onwards I have an extra router outlet which will load any page you navigate to after logging in.

• Each page has its own header (some with just a transparent toolbar with a menu icon, some others with a gradient background, some other with white background and border)
• There may be extra router outlets on a page which may allow you to navigate further
• Some pages even have a footer - like forms for the submit button
• For some pages there may be a background image on the main content

First approach I followed was to have the header in the dashpage and adapt its properties based on the navigated page. This resulted on an ugly transition in Andoird, since views slides from bottom to top as a whole and there’s a fixed header that doesn’t come with the content but remains and its properties changes. on Ios, that have transitions that slide right to left, the header remained and adapted in a smooth way while the content came in.

59945556-5d8e4980-943e-11e9-9ea9-8982637bdf45.png908×622

Then I changed so each page may have its own header with its configuration depending the case. This improved the experience on Android (though I notice that the content and the header doesn’t come in or leave smooth together, one appears or hides before the other it seems but it not that evident). With this, the transitions on ios are not nice at all because the header suddenly ‘appears’ and the content comes in with a transition. More over, having an image as the main content background makes it quite buggy for the content that comes in.

59945548-56ffd200-943e-11e9-988b-8688d3c02f5d.png920×622

Which way would you recommend to have a nice transition on both platforms?

Posts: 1

Participants: 1

Read full topic

@FaberTech wrote:

The notifications are not triggering the push.on(‘notification’) when the user taps on the notification and the app are closed or in the background.

I have this code been initialized on platform.ready()

import { Push, PushObject, PushOptions } from ‘@ionic-native/push/ngx’;

……

// to check if we have permission
this.push.hasPermission().then((res: any) => {
  if (res.isEnabled) {
    console.log('We have permission to send push notifications');
  } else {
    console.log('We do not have permission to send push notifications');
  }
});

// Create a channel (Android O and above). You'll need to provide the id, description and importance properties.
this.push.createChannel({
  id: 'testchannel1',
  description: 'My first test channel',
  // The importance property goes from 1 = Lowest, 2 = Low, 3 = Normal, 4 = High and 5 = Highest.
  importance: 3
}).then(() => console.log('Channel created'));

// Delete a channel (Android O and above)
// this.push.deleteChannel('testchannel1').then(() => console.log('Channel deleted'));

// Return a list of currently configured channels
this.push.listChannels().then((channels) => console.log('List of channels', channels))

// to initialize push notifications

const options: PushOptions = {
  android: {},
  ios: {
    alert: 'true',
    badge: true,
    sound: 'false'
  },
  windows: {},
  browser: {
    pushServiceURL: 'http://push.api.phonegap.com/v1/push'
  }
};

const pushObject: PushObject = this.push.init(options);

pushObject.on('notification').subscribe((notification: any) => console.log('Received a notification', notification));

pushObject.on('registration').subscribe((registration: any) => console.log('Device registered', registration));

pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));

The pushObject.on(‘notification’) is triggered if the app is open but it should also trigger on the tap on the notification if the app is closed/background.

IONIC INFO:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic 5.3.0, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 21 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/tdonatti/Library/Android/sdk)
   ios-deploy        : 1.9.2
   ios-sim           : 5.0.13
   NodeJS            : v11.6.0 (/usr/local/bin/node)
   npm               : 6.5.0-next.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

> cordova plugin ls
cordova-android-firebase-gradle-release 2.1.0 "cordova-android-firebase-gradle-release"
cordova-android-play-services-gradle-release 2.1.0 "cordova-android-play-services-gradle-release"
cordova-android-support-gradle-release 2.1.0 "cordova-android-support-gradle-release"
cordova-plugin-add-swift-support 1.7.2 "AddSwiftSupport"
cordova-plugin-buildinfo 2.0.2 "BuildInfo"
cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-facebook4 4.2.1 "Facebook Connect"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-firebase-analytics 0.13.0 "FirebaseAnalyticsPlugin"
cordova-plugin-firebase-dynamiclinks 0.13.2 "FirebaseDynamicLinksPlugin"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-intercom 6.2.0 "Intercom"
cordova-plugin-ionic 5.3.0 "cordova-plugin-ionic"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.0.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-vibration 3.1.0 "Vibration"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 2.6.0 "Cordova sqlite storage plugin"
cordova-support-google-services 1.1.0 "cordova-support-google-services"
ionic-plugin-deeplinks 1.0.19 "Ionic Deeplink Plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"
phonegap-plugin-multidex 1.0.0 "Multidex"
phonegap-plugin-push 2.2.3 "PushPlugin"

Posts: 1

Participants: 1

Read full topic

@Luxaaa wrote:

Hello!
I want to create a modal like this:

mbsheet.png500×889 33.3 KB

But My Modal does not outgray the backgroundpage:

Screenshot (3).png1920×1080 153 KB

My app.module.ts:

import { TabsPageModule } from './tabs/tabs.module';
import { HomePageModule } from './home/home.module';
import { TasksPageModule } from './tasks/tasks.module';
import { TasksPage } from './tasks/tasks.page';
import { HomePage } from './home/home.page';
import { TabsPage } from './tabs/tabs.page';
import { ModaltestPageModule } from './modaltest/modaltest.module';
import { ModaltestPage } from './modaltest/modaltest.page';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
      IonicModule.forRoot({mode: 'ios'}), 
      AppRoutingModule,
      ModaltestPageModule
  ],

  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

and my Tasks.page.ts (where the button is)

import { ModaltestPage } from './../modaltest/modaltest.page';
import { ActionSheetController, ModalController, PopoverController } from '@ionic/angular';
import { Component, OnInit } from '@angular/core';
import { AddTaskComponent } from '../add-task/add-task.component';


@Component({
  selector: 'app-tasks',
  templateUrl: './tasks.page.html',
  styleUrls: ['./tasks.page.scss'],
})
export class TasksPage implements OnInit {

  constructor(public modalCtrl : ModalController, public popoverCtrl : PopoverController) { }

  ngOnInit() {
  }

 
async showModal() {
    const modal = await this.modalCtrl.create({
      component : ModaltestPage,
      cssClass : "bottom_modal",
      showBackdrop: false
    });
  return await  modal.present();
  }
}

And the app.scss:

.bottom_modal {
    height: 30%;
    top: 70%;
    position: absolute;
    display: block;

}

Tahk you for help!

Posts: 1

Participants: 1

Read full topic

@moblizeit wrote:

we have a ionic app that is accessed by uses in their phone browser. The app is deployed using the option
ionic cordova build browser and resulting dir to a host server.

We want to add the ability for users to notify in real time and let them refresh by clicking a button whenever the ionic app is updated.

we are able to implement the ability to notify in realtime when new version is available but are not sure how to ensure that when user click a button to refresh the app then it should refresh ensuring it reliably can fetch the latest version.

If that does not happen then user will keep seeing notification for updating the app but they wont be. So, what is the reliable way to make sure that they could get latest uncached version.

Posts: 1

Participants: 1

Read full topic

@jorgetv92 wrote:

Buenas Tardes quisiera consultar como puedo compilar mi app termianda para Android 9 (Pie).
ya que al compilarla con $ionic build android . Me lo compila para android 8 (oreo)
y eso me ha traido problrmas por que mis http.get no estan funcionando en android 9, solo funcionan hasta android 8.
intente con $ionic build android@9.0.0 y no compila.
Seria de gran ayuda si alguien conoce como hacerlo, Gracias de antemano

Posts: 1

Participants: 1

Read full topic

@SRoslan wrote:

Do you know how to fix this?

loadCustomer() {
    return new Promise(resolve => {
      const body = {
        aksi: 'getdata',
        limit: this.limit,
        start: this.start,
      };

      this.postPrvdr.postData(body, 'proses-api.php').subscribe(data => {
        for (const customer of data.result) {
          console.log(customer);
          this.customers.push(customer);
        }
        resolve(true);
      });
    });
  }

from php file

  	$data = array();
  	$query = mysqli_query($mysqli, "SELECT * FROM hawkers  ORDER BY customerid DESC LIMIT $postjson[start],$postjson[limit]");

  	while($row = mysqli_fetch_array($query)){

  		$data[] = array(
  			'customerid' => $row['customerid'],
  			'namecustomer' => $row['namecustomer'],
  			'desccustomer' => $row['desccustomer'],
  			'created_at' => $row['created_at'],

  		);
  	}

  	if($query) $result = json_encode(array('success'=>true, 'result'=>$data));
  	else $result = json_encode(array('success'=>false));

  	echo $result;

  }
type or paste code here

Posts: 1

Participants: 1

Read full topic

@dvtopiya wrote:

From Ionic 4 mobile app, How can I open external URL only in chrome browser ? I have tried InAppBrowser with _system, but it is opening in default browser.

Can anyone please let me know that Is there any way using that I can open external URL only in chrome browser ?

Posts: 1

Participants: 1

Read full topic

@hyzteriik wrote:

Hello,

I have a really simple game i’ve created.
I want to use a custom icon and splash screen.

I generated the folder resources with

ionic cordova resources

But i get

ERROR: Missing source image for "icon" (sources: resources/android/icon.png, resources/android/icon.jpg, resources/android/icon.jpeg, resources/icon.png, resources/icon.jpg, resources/icon.jpeg)

I believe it is because i am using low-res icons, issued from simple screenshots of my game.
Design is really something i’m not good with, and i was wondering how can i “upgrade” the quality ?
I believe the size for the icon is around 1024x1024 and even more for the splash screen.

How can i design my own images with such a high resolution ?
Thank !

Posts: 1

Participants: 1

Read full topic

@Yuntsrsss wrote:

Posts: 1

Participants: 1

Read full topic

@Alexis182 wrote:

Example:

<button ion-button [myProperty]="foo">
    Click
</button>

I need a property like myProperty that gives to the button other dynamic properties such as:

• if foo is greater than 100 the button will be disabled.
• if foo is less than 0 the button click event will be overwritten.

(It is necessary since it needs to be applied on many buttons)

What is the best way to solve this?

Posts: 1

Participants: 1

Read full topic

@josh_sharpe wrote:

I’ve found this question posted in some form across multiple versions of ionic*, but nothing recent, and nothing in terms of ionic/v4/capacitor - so that’s where I’m going with this:

I have one (ionic v3) codebase that gets published out to mulitple app-store “apps”. The only thing that changes between the published app is some simple config (think, company_id, splash screens, etc…) and the app store IDs/names etc… In my existing V3 project I accomplish this with a bunch of ruby scripts that modify various cordova/ionic config files (config.xml, ionic.config.json, etc, etc) before launching any ionic serve/emulate/build scripts. This works, but generally it’s a beast to deal with. I’m hoping to do better while migrating to ionic v4.

The ionic v4 docs on the subject (https://beta.ionicframework.com/docs/cli/configuration#project-structure) suggest creating multiple ionic “apps” inside the apps/ folder of my repo. This seems counterintuitive given my setup above. It leaves me wondering if there’s a way I can set up my repo such that it’s single codebase ionic app, that simply pulls in separate configs at build time.

Slightly related - I read somewhere (possibly from joshmorony.com) that capacitor expects us to check in the generated xcode/java code bases after they have been generated. This also doesn’t seem ideal since I’m generating multiple apps from the same codebase. Is this expectation true? How can I handle this new expectation in this multi-tenant repo?

Thanks!

Posts: 1

Participants: 1

Read full topic

@yahwehown wrote:

I am building a job posting app and on apply, I want to send a message to a user that posted the job. O am using mongo db and express. Can I please have some guidance as to how to apply this with ionic.

Posts: 1

Participants: 1

Read full topic

@AzQAdev2 wrote:

We have created an app that uses Google’s OAuth2.0 for login. We run into a problem where the final authorization screen get’s cut off on some devices ( eg: iPhoneX ).

oauth cut off.jpg500×1083 42.7 KB

Although the iPhone screen should be wide enough, it looks like it triggers horizontal scrolling. We have applied the workaround shown here:

github.com/nraboy/ng-cordova-oauth/issues/283#issuecomment-296091222

This fixes the OAuth screen, but creates a host of layout problems throughout the App ( Menu’s break, text entry creates weird scrolling, etc )

I’m unsure on how to proceed. Has anyone resolved this issue, or have suggestions on directions to explore?

Thanks!

Posts: 1

Participants: 1

Read full topic

@fselcukcan wrote:

There is no category for ionicv4 or ionic-react. Should there be? I think it should.

Posts: 1

Participants: 1

Read full topic

@ulver85 wrote:

Hi, I developed an app with ionic 3 and I’m trying to publish it for Android and iOS. With Android the publish process was fast as a lighting bolt without any problem. With iOS the publish process is a pain, they reject my app for this reason:

"Thank you for your response.

Regarding Guideline 2.3 - Performance - Accurate Metadata, we continue to find that your app does not install on iPad

To resolve this issue, it would be appropriate to check the UIRequiredDeviceCapabilities key to verify that it contains only the attributes required for your app features or the attributes that must not be present on the device. Attributes specified by a dictionary should be set to true if they are required and false if they must not be present on the device.

We look forward to reviewing your resubmitted app."

I checked the app info.plist but the key “UIRequiredDeviceCapabilities” is not present and I don’t know how to set it in order to address the issue.

Moreover I tested the app on several ipad simulators without any problem…

There’s anyone with the same issue ?

This is a screenshoot of my info.plist that is created by ionic 3 ios build

Screenshot-2019-06-23-at-11.08.jpg698×557 71.2 KB

Posts: 1

Participants: 1

Read full topic

@hajricod wrote:

Greetings,

File Chooser plugin works fine, but in some situations it does not:

1- I can choose a file, but it does not get processed. This is due permission was not granted. Choosing a file does not prompt permission!?

*if I take a picture instead, permission prompted will show up. once permission granted, I can go back and choose a file and it will work fine.

2- As permission was granted, choosing a file from what ever folder will work, except if I try from Downloads folder it won’t work. I tested on Huawei Y9 and emulator with API 28 android 9 it did not work. However, I tested on Samsung note 4 it did work !. Both the Y9 and emulator have SD that could be the reason.

*if files were chosen from android app named “Files” there will be no issues.

any solution for this issue?

project info:

Ionic:

   Ionic CLI          : 5.1.0 (C:\Users\asalhajri\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 7.1.4
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.2, (and 15 other plugins)

Utility:

   cordova-res : 0.3.0
   native-run  : 0.2.5

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

Posts: 1

Participants: 1

Read full topic

@migwings wrote:

Hi All,

I am trying to integrate the razorpay cordova plugin https://github.com/razorpay/razorpay-cordova

As mentioned there, I need to add a line in the main.m file - ```

import <Razorpay/Razorpay-Swift.h>

I am using ionic Pro to build, is it possible to make these changes via some script ?

Posts: 1

Participants: 1

Read full topic

@Angel39 wrote:

Hi, I’m trying Ionic-react and want create a retractable side menu on header bar.

Screenshot_20190623_130202.png1918×941 14.9 KB

At moment I have only a fixed side menu on all pages(with or without header). How I can get a retractable side menu ? Thanks

Header Component

const Header = () => {
    return (
        <IonHeader>
            <IonToolbar color="primary">
                <IonTitle>App name</IonTitle>
                <IonButtons slot="start">
                    <IonMenuButton menu="main" autoHide={false}  >
                    </IonMenuButton>
                </IonButtons>
            </IonToolbar>
        </IonHeader>
    )
}

export default Header

Side menu component

const SideMenu = () => {
    return (
        <IonMenu side="start" contentId="side" >
            <IonHeader>
                <IonToolbar color="primary">
                    <IonTitle>Start Menu</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent>
                <IonList>
                    <IonItem>Menu Item</IonItem>
                    <IonItem>Menu Item</IonItem>
                    <IonItem>Menu Item</IonItem>
                    <IonItem>Menu Item</IonItem>
                    <IonItem>Menu Item</IonItem>
                </IonList>
            </IonContent>
        </IonMenu>
    )
}
export default withRouter(SideMenu)

App

 const App = () => (
     <Router>
         <IonApp>
             <IonSplitPane contentId="side">
                 <SideMenu />
                <IonPage id="side">
                     <IonRouterOutlet>
                         <Route exact path="/" component={PreSign} />
                         <Route exact path="/login" component={Login} />
                         <Route exact path="/signUp" component={SignUp} />
                         <Route exact path="/restore" component={Restore} />
                         <Route exact path="/home" component={Home} />
                     </IonRouterOutlet>
                 </IonPage>
             </IonSplitPane>
 
         </IonApp>
     </Router>
 );

Posts: 1

Participants: 1

Read full topic

@winkhaing wrote:

how to show file url images from getPictures in IOS for ionic 4. if anyone know , please help me.

Posts: 1

Participants: 1

Read full topic

@gandhivishalk wrote:

Hi All,

I created a project about a year ago and kept adding modules/plug-ins. I never intentionally updated or upgraded anything. I updated or upgraded only when I saw error or something.

Are there any recommended practices to keep everything updated to the best working latest modules/plug-ins.

I’ll appreciate any help and guidance I receive on this topic.

Thank you.

Posts: 1

Participants: 1

Read full topic