During any native app project, there are a number of assets that are required to submit your build to the app store. As a starting point, Astro provides a number of native features and plugins. Before the build begins, it's a good idea to understand the pre-built Astro Components and how they can be customized.
The alert view plugin allows you to create a simple one or two button modal that blocks input to the rest of the screen. Alert views are useful when you want to display a popup to the user with an Ok and/or Cancel button.
- To display a small amount of information to a user.
- To confirm or cancel a user-initiated function.
- Remove either the title or sub text.
- Change button names.
- (Android) Button color.
- The alert view can be used to replace a text-only web popup or tooltip, making the app feel more native.
The counter badge plugin allows you to overlay an icon with a rounded badge in it’s top right-hand corner. The badge defaults to having a red background with white text. The badge number can contain an integer of zero or greater. By default, the badge is not shown when the number is set to zero.
- To display a visual count of the number of items in a list.
- Change background color.
- Change text color.
- Most commonly used in the header bar to indicate # of items in cart.
- Can also be used to show notifications, messages, or total number of items in any list.
Default Loading Spinner
The DefaultLoaderPlugin uses a system-provided progress indicator to show that loading is happening.
- To indicate that the page is loading.
- Change Loader color to a specified HEX value.
- (iOS only) Change background color to a specified HEX value.
- Only really necessary when you are loading new web views (in the future, hopefully this can be replaced by page skeletons).
- As a general rule, should only be used for actions that take 2-10 seconds (any longer can become very frustrating for the user).
- Using the system default loader can create the perception that the device/system is to blame for performance issues, rather than the app itself. Read more.
- In some cases, it may be more appropriate to have a loading animation on a button (i.e. when tapping “Add To Cart”), rather than the full-page loader.
The drawer plugin allows you to add left and right fly-out views.
- Displays a fly-out menu/navigation or other relevant page upon tapping a specified icon.
- The contents of the drawer can hold either a web view or any other custom native plugin. In the case of a web view, contents can be customized completely.
- Often used for global navigation (hamburger menu), or Shopping Cart.
- Not recommended to use a hamburger menu navigation in conjunction with a tab bar navigation.
The header bar plugin allows you to add icons in the left, center, and right positions.
- A staple component in every app.
- Orients the users and provides a place for navigation and other actions.
- Background color.
- (Android) Add/Remove drop shadow.
- (iOS) Add/Remove border (border color is medium grey by default and can’t be modified).
- (iOS) Set background as opaque/translucent.
- (iOS) Show/hide text that appears beside the back icon.
- Choose up to 3 icons (1 on left hand side, 2 on the right hand side).
- Replace title text with image (logo).
- Only recommended to replace the page title text with a logo on the homescreen (not globally).
- Icons in the header bar can change depending on context. For instance, you may choose to add a Share icon on the PDP, but remove it on all other pages.
List Select (Action Sheet)
The list select plugin allows you to present a list of two or more options to the user with an optional Cancel button. The input to the rest of the UI will be blocked until the list select is dismissed, either by cancelling or selecting an option.
- Allows the user to initiate tasks.
- Can be used to request confirmation before performing a potentially destructive operation.
- (iOS) Cancel button may be made red.
- (Android) Set color of dismiss button.
- Items that are permanent or potentially destructive should be displayed in red.
The modal view plugin allows you to create a modal with a plugin’s view. A modal view is useful when you want to display content to the user that blocks interaction with the main screen.
- Displays a view that will not disrupt the stacked navigation below it.
- Creates a focussed state for a user to complete a particular task.
- Add an icon or text to close the modal.
- The contents of the modal (underneath the header bar) can hold either a web view or any other custom native plugin. In the case of a web view, contents can be customized completely.
- When using a web view inside the body of the modal, consider that the entire page will need to be loaded in. Even if you are hiding most elements, this can have a huge impact on performance when loading larger pages.
- e.g. Loading a filter menu on a PLP. (The entire PLP will need to be loaded into the modal before hiding certain elements). In cases like this, it is better to use a web-based modal and hide the tab and header bar as the modal slides onto the screen.
- Provide an obvious and safe way to exit the modal. Use text instead of an icon, that clearly communicates the outcome that will take place by dismissing the modal view (e.g. Save, Close, Cancel, etc.)
- Keep modal tasks simple and focussed.
Prompt View Plugin
The prompt view plugin allows you to show a popup that asks the user for text input. The popup will block input to the rest of the screen and there is a Cancel and customizable Submit button, both of which close the popup. The Submit button can only be pressed if some text has been entered, otherwise the button is disabled.
- Allows users to input and submit text or feedback.
- All text labels (text only, not styling).
- Can be used to submit feedback on the app (i.e. as an extension of the Review Plugin).
- Can be used as a contact form.
|User is prompted for their experience|
|Negative Track Positive Track|
|If user selected “Other”|
The review plugin displays a modal, allowing you to gather data from users on their experience using your app by reviewing it in the app store.
As users are interacting with your app, there is the possibility for them to attain points. Points can be issued arbitrarily. For example, when a user purchases a product, or favorites an item, they will collect X number of points. When a user accumulates a specified number of points, they are presented with the review modal.
- Allows users to input and submit feedback.
- All text labels (text only, not styling).
- Set the point threshold and number of points given for each action.
- Replace emojis with another icon OR text.
- The review plugin can be blocked from certain pages that would disrupt the purchase flow. For instance, it is a good idea to block the plugin during the checkout flow. In this case, the plugin would be presented to the user at the next point when they are on an “eligible” page.
The search bar plugin allows you to display a native search bar and receive events when the user interacts with it.
- Allows users to search for products, items or terms within the app.
- Set background colour of search bar’s container.
- In most cases, it is best to provide a focused search experience. There are numerous ways of achieving this, for example: putting the search in a modal, fading out and blocking the background when the search field is focussed, having a dedicated search tab, etc.
- If possible, include auto-suggest to improve the user experience
- Aim for a consistent native experience when using this plugin. Refer to the search bars on the App Store (iOS) and Google Play Store (Android) for guidance.
The segmented plugin allows you to add a segmented bar (a.k.a. mutually exclusive radio buttons) and set unique events for each segment to send when it is selected. This bar usually appears directly below the header bar. Within the control, all segments are equal in width.
- While a tab bar is used for globally switching between discrete sections of your app; the segmented control can be used for locally switching between different perspectives of a single view.
- Set background color of the segmented control.
- Set highlight color of the segmented control
- In Android, this means the text color and underline of the selected item.
- (Android) Set text color of unselected items.
- Can be used as a filtering system for content, when there are only a few filters to choose from.
- Limit the number of segments to improve usability, as wider segments are easier to tap.
The sharing plugin allows you to share data from your app with other apps on the device.
- To share specific data from your app with other apps including email, and social media.
- (Optional) Choose a message to share.
- Often used on product detail pages to share a specific product with others.
- The apps displayed in the share plugin will vary depending on what apps are installed on the users’ device.
Tab Bar Plugin
The tab bar plugin allows you to add a bar with customizable items and to get notified when an item is selected. The tab bar appears at the bottom of an app screen and has a fixed position.
- Used as a primary navigation for the app.
- Provides the ability to quickly switch between different sections of the app.
- Set inactive and active colour of tabs (icons and labels).
- Choose icons for each tab.
- Set background color.
- (iOS) Set the tab bar as opaque or translucent.
- (Android) Show/hide border on top of the tab bar.
- Use a tab bar strictly for navigation, to organize information at the app level.
- Don’t disable or remove a tab when its function is unavailable. Instead, explain why the content of the tab is unavailable inside of the tab itself.
- Include essential tabs only
- As a general rule, aim for between 3–5 tabs. If there are more than five tabs, the fifth will become a “More” tab and contain the remainder of the tabs.
- Try to avoid overlap between the different tabs. Each tab’s purpose should be clear and distinct. For instance, you shouldn’t be able to perform the same action in multiple tabs, as it can create confusion.
- Native elements (any icon that appears on the header bar, tab bar, or any other native component:
- Save icons as a
- Save icons as a
- Android icons require five separate sizes for different screen pixel densities. Icons for lower resolution are created automatically from the baseline.
- Icons must be saved with identical filenames in the following folders according to resolution:
- mdpi (1x)
- hdpi (1.5x)
- xhdpi (2x)
- xxhdpi (3x)
- xxxhdpi (4x)
- See http://iconhandbook.co.uk/reference/chart/android/ for more details
- Icons found in web views can be saved as
.svgfiles and follow the same conventions as Mobify PWA apps.
An icon, that will be displayed on the device’s homescreen, will need to be designed for your app. When working with brands, it is common for the app icon to be of that brands logo, but this should not be a limiting factor.
Your app icon should be:
- Take a look at competitors’ icons and think of how you can differentiate yourself.
- This will help your app stand out in the Apple App Store and Google Play Store.
- Ideally, your icon should clearly and easily communicate your app’s purpose, if a brand allows for this.
- Your icon must be readable and recognizable at smaller sizes.
- Test your icon out at various sizes and leave out details and embellishment that get muddled at smaller sizes.
Creating your App Icon
Use the App Icon Sketch Template to create your icon and export it in all of the appropriate sizes.
We recommend creating two versions of the icon: the original icon and a beta icon. The beta icon will be used when your app is in progress; and the final icon will be used when you app launches.
The App Store requires the following images (these will all be auto-generated using the above
|Image Size||File Name||Used For|
|`512px × 512px`||`iTunesArtwork`||App list in iTunes|
|`1024px × 1024px`||`iTunesArtwork@2x`||App list in iTunes on devices with retina display|
|`120px × 120px`||`Iconfirstname.lastname@example.org`||Homescreen on iPhone/iPod Touch with retina display|
|`180px × 180px`||`Iconemail@example.com`||Homescreen on iPhone 6 Plus|
|`76px × 76px`||`Icon-76.png`||Homescreen on iPad|
|`152px × 152px`||`Iconfirstname.lastname@example.org`||Homescreen on iPad with retina display|
|`40px × 40px`||`Icon-Small-40.png`||Spotlight|
|`80px × 80px`||`Icon-Smallemail@example.com`||Spotlight on devices with retina display|
|`120px × 120px`||`Icon-Smallfirstname.lastname@example.org`||Spotlight on iPhone 6 Plus|
|`29px × 29px`||`Icon-Small.png`||Settings|
|`58px × 58px`||`Icon-Small@2x.png`||Settings on devices with retina display|
|`87px × 87px`||`Icon-Small@3x.png`||Settings on iPhone 6 Plus|
Your icon artwork should be taken to the edge of the artboard. Important! It will be automatically cropped with rounded corners by the App Store and device.
For more info on creating iOS icons:
The Google Play Store requires the following images (these will all be autogenerated using the above
|Image Size||File name||Used For|
|`48px × 48px`||`ic_launcher_APP@MDPI.png`||Launcher icon - mdpi (baseline) devices (1x)|
|`72px × 72px`||`ic_launcher_APP@HDPI.png`||Launcher icon - hdpi devices (1.5x)|
|`96px × 96px`||`ic_launcher_APP@XHDPI.png`||Launcher icon - xhdpi devices (2x)|
|`144px × 144px`||`ic_launcher_APP@XXHDPI.png`||Launcher icon - xxhdpi devices (3x)|
|`192px × 192px`||`ic_launcher_APP@XXXHDPI.png`||Launcher icon - xxxhdpi devices (4x)|
|`512px × 512px`||`ic_launcher_APP.png`||Google Play store|
You should crop your icon to the desired shape, and may include a drop shadow. Important! The device will not crop the image for you.
You will also need to create a Feature Graphic. The feature graphic is displayed at the top of your Store Listing page in the Play Store app.
|Image Size||File name||Used For|
|`1024px × 500px`||No requirement||Google Play Store feature graphic|
For more info on creating Android icons:
Screenshots of your app are required in order to submit your app to the App Store / Google Play Store. Screenshots should give the user an idea of what your app is about, and they should feature the main screens in your app.
Use the largest device size of your supported device family. For instance, for an iPhone app, use the iPhone 6S Plus or 7 Plus when taking the screenshots. If your app supports iPad, a separate set of screenshots will be required. You may submit up to four images.
iPhone Screenshot requirements are:
72dpi, RGB colour space, no alpha transparency.
.pngimage file format.
1242px × 2208pxfor hi-res portrait.
2208px × 1242pxfor hi-res landscape.
iPad Screenshot requirements are:
72dpi, RGB colour space, no alpha transparency
.pngimage file format
2048px × 2732pxfor hi-res portrait
2732px × 2048pxfor hi-res landscape
For more information, see the Apple Developer Guide
You may include up to 8 screenshots for each supported device type. Two images are required as a minimum.
.png(no alpha transparency).
- Minimum dimension:
- Maximum dimension:
- The maximum dimension of your screenshot can’t be more than twice as long as the minimum dimension.
For more information, see the Google Developer Console