Ionic 5 Makes a Grand Release with iOS 13 Design Updates and Much More
Tags: appdevelopment, mobileappdevelopme, popular
Published: 2020-03-03 12:32:41

---
title: Ionic 5 Makes a Grand Release with iOS 13 Design Updates and Much More
published: true
date: 2020-02-17 12:15:22 UTC
tags: App Development,Mobile App Developme,Popular
canonical_url: https://aglowiditsolutions.com/blog/ionic-5-release/
---

[![Ionic 5](https://aglowiditsolutions-6lohnuosd1nx.netdna-ssl.com/wp-content/uploads/2020/02/Ionic-5-1024x512.png)](https://aglowiditsolutions.com/blog/ionic-5-release/ "Ionic 5 Makes a Grand Release with iOS 13 Design Updates and Much More")

The app development platform, Ionic came up with its most anticipated update ‘Ionic 5’ with exciting features including new UI components, gestures, custom animations API, icons, colors, themes and much more. Most importantly, the latest release brings up with iOS 13 design updates as well as official React and Angular integrations.

In this article, we shall be discussing everything about [Ionic 5](https://dev.to/dotnetkow/announcing-ionic-5-4mib-temp-slug-228751), its updates, features, and functionalities. We shall also understand how the new release will bring a revolutionary impact on cross-platform development. But before that, lets check this tweet published by ionic and its team.

<center>
<blockquote>
<p dir="ltr" lang="en">IONIC 5 IS HERE! <img src="https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f389.png" alt="🎉" style="height: 1em; max-height: 1em;"></p>
<p>The biggest design update ever in the history of Ionic:</p>
<p> New iOS &amp; Android component designs<br>
 New React &amp; Angular starters<br>
 Latest Ionicons icon pack<br>
 New Animations API</p>
<p>Check the Blog for the full story and get building! <img src="https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f447.png" alt="👇" style="height: 1em; max-height: 1em;"><a href="https://t.co/rAvmCeVqxI">https://t.co/rAvmCeVqxI</a></p>
<p>— ionic (@Ionicframework) <a href="https://twitter.com/Ionicframework/status/1227310521151623168?ref_src=twsrc%5Etfw">February 11, 2020</a></p>
</blockquote>
<p></p>
</center>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

**<u>Let’s begin with…</u>**

## **How to Upgrade Ionic 5**

When any technology comes up with major version release, it ensures that it does not involve any complex processes so that users can easily upgrade it. Ionic 5 applies the same policies, and the release is easy to update. The new version use Web components, so the changes in API are separate from the changes in UI components and JavaScript. At the same time, if you are using the previous version of Ionic, such as Ionic 4, then upgrading is quite easy.

If you want to upgrade it right now, you should update the Ionic 4 release (4.11.10). It will ensure that there is no deprecation warnings specific to your app in the developer console. Then you are ready to go ahead using the following the command;

# for an angular app

`npm i @ionic/angular@latest ` –save

# for a react app

`npm i @ionic/react@latest ` –save

`npm i @ionic/react-router@latest ` –save

`npm i ionicons@latest ` –save

# for a stencil / vanilla JS app

`npm i @ionic/core@latest ` –save

Note: You can also take help of its official website with the [migration guide](https://ionicframework.com/docs/building/migration).

<center><a href="https://aglowiditsolutions.com/hire-ionic-app-developers/" target="_blank" rel="noopener noreferrer"><img src="https://aglowiditsolutions-6lohnuosd1nx.netdna-ssl.com/wp-content/uploads/2020/02/Hire-Ionic-Developers.png" alt="Hire Ionic Developers" width="900" height="169" srcset="https://aglowiditsolutions-6lohnuosd1nx.netdna-ssl.com/wp-content/uploads/2020/02/Hire-Ionic-Developers.png 900w, https://aglowiditsolutions-6lohnuosd1nx.netdna-ssl.com/wp-content/uploads/2020/02/Hire-Ionic-Developers-340x64.png 340w, https://aglowiditsolutions-6lohnuosd1nx.netdna-ssl.com/wp-content/uploads/2020/02/Hire-Ionic-Developers-768x144.png 768w, https://aglowiditsolutions-6lohnuosd1nx.netdna-ssl.com/wp-content/uploads/2020/02/Hire-Ionic-Developers-624x117.png 624w" sizes="(max-width: 900px) 100vw, 900px"></a></center>
## **iOS Design Updates**

Ionic 5 has come up with a massive design upgrade, considering the recent release of Apple’s iOS 13. You can feel the changes across UI components that the Ionic has done provided to make it compatible and matched to the native iOS. Here are a list of changes in the Components;

### Segment Received New Design

As the iOS 13 came up with complete makeover in iOS 13 release, Ionic 5 has considered it in this release has brought a drastic change in iOS Segment design. All the difference and changes that Ionic 5 has for iOS design are clearly visible in the image given below;

<video autoplay="autoplay" loop="loop" width="550" height="550"><source src="https://s3.amazonaws.com/ionicframework.com/videos/segment-4.mov" type="video/mp4"></source></video>  
<center>Source: <a href="https://ionicframework.com/">Ionic</a>
</center>

<video autoplay="autoplay" loop="loop" width="550" height="550"><source src="https://s3.amazonaws.com/ionicframework.com/videos/segment-5.mov" type="video/mp4"></source></video>  
<center>Source: <a href="https://ionicframework.com/">Ionic</a>
</center>

Previously (before iOS 13), there used to be borders and filled background to suggest the checked and unchecked buttons while the latest one (iOS 13) comes up with a single drag indicator that slides between buttons to show status.

### **Header with Collapsing Title**

The new design upgrade includes the properties which enable the shrinking large, small, and collapsible title. The upgrade makes the Ionic 5 compatible with the iOS 13’s collapsible header with different size options.  When you use the Ionic five, you don’t need to different size options, but it will do it automatically.

### **Large Title/Small Title**

When you scroll the page, after a certain point, the title collapse into the different size, though you have the option not to use collapsing. The standard title is placed above the content while the large one within the content. When you scroll the content above, the large title will be transformed into the standard one. Take a look in the image given below;

<video autoplay="autoplay" loop="loop" width="550" height="550"><source src="https://s3.amazonaws.com/ionicframework.com/videos/large-title-light.mov" type="video/mp4"></source></video>  
<center>Source: <a href="https://ionicframework.com/">Ionic</a>
</center>

<video autoplay="autoplay" loop="loop" width="550" height="550"><source src="https://s3.amazonaws.com/ionicframework.com/videos/large-title-dark.mov" type="video/mp4"></source></video>  
<center>Source: <a href="https://ionicframework.com/">Ionic</a>
</center>

As far as the small title is concerned, it is known as the header note, which you can see within and between the toolbars. The small title are often standard-sized, used combining with Swipe to Close Modals. Swipe the Close Modals are mainly visible in iOS devices as you can see the pages, instead of requiring tap to close the button, enables the users to push back the page, and it will inset with the page behind it. You can see the effect in the next points given below.

<video autoplay="autoplay" loop="loop" width="550" height="550"><source src="https://s3.amazonaws.com/ionicframework.com/videos/modal-light.mov" type="video/mp4"></source></video>  
<center>Source: <a href="https://ionicframework.com/">Ionic</a>
</center>

<video autoplay="autoplay" loop="loop" width="550" height="550"><source src="https://s3.amazonaws.com/ionicframework.com/videos/modal-dark.mov%20" type="video/mp4"></source></video>  
<center>Source: <a href="https://ionicframework.com/">Ionic</a>
</center>

### **Menu Overlay Design**

iOS in its previous version, there used to be ‘reveal’ type menu, which a user can push over the main content to see the menu while the new design came with a new feature that will overlay the content. Here’s how it happens;

<video autoplay="autoplay" loop="loop" width="550" height="550"><source src="https://s3.amazonaws.com/ionicframework.com/videos/menu-light.mov" type="video/mp4"></source></video>  
<center>Source: <a href="https://ionicframework.com/">Ionic</a>
</center>

<video autoplay="autoplay" loop="loop" width="550" height="550"><source src="https://s3.amazonaws.com/ionicframework.com/videos/menu-dark.mov" type="video/mp4"></source></video>  
<center>Source: <a href="https://ionicframework.com/">Ionic</a>
</center>

### 

### **Pull Page to Refresh**

Refresher is now above the header with the large title. The spinner tick is given, which will help users understand how much the page needs to be pulled down. Material Design refresher has also received the refresher implying the same logic.

<video autoplay="autoplay" loop="loop" width="550" height="550"><source src="https://s3.amazonaws.com/ionicframework.com/videos/refresher-light.mov" type="video/mp4"></source></video>  
<center>Source: <a href="https://ionicframework.com/">Ionic</a>
</center>

<video autoplay="autoplay" loop="loop" width="550" height="550"><source src="https://s3.amazonaws.com/ionicframework.com/videos/refresher-dark.mov" type="video/mp4"></source></video>  
<center>Source: <a href="https://ionicframework.com/">Ionic</a>
</center>

Similarly, the List headers also received an upgrade based on the iOS 13 design. You can see the image given below compare it with the previous iOS updates;

 ![list-header-light](https://ionicframework.com/blog/wp-content/uploads/2020/01/list-header-light.png "Ionic list header upgrade")

list-header-light

<center>Source: <a href="https://ionicframework.com/">Ionic</a>
</center>

 ![list-header-dark](https://ionicframework.com/blog/wp-content/uploads/2020/01/list-header-dark.png "Ionic list header dark upgrade")

List header dark

<center>Source: <a href="https://ionicframework.com/">Ionic</a>
</center>

<center>
<blockquote><p><em><strong>Also Check out our Article :</strong> <a href="https://dev.to/ronakpatel70/how-ionic-cut-down-your-mobile-app-development-cost-3l9c-temp-slug-181484" target="_blank" rel="noopener noreferrer">How Ionic Cut Down Your Mobile App Development Cost</a></em></p></blockquote>
<p></p>
</center>
## **Open Source Animations Utility**

Ionic, with a view to allowing developers to create highly performant animations, introduced open-source animations utility named as Ionic Animations. It will have tools that developers require while building the animations.

## **Icons Library with Loaf New Icons**

Developers can utilize the free and open-source Icon library introduced in Ionic 5 as Ionicons.

<center>
<blockquote>
<p dir="ltr" lang="en">Today, we are thrilled to announce…</p>
<p><img src="https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f680.png" alt="🚀" style="height: 1em; max-height: 1em;"> IONICONS V5 <img src="https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f680.png" alt="🚀" style="height: 1em; max-height: 1em;"></p>
<p> Over 1200 hand crafted icons<br>
 Three distinct form variants<br>
 Platform specific control</p>
<p>Check out what’s new in this latest release <img src="https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f447.png" alt="👇" style="height: 1em; max-height: 1em;"><a href="https://t.co/Dgyksc4R4B">https://t.co/Dgyksc4R4B</a></p>
<p>— ionic (@Ionicframework) <a href="https://twitter.com/Ionicframework/status/1225480683503726594?ref_src=twsrc%5Etfw">February 6, 2020</a></p>
</blockquote>
<p><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<p></p>
</center>

**<u>However, to the use icons, you need to follow the changes it has come up with;</u>**

- No separate set of icons for different modes
- Icons available in three new variants, which range from ‘outline,’ ‘fill,’ and ‘sharp.’
- If you are using two different modes, then icons will not change according to the mode
- You can set the icon per mode, but you need to utilize ‘ios’ and ‘md’ properties

<center>
<br>
<div style="width: 1610px">
<img title="Ionicons 5" src="https://ionicframework.com/blog/wp-content/uploads/2020/01/ionicons-5.gif" alt="Ionicons 5" width="1600" height="600"><p>Ionicons 5</p>
</div>
</center>
## **Ionic Colors**

Ionic comes with new Ionic Colors as default so that developers can get unique colors automatically if they have created using starters. App developed with Angular and ReactJS, then developers need to define it in the theme/variables.scss file.  Developers can make use not only to the default colors but also to the recommended one as well when you use this in dark mode.

<center>
<div style="width: 838px">
<img title="Ionic colors light" src="https://ionicframework.com/blog/wp-content/uploads/2020/01/ionic-colors-light.png" alt="ionic-colors-light" width="828" height="1792"><p>ionic-colors</p>
</div>
<p></p>
</center>

<center>
<div style="width: 838px">
<img title="Dark Ionic colors" src="https://ionicframework.com/blog/wp-content/uploads/2020/01/ionic-colors-dark.png" alt="ionic-colors-dark" width="828" height="1792"><p>Ionic dark colors</p>
</div>
<p></p>
</center>

<center>
<blockquote><p><em><strong>Also Check out our Article :</strong> <a href="https://dev.to/ronakpatel70/cross-platform-app-development-challenges-solutions-5a9e-temp-slug-3468454" target="_blank" rel="noopener noreferrer">Cross-Platform App Development Challenges &amp; Solutions</a></em></p></blockquote>
<p></p>
</center>
## **Starters Get New Look**

Starters in Ionic received a complete makeover along with the components. You can see the changes in the list of starters given below;

<center><img title="Ionic blank light " src="https://ionicframework.com/blog/wp-content/uploads/2020/02/blank-light.png" alt="blank-light"></center>

 

<center><img title="Ionic blank dark" src="https://ionicframework.com/blog/wp-content/uploads/2020/02/blank-dark.png" alt="blank-dark"></center>

## **Customization**

Ionic, adding more CSS variables and converting scoped components to Shadow DOM, has made it easier to customize or style. Here are the list of components converted to Shadow DOM;

- Back Button
- Card
- Segment
- Split Pane

Shadow DOM is used for its ability to allow customization without affecting the other components. At the same time, when Shadow DOM is used, it enables to use of CSS custom properties and allows easier theming, which in fact, was missing in the previous major release.

As far as scoped components are concerned, it allows CSS variables too, but it makes users override stiff. In such a case of replacing the Ionic components, developers will have two option left, either utilize ‘!important’ in the CSS style or write an overly complicated selector.

You can learn more on to this topic  from the [Ionic’s support page here.](https://ionicframework.com/docs/theming/themes)

## **Angular Ivy**

Angular released its most anticipated version 9, with Ivy as added render, recently and Ionic followed with a set of changes, making the Ionic 5 fully compatible with Angular’s Ivy. Ivy enables developers to keep the bundle size smaller and improve loading time and performance.

<center>
<blockquote><p><em><strong>Also Check out our Article :</strong> <a href="https://dev.to/saurabhbarot/google-rolls-out-angular-9-with-major-changes-check-now-3j2g-temp-slug-6500571" target="_blank" rel="noopener noreferrer">Google Rolls Out Angular 9 with Major Changes – Check Now</a></em></p></blockquote>
<p></p>
</center>

**Final Thoughts**

In short, you have open-source Ionic 5 with the most advanced features and usability. Stay tuned for the more new updates.