Tips and Tricks if you REALLY want to use Ionic (Part 1)

Native Transitions

One of the main issues of Ionic is the fluidity in the transitions between screens (mostly in Android), a workaround for this issue is to use ionic-native-transitions.

//Add this lines to your app.js file

$ionicNativeTransitionsProvider.enable(**true**);  
$ionicNativeTransitionsProvider.setDefaultOptions({  
  duration: 400, // in milliseconds (ms), default 400  
});  

$ionicNativeTransitionsProvider.setDefaultTransition({  
  type: 'slide',  
  direction: 'left'  
});  

$ionicNativeTransitionsProvider.setDefaultBackTransition({  
  type: 'slide',  
  direction: 'right'  
});

Native Scroll

To have a more fluid scroll you can disable the javascript scrolling and enable the native scroll in the device, to do so you need to add this line of code in your app.js file:

$ionicConfigProvider.scrolling.jsScrolling(**false**);

Splashscreen

To avoid glitch or white screens between the splashscreen and showing the app content you can only hide the splashscreen after the platform is really ready, for that you need to add this line of code in config.xml file:

And this to your app.js file:

$ionicPlatform.ready(**function** () {  
  setTimeout(**function** () {  
    **if** (navigator.splashscreen) {  
      navigator.splashscreen.hide();  
    }  
  }, 100);  
});

Make sure that you have the cordova-plugin-splashscreen installed.

Crosswalk

To improve the perfomance of the WebView install the cordova-plugin-crosswalk-webview.

Add this lines to config.xml file to disable the WebView to bounce in iOS and make the crosswalk animatable:

<preference name="webviewbounce" value="false" />  
<preference name="UIWebViewBounce" value="false" />  
<preference name="CrosswalkAnimatable" value="true" />

Change color status bar in iOS

Add this lines to your app.js file:

if (window.cordova) {  
  if (cordova.platformId === 'ios') {  
    StatusBar.overlaysWebView(**true**);  
    StatusBar.styleLightContent();  
    StatusBar.backgroundColorByHexString("#ffffff");  
  }  
}

Cache

If you want to cache your views and controllers, you can define that option in your $stateProvider:

$stateProvider  
  .state('home', {  
    url: '/home',  
    cache: true,  
    templateUrl: 'templates/authentication/home.html',  
    controller: 'HomeController'  
  })

Make some content scrollable

To make a view scrollable you just need to add that configuration in your ion-content:

<ion-content scroll="true">  
  <div class="col">  
  </div>  
</ion-content>

You can also add a ion-scroll:

<ion-scroll `direction="y"`\>  
  <ion-list></ion-list>  
</ion-scroll>

Hope you enjoy it!