A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

Overview

Ionic

Ionic

Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase with JavaScript and the Web.

Ionic is based on Web Components, which enables significant performance, usability, and feature improvements alongside support for popular web frameworks like Angular, React, and Vue.

Ionic Framework is released under the MIT license. PRs welcome! Follow @IonicFramework Official Ionic Discord

Quickstart · Documentation · Contribute · Blog
Community: Discord · Forums · Twitter

Packages

Project Package Version Downloads Links
Core @ionic/core version NPM Downloads README.md
Angular @ionic/angular version NPM Downloads README.md
Vue @ionic/vue version NPM Downloads README.md
React @ionic/react version NPM Downloads README.md

Looking for the ionic-angular package? Ionic 3 has been moved to the ionic-v3 repo. See Earlier Versions.

Getting Started

Start a new project by following our quick Getting Started guide. We would love to hear from you! If you have any feedback or run into issues using our framework, please file an issue on this repository.

Migration Guides

Already have an Ionic app? These guides will help you migrate to the latest versions.

Examples

The Ionic Conference App is a full featured Ionic app. It is the perfect starting point for learning and building your own app.

Contributing

Thanks for your interest in contributing! Read up on our guidelines for contributing and then look through our issues with a help wanted label.

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Future Goals

As Ionic Framework components migrate to the web component standard, a goal of ours is to have Ionic Framework easily work within all of the popular frameworks.

Earlier Versions

The source code for earlier versions of the Ionic Framework may exist in other repositories. Please open issues and pull requests in their respective repositories.

