Navigation

Bottom Navigation bar holds main menu for an App in both iOS and Android. It is the top level of a hierarchy in most cases.

span: 6
---
<>
    <Headline size="small">Android</Headline>
    <img src="/images/mobile/Android-bottomNavigation.png" className="w-100" />
</>
span: 6
---
<>
    <Headline size="small">iOS</Headline>
    <img src="/images/mobile/iOS-bottomNavigation.png" className="w-100" />
</>

Drill-in

Drill-in is a standard pattern in both iOS and Android with slightly different visual representation. This is used to navigation within the hierarchy. The example below shows moving from All Post menu to a detailed post item.

Android

span: 6
---
<>
    <img src="/images/mobile/Android-drillIn-1.png" className="w-100" />
    <BodyText size="xsmall" subdued>This is top of the hierarchy.</BodyText>
</>

span: 6
---
<>
    <img src="/images/mobile/Android-drillIn-2.png" className="w-100" />
    <BodyText size="xsmall" subdued>Use <Icon name="arrow_back" /> to navigation up the hierarchy.</BodyText>
</>

iOS

span: 6
---
<>
    <img src="/images/mobile/iOS-drillIn-1.png" className="w-100" />
    <BodyText size="xsmall" subdued>This is top of the hierarcy.</BodyText>
</>

span: 6
---
<>
    <img src="/images/mobile/iOS-drillIn-2.png" className="w-100" />
    <BodyText size="xsmall" subdued>Use <code>Back</code> to navigation up the hierarcy.</BodyText>
</>

Pull to refresh

Pull to refresh is a standard pattern in both iOS and Android. This should be applied to any page that has updatable data.

span: 6
---
<>
    <Headline size="small">Android</Headline>
    <img src="/images/mobile/Android-refresh.png" className="w-100" />
</>
span: 6
---
<>
    <Headline size="small">iOS</Headline>
    <img src="/images/mobile/iOS-refresh.png" className="w-100" />
</>

More Action

When dealing with more action, iOS and Android use different methods.

Android

Uses Menus to reveal more actions.

span: 6
---
<img src="/images/mobile/Android-more-1.png" className="w-100" />
span: 6
---
<img src="/images/mobile/Android-more-2.png" className="w-100" />

iOS

Uses Action Sheets to reveal more actions.

span: 6
---
<img src="/images/mobile/iOS-more-1.png" className="w-100" />
span: 6
---
<img src="/images/mobile/iOS-more-2.png" className="w-100" />

List Swipe - Horizontal

Both iOS and Android supports multi-directional swipe.

Android

span: 6
---
<img src="/images/mobile/Android-swipe-2.png" className="w-100" />
span: 6
---
<img src="/images/mobile/Android-swipe-1.png" className="w-100" />

iOS

span: 6
---
<img src="/images/mobile/iOS-swipe-2.png" className="w-100" />
span: 6
---
<img src="/images/mobile/iOS-swipe-1.png" className="w-100" />

Modal

Modals are used when requesting for confirmation, create or update existing resource, or iOS uses Alerts, Sheets, and Views for all modal experiences while Android uses different types of Dialog for all modal experiences.

Alert

span: 6
---
<>
    <Headline size="small">Android</Headline>
    <img src="/images/mobile/Android-alert.png" className="w-100" />
    <BodyText size="xsmall" subdued>Dialog component</BodyText>
</>
span: 6
---
<>
    <Headline size="small">iOS</Headline>
    <img src="/images/mobile/iOS-alert.png" className="w-100" />
    <BodyText size="xsmall" subdued>Alert component</BodyText>
</>

Simple Dialog

span: 6
---
<>
    <Headline size="small">Android</Headline>
    <img src="/images/mobile/Android-simpleDialog.png" className="w-100" />
    <BodyText size="xsmall" subdued>Dialog component</BodyText>
</>
span: 6
---
<>
    <Headline size="small">iOS</Headline>
    <img src="/images/mobile/iOS-simpleDialog.png" className="w-100" />
    <BodyText size="xsmall" subdued>Action Sheet component</BodyText>
</>

Fullscreen Dialog

span: 6
---
<>
    <Headline size="small">Android</Headline>
    <img src="/images/mobile/Android-fullscreenDialog.png" className="w-100" />
    <BodyText size="xsmall" subdued>Dialog component</BodyText>
</>
span: 6
---
<>
    <Headline size="small">iOS</Headline>
    <img src="/images/mobile/iOS-fullscreenDialog.png" className="w-100" />
    <BodyText size="xsmall" subdued>View component</BodyText>
</>