Comments
  • Speed up initial loading

    Speed up initial loading

    We're developing an app which is partially native and partially hybrid. We will open cordova activity when user clicks on an menu item and finish the activity when user clicks back. Problem with this approach is, it takes a while to render on the screen for first time. We are hosting all the resource files in the assets folder so caching doesn't make much sense. Is there any progressive way to load the application?

    opened by TheMohanraj 159
  • Ionic 4 won't work in android 5

    Ionic 4 won't work in android 5

    Bug Report

    Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

    Ionic:
    
       ionic (Ionic CLI)          : 4.1.1 (/Users/myname/.nvm/versions/node/v9.4.0/lib/node_modules/ionic)
       Ionic Framework            : @ionic/angular 4.0.0-beta.3
       @angular-devkit/core       : 0.7.4
       @angular-devkit/schematics : 0.7.4
       @angular/cli               : 6.1.5
       @ionic/ng-toolkit          : 1.0.6
       @ionic/schematics-angular  : 1.0.5
    
    Cordova:
    
       cordova (Cordova CLI) : 8.0.0
       Cordova Platforms     : android 7.0.0, browser 5.0.4
       Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.0, (and 4 other plugins)
    
    System:
    
       Android SDK Tools : 26.1.1 (/Users/myname/Library/Android/sdk/)
       NodeJS            : v9.4.0 (/Users/myname/.nvm/versions/node/v9.4.0/bin/node)
       npm               : 6.4.0
       OS                : macOS High Sierra
    

    Describe the Bug When I do ionic serve and open it in Android Lollipop's browser, Its giving below error. Uncaught SyntaxError: Use of const in strict mode. vendor.js:71605

    opened by santosh-hegde 147
  • bug: White flash appearing when switching between tabs on Android

    bug: White flash appearing when switching between tabs on Android

    Type: bug

    Platform: android 4.4 webview

    when switching between tabs ONLY on Android platform, the app show a white flash. This is in 1.0.0 stable. Not using crosswalk. Forum post http://forum.ionicframework.com/t/white-flash-appearing-when-switching-between-tabs-on-android-in-1-0-0-stable/24774

    opened by wonderdogone 121
  • WIP: virtual scroll

    WIP: virtual scroll

    @robdmoore if you wanna test, here it is so far

    Test in /test/html/list-fit.html

    TODO:

    • [x] unit tests
    • [x] docs
    • [x] grid
    • [x] cleanup on $destroy
    • [x] one more run of optimizations
    • [x] errors on bad developer usage
    • [x] allow user to input item size
    • [x] fix visual bug while scrolling back up/left
    • [x] fix transclusion bug while scrolling down
    opened by ajoslin 111
  • issue(forms): Input, scrolling, keyboard issues for forms

    issue(forms): Input, scrolling, keyboard issues for forms

    Right now, the way Ionic handles form input can be better. Ionic 1 had awesome defaults for form inputs with regards to keyboard handling, content scrolling, etc. Ionic 2 needs to be made consistent, and more importantly, work properly for form inputs consistently across all platforms (iOS, Android, Windows).

    See this repo for the code example which should be run on devices: https://github.com/dylanvdmerwe/ionic2-formtest

    Android:

    • [x] 1. When selecting an input the entire form content should be scrolled so that the selected item is visible after the keyboard is displayed.
    • [x] 2. When the keyboard is hidden, set the scrolling back to it's original position and remove added padding.
    • [x] 3. Touching an area that is not an input dismisses the keyboard.
    • [ ] 4. If the user selects a second input after filling in the first one, the screen should be scrolled to focus on the newly selected input field.
    • [x] 5. ~~Some keyboards have a next, previous and done button. These should be hooked into the form inputs on the page in order to allow the user to cycle through the input options.~~ [unable to test as cannot get a keyboard with next and prev buttons]
    • [x] 6. Support for autocorrect, autocomplete & autocapitalize and combinations thereof.

    iOS:

    • [x] 1. When selecting an input the entire form content should be scrolled so that the selected item is visible after the keyboard is displayed.
    • [x] 2. When the keyboard is hidden, set the scrolling back to it's original position and remove added padding.
    • [x] 3. Touching an area that is not an input dismisses the keyboard.
    • [x] 4. If the user selects a second input after filling in the first one, the screen should be scrolled to focus on the newly selected input field.
    • [ ] 5. Some keyboards have a next, previous and done button. These should be hooked into the form inputs on the page in order to allow the user to cycle through the input options.
    • [x] 6. Support for autocorrect, autocomplete & autocapitalize and combinations thereof.

    Note that this issue has nothing to do with forms or inputs in a slidescomponent. That would be a seperate consistency check to perform.

    Which Ionic Version? 2.x

    Run ionic info from terminal/cmd prompt: (paste output below) Cordova CLI: 6.1.1 Ionic Framework Version: 2.0.0-beta.4-201604170622 Ionic CLI Version: 2.0.0-beta.24 Ionic App Lib Version: 2.0.0-beta.14 OS: Node Version: v5.7.0

    ionitron: v3 
    opened by dylanvdmerwe 109
  • bug: infdig Infinite $digest Loop

    bug: infdig Infinite $digest Loop

    Type: bug

    Platform: ios 9 webview

    I tried my app on iOS9 Beta and always receive this error, when i click something (e.g. a tab):

    angularjs exception: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [] caused by "undefined js stack:

    opened by aexei 108
  • bug: Keyboard pushes the whole screen up

    bug: Keyboard pushes the whole screen up

    Type: bug

    Ionic Version: 2.x

    Platform: ios 9 webview

    My code has a <ion-toolbar position="bottom"> with a text input inside of it. When I try to type something in there on iOS the whole page gets pushed upwards by the keyboard.

    opened by ihadeed 104
  • Ionic2 - nav.setRoot(Component) - Works only first time, unable to navigate after, no errors reported

    Ionic2 - nav.setRoot(Component) - Works only first time, unable to navigate after, no errors reported

    Short description of the problem:

    I am developing an app with Ionic2. I have App.ts as the parent, Welcome.ts as a child page and Featured.ts as a child page as well. I have firebase integrated with the app. Rootpage is first set to Welcome.

    this.rootPage = Welcome;
    

    Step 1: I click a button on Welcome to authenicate with Google, once onAuth is called, I set this.nav.setRoot(Featured); All works fine up to now. I get to the Featured page which enables a sidemenu with different pages and i am able to navigate to all of them no problem.

    Step 2: Featured enables a sidemenu from App.ts/html, in there I have a logout button that calls unauth. Unauth does some Firebase unauth and then:

    this.menu.close();    
    let nav = this.app.getComponent('nav');    
    nav.setRoot(Welcome); 
    

    Step 3: Login again same as in step 1. All is fine up to now.

    Step 4: Open side menu, selects any of the pages from the sidemenu, navigation doesn't occur. sidemenu closes but page remain the same, navbar icon button disappear and no navigation occurs. openPage code:

      openPage(page) {
        //1. Loop through and set active attribute to False if it doesn't match.
        //   Set to True if it matches page title
        for(var i = 0; i < this.NavPages.length; i++) {
          if(this.NavPages[i].title == page.title) this.NavPages[i].active = true;
          else this.NavPages[i].active = false;
        }
        for(var i = 0; i < this.ActivityPages.length; i++) {
          if(this.ActivityPages[i].title == page.title) this.ActivityPages[i].active = true;
          else this.ActivityPages[i].active = false;
        }
        for(var i = 0; i < this.PreferencesPages.length; i++) {
          if(this.PreferencesPages[i].title == page.title) this.PreferencesPages[i].active = true;
          else this.PreferencesPages[i].active = false;
        }
    
        //2. close the menu when clicking a link from the menu
        this.menu.close();
        //3. navigate to the new page if it is not the current page
        let nav = this.app.getComponent('nav');
        nav.setRoot(page.component);
      }
    

    What behavior are you expecting?

    I am expecting navigation to continue to occur, similar to what happens in step 1.

    Steps to reproduce: Steps to reproduce included above.

    Code included above.
    

    Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc) No error is being thrown unfortunately. I don't see any erros in the console logs.

    Which Ionic Version? 2.x

    Run ionic info from terminal/cmd prompt: (paste output below)

    Your system information:
    
    Cordova CLI: 6.0.0
    Gulp version:  CLI version 3.9.0
    Gulp local:   Local version 3.9.1
    Ionic Version: 2.0.0-beta.3
    Ionic CLI Version: 2.0.0-beta.19
    Ionic App Lib Version: 2.0.0-beta.9
    ios-deploy version: 1.8.2 
    ios-sim version: 5.0.3 
    OS: Mac OS X El Capitan
    Node Version: v0.12.7
    Xcode version: Xcode 7.2.1 Build version 7C1002 
    

    Thank you.

    needs: reply 
    opened by tonyawad88 100
  • Keyboard Issues

    Keyboard Issues

    Ionic version: (check one with "x") [ ] 1.x [x] 2.x [x] 3.x

    I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

    Current behavior:

    Keyboards and input scrolling have long been a challenge for Ionic apps, even going all the way back to Ionic V1. We have recently put a focus on trying to knock out these keyboard issues. The issues we currently think are the highest priority when it comes to keyboards and inputs are the following:

    • inputs in alerts are sometimes "wonky"
    • Forms that have a lot of inputs sometimes have scrolling issues when focusing inputs lower down on the page
    • Switching between inputs, textareas and more sometimes causes "bouncing" and other weird UI issues
    • Having an input locked to the bottom of a view does not work correctly on iOS (the keyboard covers the input)

    We are currently working on a two-pronged approach of modifying the logic in the framework that handles this stuff (mainly for Android) along with some modifications to the WKWebView plugin to fix these issues for iOS. We are at a point now where we have a branch of the WKWebView plugin that has the fixes for iOS and are ready for our community to start testing this and providing feedback. We have made a Google doc here that has instructions on how this can be tested. We would love to have feedback on these fixes! Feel free to provide feedback as a comment to this issue. Thanks for using Ionic everyone!

    help wanted ionitron: v3 
    opened by jgw96 98
  • Ionic 2 storage doesn’t have query method

    Ionic 2 storage doesn’t have query method

    I'm updating my app to Ionic 2 rc0 and using import {Storage} from "@ionic/storage"; But it doesn't have query method. It was there in beta 11 to query SQLite. How to query SQLite in rc0?

    opened by aggarwalankush 98
  • Memory leak in state change

    Memory leak in state change

    It appears that changing state increases memory usage with every transition. Here's a simple example. Open your browser's memory profiler and click "Get Clicky".

    http://codepen.io/perrygovier/pen/FJgBa

    Pages with more stuff on it tend to increase the amount of memory that gets eaten with each transition. Note the number of nodes and listeners never decreases.

    screen shot 2014-04-09 at 5 31 45 pm

    On my app that uses a few larger lists, the app can quickly get to 200mb after just a few mins of manual clicking back and forth. I have yet to crash the app due to memory pressure, but it seems more a matter of impatience than something that wouldn't happen with continued use.

    I believe this is less an issue with Ionic and more to do with Angular's UI Router, but I thought I'd start here as it's where it popped up for me.

    BountySource discussion that appears related

    opened by perrygovier 92
  • Fw 2593

    Fw 2593

    Pull request checklist

    Please check if your PR fulfills the following requirements:

    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
      • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
    • [ ] Build (npm run build) was run locally and any changes were pushed
    • [ ] Lint (npm run lint) has passed locally and any fixes were made for failures

    Pull request type

    Please check the type of change your PR introduces:

    • [ ] Bugfix
    • [ ] Feature
    • [ ] Code style update (formatting, renaming)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] Documentation content changes
    • [ ] Other (please describe):

    What is the current behavior?

    Issue URL:

    What is the new behavior?

    Does this introduce a breaking change?

    • [ ] Yes
    • [ ] No

    Other information

    package: core package: angular package: vue 
    opened by liamdebeasi 1
  • fix(datetime): time wheel input mode is dismissed on user scroll

    fix(datetime): time wheel input mode is dismissed on user scroll

    Pull request checklist

    Please check if your PR fulfills the following requirements:

    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
      • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
    • [x] Build (npm run build) was run locally and any changes were pushed
    • [x] Lint (npm run lint) has passed locally and any fixes were made for failures

    Pull request type

    Please check the type of change your PR introduces:

    • [x] Bugfix
    • [ ] Feature
    • [ ] Code style update (formatting, renaming)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] Documentation content changes
    • [ ] Other (please describe):

    What is the current behavior?

    Issue URL: Internal ticket

    Input mode on iOS can be exited by scrolling on of the picker columns. This is useful as users who accidentally activated input mode can easily exit it by scrolling the column. The picker used in ion-datetime does not have this functionality, so getting out of input mode can be confusing to users who accidentally activated it.

    What is the new behavior?

    • Input mode is now exited when the user manually scrolls a picker column enough such that the value will change.

    Detecting if a scroll happened as a result of a user gesture ended up being pretty tricky, so I decided to architect this in a way that did not rely on detecting a user gesture. Instead, exiting input mode is suppressed whenever the value property changes programmatically. This ensures that typing, tapping, or app-level changes do not dismiss the keyboard. Swiping to change the item (before the value prop updates) will still cause exit mode to be dismissed.

    The scrolling tests for this ended up being tricky to reliably simulate on desktop. Open to ideas!

    Does this introduce a breaking change?

    • [ ] Yes
    • [x] No

    Other information

    package: core 
    opened by liamdebeasi 0
  • bug: @HostListener() on document events doesn't trigger change detection

    bug: @HostListener() on document events doesn't trigger change detection

    Prerequisites

    Ionic Framework Version

    • [ ] v4.x
    • [X] v5.x
    • [X] v6.x
    • [ ] Nightly

    Current Behavior

    Changes in @HostListener() on document:click, document:pointerdown and document:click (probably, more events are affected) are not processed by Angular change detection.

    Expected Behavior

    Changes in @HostListener() should be processed by Angular change detection.

    Steps to Reproduce

    1. Add a method like this to the page or component:
    @HostListener("document:click")
    onDocumentClick() {
      this.documentClickCount++;
    }
    
    1. Output documentClickCount in your HTML.
    2. Tap on the screen.
    3. You'll see that it updates in a browser on both PC and Android, but doesn't in an Android app (apk).

    The same thing happens with document:pointerdown and document:pointerup events. Maybe more events are affected.

    I suspect that change detection is not triggered in such @HostListener-s for some reason. This is backed by the fact that provided workarounds work.

    Code Reproduction URL

    https://github.com/matafokka/ionic-hostlistener-bug-demo

    Ionic Info

    [WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'
    
           Require stack:
           - C:\Users\matafokka\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
           - C:\Users\matafokka\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
           - C:\Users\matafokka\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
           - C:\Users\matafokka\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
    
    Ionic:
    
       Ionic CLI                     : 6.20.1 (C:\Users\matafokka\AppData\Roaming\npm\node_modules\@ionic\cli)
       Ionic Framework               : @ionic/angular 6.4.1
       @angular-devkit/build-angular : 15.0.4
       @angular-devkit/schematics    : 15.0.4
       @angular/cli                  : 15.0.4
       @ionic/angular-toolkit        : 6.1.0
    
    Capacitor:
    
       Capacitor CLI      : 4.6.1
       @capacitor/android : 4.6.1
       @capacitor/core    : 4.6.1
       @capacitor/ios     : not installed
    
    Utility:
    
       cordova-res : 0.15.4
       native-run  : 1.7.1
    
    System:
    
       NodeJS : v16.14.0 (C:\Program Files\nodejs\node.exe)
       npm    : 8.3.1
       OS     : Windows 10
    

    Additional Information

    Intro

    I've created a demo repo for this problem where I've provided additional info on the problem. I will cite the important parts from it below.

    Comments

    1. ionic info reported wrong Windows version, mine is Windows 11 Pro for Workstations.
    2. I've tested the demo in Android Studio emulator (Resizable, Android 13) and on Vivo Y31 (Android 12).
    3. I don't know if this issue persists on IOS.

    NgZone.run() workaround

    I prefer this one since you just need to wrap your code in it.

    constructor(private zone: NgZone) {}
    
    @HostListener("document:click")
    onDocumentClick() {
      this.zone.run(() => this.documentClickCount++);
    }
    

    ChangeDetectorRef workaround

    With this you'll need to call ChangeDetectorRef.detectChanges() every time you return from your handler.

    constructor(private changeDetectorRef: ChangeDetectorRef) {}
    
    @HostListener("document:click")
    onDocumentClick() {
      this.documentClickCount++;
      this.changeDetectorRef.detectChanges();
    }
    

    Misc observations

    These observations most likely are irrelevant, but I feel like I should post it anyway. Here I'll cite the code from the demo source:

      // Document event listeners
    
      @HostListener("document:click")
      onDocumentClick() {
        this.documentClickCount++;
        console.log("[BUG] Document click count:", this.documentClickCount);
      }
    
      @HostListener("document:pointerdown")
      onDocumentPointerDown() {
        this.documentPointerDownCount++;
        console.log("[BUG] Document pointer down count:", this.documentPointerDownCount);
      }
    
      @HostListener("document:pointerup")
      onDocumentPointerUp() {
        this.documentPointerUpCount++;
        console.log("[BUG] Document pointer up count:", this.documentPointerUpCount);
      }
    
      // Window event listeners
    
      // These seem to work just fine.
      // I've provided description on document event listener behavior changes when uncommenting window event listeners.
      // I'm sure that this is irrelevant to the problem, but I felt like I still should do it.
    
      // Uncommentig only this one makes document listeners update on click.
      // document:pointerup and document:pointerdown events fired when holding finger or swiping still don't work.
    
      /*
      @HostListener("window:click")
      onWindowClick() {
        this.windowClickCount++;
        console.log("[BUG] Window click count:", this.windowClickCount);
      }
      */
    
      // Uncommenting only this one makes:
      // 1. document:pointerdown work.
      // 2. document:click update from 0 and after holding or swiping only after second click. Displayed value is: documentClickCount - 1.
      // 3. document:pointerup update from 0 only after second click. Displayed value is: documentPointerUpCount - 1.
    
      /*
      @HostListener("window:pointerdown")
      onWindowPointerDown() {
        this.windowPointerDownCount++;
        console.log("[BUG] Window pointer down count:", this.windowPointerDownCount);
      }
      */
    
      // Uncommenting only this one makes:
      // 1. document:pointerdown and document:pointerup update on first click.
      // 2. document:click update after second click.
      // 3. Everything update after holding or swiping and after click. Displayed values are competely off.
      // Well, the behavior is weird, and I might have missed something in the list above.
    
      /*
      @HostListener("window:pointerup")
      onWindowPointerUp() {
        this.windowPointerUpCount++;
        console.log("[BUG] Window pointer up count:", this.windowPointerUpCount);
      }
      */
    
    needs: reply 
    opened by matafokka 3
  • bug: ion-button expand option not working correctly

    bug: ion-button expand option not working correctly

    Prerequisites

    Ionic Framework Version

    • [ ] v4.x
    • [ ] v5.x
    • [ ] v6.x
    • [ ] Nightly

    Current Behavior

    Currently both the expand='full' and expand='block' will make it full with. Only the border radius changes.

    Screenshot 2023-01-05 at 13 16 31

    Expected Behavior

    It should not be full width for the block property and It shouldn't affect the border radius.

    Steps to Reproduce

    <ion-button expand="block">Block</ion-button>
    <ion-button expand="full">Full</ion-button>
    

    Code Reproduction URL

    https://stackblitz.com/run?file=src%2Fapp%2Fapp.component.ts

    Ionic Info

    Ionic:

    Ionic CLI : 6.20.3 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.2.7

    Capacitor:

    Capacitor CLI : 4.1.0 @capacitor/android : 4.1.0 @capacitor/core : 4.1.0 @capacitor/ios : 4.1.0

    Utility:

    cordova-res : 0.15.4 native-run (update available: 1.7.1) : 1.6.0

    System:

    NodeJS : v16.14.0 (/usr/local/bin/node) npm : 8.3.1 OS : macOS

    Additional Information

    No response

    needs: reply 
    opened by SaroGFX 1
  • bug: Unable to modify a page animation after a replace with Vue

    bug: Unable to modify a page animation after a replace with Vue

    Prerequisites

    Ionic Framework Version

    • [ ] v4.x
    • [ ] v5.x
    • [X] v6.x
    • [ ] Nightly

    Current Behavior

    When changing the page, with ionRouter.replace, my animation is not updated on its second call. If I make a custom animation during the replace, then I can't change the animation at the next replace.

    Expected Behavior

    I would like to swipe left and trigger a page change to the left. Once the page has changed, I would like to drag to the right and trigger an animation to the right.

    Steps to Reproduce

    My animations :

    import { createAnimation } from '@ionic/vue';
    
    export const animationOpacity0to1 = (element, duration) =>
      createAnimation().addElement(element).duration(duration).fromTo('opacity', '0', '1');
    
    export const animationTranslateXOpacity = (element, duration, direction = 'right') =>
      createAnimation()
        .addElement(element)
        .duration(duration)
        .fromTo('opacity', '0', '1')
        .fromTo('transform', 'translateX(0px)', direction === 'right' ? 'translateX(100%)' : 'translateX(-100%)');
    

    My animation builder :

    const recupereAnimationBuilder = (direction) => (baseEl, opts) =>
      createAnimation().addAnimation([
        animationOpacity0to1(opts.enteringEl, 300),
        animationTranslateXOpacity(opts.leavingEl, 200, direction),
      ]);
    

    My gesture (call from onIonViewWillEnter):

    const activeChangementDePageSwipe = () => {
      createGesture({
        el: swiperZone.value,
        threshold: 150,
        gestureName: 'change-page',
        onMove: (ev) => onSwipePage(ev),
      }).enable();
    };
    

    onMove event :

    const onSwipePage = (ev) => {
      const nouvelId = ev.deltaX < 0 ? 'id_1' : 'id_1';
    
      const animation =
        ev.deltaX > 0
          ? recupereAnimationBuilder('right')
          : recupereAnimationBuilder('left');
    
      router.replace({ name: 'Vetement', params: { id: nouvelId } }, animation);
    
      return true;
    }
    

    Code Reproduction URL

    No response

    Ionic Info

    Ionic:
    
       Ionic CLI       : 6.20.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
       Ionic Framework : @ionic/vue 6.1.4
    
    Capacitor:
    
       Capacitor CLI      : 4.1.0
       @capacitor/android : 4.1.0
       @capacitor/core    : 4.1.0
       @capacitor/ios     : 4.1.0
    
    Utility:
    
       cordova-res                          : 0.15.4
       native-run (update available: 1.7.1) : 1.6.0
    
    System:
    
       NodeJS : v16.17.1 (/opt/homebrew/Cellar/[email protected]/16.17.1/bin/node)
       npm    : 8.15.0
       OS     : macOS
    

    Additional Information

    No response

    ionitron: needs reproduction 
    opened by corentincouq 2
  • bug: json5  <2.2.2 Severity: high tsconfig-paths  3.5.0 - 3.9.0 || 3.11.0 - 3.14.1

    bug: json5 <2.2.2 Severity: high tsconfig-paths 3.5.0 - 3.9.0 || 3.11.0 - 3.14.1

    Prerequisites

    Ionic Framework Version

    • [ ] v4.x
    • [ ] v5.x
    • [X] v6.x
    • [ ] Nightly

    Current Behavior

    `# npm audit report

    json5 <2.2.2 Severity: high Prototype Pollution in JSON5 via Parse Method - https://github.com/advisories/GHSA-9c47-m6qq-7p4h fix available via npm audit fix node_modules/tsconfig-paths/node_modules/json5 tsconfig-paths 3.5.0 - 3.9.0 || 3.11.0 - 3.14.1 Depends on vulnerable versions of json5 node_modules/tsconfig-paths

    2 high severity vulnerabilities

    To address all issues, run: npm audit fix`

    Expected Behavior

    Getting this error one i create ionic project, or when I try to install a new package, and npm audit fix doesn't make any change.

    Steps to Reproduce

    Getting this error one i create ionic project, or when I try to install a new package, and npm audit fix doesn't make any change.

    Code Reproduction URL

    No response

    Ionic Info

    Ionic info :

    Ionic CLI : 6.20.6 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.4.1 @angular-devkit/build-angular : 15.0.4 @angular-devkit/schematics : 15.0.4 @angular/cli : 15.0.4 @ionic/angular-toolkit : 6.1.0

    Capacitor:

    Capacitor CLI : 4.6.1 @capacitor/android : not installed @capacitor/core : 4.6.1 @capacitor/ios : not installed

    Utility:

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

    System:

    NodeJS : v16.13.0 (/usr/local/bin/node) npm : 8.19.2 OS : macOS

    Additional Information

    No response

    needs: reply 
    opened by thameurr 4
Releases(v6.4.2-nightly.20230106)
Owner
Ionic
Powerful tools and services for building cross-platform mobile apps
Ionic
Progressive Web App that allows you to create workout tables

WORKOUT Progressive Web App that allows you to create workout tables. ...work in

Piero 0 Jan 10, 2022
NativeScript empowers you to access native platform APIs from JavaScript directly. Angular, Capacitor, Ionic, React, Svelte, Vue and you name it compatible.

NativeScript empowers you to access native APIs from JavaScript directly. The framework currently provides iOS and Android runtimes for rich mobile de

NativeScript 22k Dec 31, 2022
🚀 React Native Segmented Control, Pure Javascript for iOS and Android

Installation Add the dependency: npm i react-native-segmented-control-2 Peer Dependencies Zero Dependency ?? Usage Import import SegmentedControl from

FreakyCoder 11 Nov 10, 2022
Tonomy ID is the cross-platform mobile wallet (Android and iOS) for public and private EOSIO blockchains

Tonomy ID is the cross-platform mobile wallet (Android and iOS) for public and private EOSIO blockchains. This application allows you to sign transactions on the block chain, share your DID and Verifiable Credentials containing your identity with others in a consensual way and log into web2 and web3 applications. If you lose your phone several mechanisms exist to allow you to recover your account without trusting anyone with custody of your private keys.

null 7 Dec 24, 2022
A Kotlin binding to webview, a tiny cross-platform webview library, supports Java and Native.

webviewko provides a Kotlin/JVM and a Kotlin/Native(experimental) binding to webview, a tiny cross-platform webview library to build modern cross-platform GUIs using WebView2, WebKit and WebKitGTK.

Winterreisender 17 Dec 30, 2022
Movie App - "Beam". CSS 216 Final Project

BeamApp Movie App - Beam. CSS 216 Android Programming | FINAL PROJECT Built With ?? Kotlin - Official programming language for Android development. Na

Nurgali Soltangeldinov 2 Dec 15, 2022
Money Manager Ex is a free, open-source, cross-platform, easy-to-use personal finance software

Money Manager Ex is a free, open-source, cross-platform, easy-to-use personal finance software. It primarily helps organize one's finances and keeps track of where, when and how the money goes.

Money Manager EX 1.2k Dec 31, 2022
CoolReader 3 - cross platform open source e-book reader

CoolReader 3 - cross platform open source e-book reader (c) Vadim Lopatin, 1998-2018 Development is moved to GitHub https://github.com/buggins/coo

Vadim Lopatin 302 Jan 4, 2023
An easy, cross-platform method of keeping track of other people's timezones

TimezoneDB TimezoneDB is an easy, cross-platform method of keeping track of others' timezones. This project is inspired by PronounDB, and we'd like to

Synapse Technologies, LLC 13 Nov 16, 2022
⚡️ A supercharged native Web View for iOS and Android ⚡️

⚡️ A supercharged native Web View for iOS and Android ⚡️ Ionic Portals is a supercharged native Web View component for iOS and Android that lets you a

Ionic 46 Dec 27, 2022
🌄 Photo editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and PhotoEditor (Android)

React Native Photo Editor (RNPE) ?? Image editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and Ph

Baron Ha. 242 Dec 28, 2022
📲💬 react-native-fontext is a lightweight library to integrate fonts in your React Native application that works seamlessly in android and iOS devices.

React Native Fontext react-native-fontext is a lightweight library to integrate fonts in your React Native application that works seamlessly in androi

mroads 9 Dec 3, 2021
Matomo wrapper for React-Native. Supports Android and iOS. Fixed issues for native platforms build that are present in the official package.

@mccsoft/react-native-matomo Matomo wrapper for React-Native. Supports Android and iOS. Fixed issues for native platforms build that are present in th

MCC Soft 4 Dec 29, 2022
Koliber - Android weather & air pollution app. Current air quality index and forecast

Donate If you like this app please donate Bitcoin: bc1qwqqpuy54qfja7h5dzpd9swgrn

Krzysztof Kobiałka 2 Oct 22, 2022
Help users of coding platforms to create findable, well documented, secure and offering good quality projects

The Ambassador The Ambassador will help users of coding platforms to create findable, well documented and offering good quality projects. It measures

F. Hoffmann-La Roche 15 Nov 7, 2022
Room : Sleep Quality Tracker app

Room - SleepQualityTracker app This is the toy app for Lesson 6 of the Android App Development in Kotlin course on Udacity. SleepQualityTracker The Sl

Martin 0 Dec 8, 2021
Powerful, comprehensice application performance management platform of Android

OutSiderAPM移动性能监控平台(持续开发中) 项目优势 实时掌控应用性能 降低性能定位成本 有效提升用户体验 监控模块 OutSiderAPM目前支持如下性能指标: 交互分析:分析Activity生命周期耗时,帮助提升页面打开速度,优化用户UI体验 网络请求分析:监控流量使用情况,发现并定位

jinx 336 Jan 3, 2023
A framework for building native applications using React

React Native Learn once, write anywhere: Build mobile apps with React. Getting Started · Learn the Basics · Showcase · Contribute · Community · Suppor

Meta 106.9k Jan 8, 2023
KotlinSample - Template project for building a GTK3 Kotlin/Native app against the elementary Flatpak runtime

GTK3 Kotlin/Native Sample This is a working example of how to write and build a

David Hewitt 10 Dec 5, 2022