Repository: kiwicom/mobile
Pull request #860 (2018-07-12 09:56:07)

Allowing to refetch booking details on Booking Details screen


Patch:
diff --git a/RNAndroidPlayground/app/src/main/res/layout/activity_main.xml b/RNAndroidPlayground/app/src/main/res/layout/activity_main.xml
index 15528930..c2990df8 100644
--- a/RNAndroidPlayground/app/src/main/res/layout/activity_main.xml
+++ b/RNAndroidPlayground/app/src/main/res/layout/activity_main.xml
@@ -12,7 +12,6 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Hotels"
-        android:layout_marginBottom="56dp"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent"
diff --git a/RNAndroidPlayground/app/src/main/res/values/styles.xml b/RNAndroidPlayground/app/src/main/res/values/styles.xml
index 5885930d..494cab79 100644
--- a/RNAndroidPlayground/app/src/main/res/values/styles.xml
+++ b/RNAndroidPlayground/app/src/main/res/values/styles.xml
@@ -1,11 +1,12 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
         <item name="colorAccent">@color/colorAccent</item>
+        <item name="android:windowTranslucentStatus">true</item>
     </style>
 
 </resources>
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index 319eb0ca..9763a631 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -3,6 +3,7 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
+        <item name="android:windowTranslucentStatus">true</item>
     </style>
 
 </resources>
diff --git a/app/MMB/src/MainMenu.js b/app/MMB/src/MainMenu.js
index c22b37ab..48bc9a33 100644
--- a/app/MMB/src/MainMenu.js
+++ b/app/MMB/src/MainMenu.js
@@ -1,8 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import { ScrollView } from 'react-native';
-import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
+import {
+  graphql,
+  createRefetchContainer,
+  type RelayRefetchProp,
+} from '@kiwicom/mobile-relay';
+import { RefreshableScrollView } from '@kiwicom/mobile-shared';
+import idx from 'idx';
 
 import Header from './components/header/Header';
 import ManageMenuGroup from './menuGroups/ManageMenuGroup';
@@ -15,15 +20,18 @@ import type { MainMenu as BookingType } from './__generated__/MainMenu.graphql';
 type Props = {|
   +openMenu: string => void,
   +data: BookingType,
+  +relay: RelayRefetchProp,
 |};
 
 type State = {|
   activeId: string,
+  isRefreshing: boolean,
 |};
 
 class MainMenu extends React.Component<Props, State> {
   state = {
     activeId: 'mmb.main_menu.trip_overview',
+    isRefreshing: false,
   };
 
   handleOpenSubmenu = (activeId: string, menuId: string) => {
@@ -35,11 +43,31 @@ class MainMenu extends React.Component<Props, State> {
     );
   };
 
+  refetch = () => {
+    this.setState({ isRefreshing: true });
+
+    this.props.relay.refetch(
+      {
+        id: idx(this.props.data, _ => _.id),
+      },
+      null,
+      () => {
+        this.setState({ isRefreshing: false });
+      },
+      {
+        force: true,
+      },
+    );
+  };
+
   render = () => {
     const { activeId } = this.state;
 
     return (
-      <ScrollView>
+      <RefreshableScrollView
+        refreshing={this.state.isRefreshing}
+        onRefresh={this.refetch}
+      >
         <Header
           data={this.props.data}
           activeId={activeId}
@@ -68,18 +96,28 @@ class MainMenu extends React.Component<Props, State> {
           activeId={activeId}
           openSubmenu={this.handleOpenSubmenu}
         />
-      </ScrollView>
+      </RefreshableScrollView>
     );
   };
 }
 
-export default createFragmentContainer(
+export default createRefetchContainer(
   MainMenu,
   graphql`
     fragment MainMenu on BookingInterface {
+      id
       ...Header
       ...PassengerMenuGroup
       ...MissingInformation
     }
   `,
+  graphql`
+    query MainMenuRefetchQuery($id: ID!) {
+      node(id: $id) {
+        ... on BookingInterface {
+          ...MainMenu
+        }
+      }
+    }
+  `,
 );
diff --git a/app/MMB/src/__generated__/MainMenu.graphql.js b/app/MMB/src/__generated__/MainMenu.graphql.js
index e2c45958..29add0a9 100644
--- a/app/MMB/src/__generated__/MainMenu.graphql.js
+++ b/app/MMB/src/__generated__/MainMenu.graphql.js
@@ -14,6 +14,7 @@ type PassengerMenuGroup$ref = any;
 import type { FragmentReference } from "relay-runtime";
 declare export opaque type MainMenu$ref: FragmentReference;
 export type MainMenu = {|
+  +id: string,
   +$fragmentRefs: Header$ref & PassengerMenuGroup$ref & MissingInformation$ref,
   +$refType: MainMenu$ref,
 |};
@@ -27,6 +28,13 @@ const node/*: ConcreteFragment*/ = {
   "metadata": null,
   "argumentDefinitions": [],
   "selections": [
+    {
+      "kind": "ScalarField",
+      "alias": null,
+      "name": "id",
+      "args": null,
+      "storageKey": null
+    },
     {
       "kind": "FragmentSpread",
       "name": "Header",
@@ -45,5 +53,5 @@ const node/*: ConcreteFragment*/ = {
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = '001decf0a45eee59ebaa10c71a870206';
+(node/*: any*/).hash = 'cdb6f395e0d7217170e883d9132dcbd7';
 module.exports = node;
diff --git a/app/MMB/src/__generated__/MainMenuContainerQuery.graphql.js b/app/MMB/src/__generated__/MainMenuContainerQuery.graphql.js
index 8269c86a..6152ea11 100644
--- a/app/MMB/src/__generated__/MainMenuContainerQuery.graphql.js
+++ b/app/MMB/src/__generated__/MainMenuContainerQuery.graphql.js
@@ -1,6 +1,6 @@
 /**
  * @flow
- * @relayHash 6eab53b5b6acce77a30523be27ff5c2b
+ * @relayHash 6fa87e6f616c84924d8aa2290ecf06b1
  */
 
 /* eslint-disable */
@@ -35,6 +35,7 @@ query MainMenuContainerQuery(
 }
 
 fragment MainMenu on BookingInterface {
+  id
   ...Header
   ...PassengerMenuGroup
   ...MissingInformation
@@ -271,27 +272,27 @@ v1 = [
 v2 = {
   "kind": "ScalarField",
   "alias": null,
-  "name": "databaseId",
+  "name": "id",
   "args": null,
   "storageKey": null
 },
 v3 = {
   "kind": "ScalarField",
   "alias": null,
-  "name": "name",
+  "name": "databaseId",
   "args": null,
   "storageKey": null
 },
 v4 = {
   "kind": "ScalarField",
   "alias": null,
-  "name": "id",
+  "name": "name",
   "args": null,
   "storageKey": null
 },
 v5 = [
-  v3,
-  v4
+  v4,
+  v2
 ],
 v6 = {
   "kind": "LinkedField",
@@ -302,7 +303,7 @@ v6 = {
   "concreteType": "LocationArea",
   "plural": false,
   "selections": [
-    v3
+    v4
   ]
 },
 v7 = {
@@ -330,7 +331,7 @@ v8 = [
         "args": null,
         "storageKey": null
       },
-      v4
+      v2
     ]
   },
   v7
@@ -361,7 +362,7 @@ v10 = [
         "storageKey": null
       },
       v6,
-      v4
+      v2
     ]
   }
 ],
@@ -410,7 +411,7 @@ v11 = {
       "concreteType": "Airline",
       "plural": false,
       "selections": [
-        v3,
+        v4,
         {
           "kind": "ScalarField",
           "alias": null,
@@ -420,7 +421,7 @@ v11 = {
         }
       ]
     },
-    v4
+    v2
   ]
 },
 v12 = [
@@ -455,7 +456,7 @@ return {
   "operationKind": "query",
   "name": "MainMenuContainerQuery",
   "id": null,
-  "text": "query MainMenuContainerQuery(\n  $bookingId: ID!\n) {\n  node(id: $bookingId) {\n    __typename\n    ... on BookingInterface {\n      ...MainMenu\n    }\n    id\n  }\n}\n\nfragment MainMenu on BookingInterface {\n  ...Header\n  ...PassengerMenuGroup\n  ...MissingInformation\n}\n\nfragment Header on BookingInterface {\n  isPastBooking\n  ...StatusBar\n  ...TripInfo\n  ...TripOverview\n}\n\nfragment PassengerMenuGroup on BookingInterface {\n  ...PassengerMenuDetail\n}\n\nfragment MissingInformation on BookingInterface {\n  passengers {\n    travelDocument {\n      idNumber\n    }\n  }\n}\n\nfragment PassengerMenuDetail on BookingInterface {\n  ...Visa\n  passengers {\n    databaseId\n    ...Passenger\n  }\n}\n\nfragment Visa on BookingInterface {\n  passengers {\n    visaInformation {\n      requiredIn {\n        name\n        id\n      }\n      warningIn {\n        name\n        id\n      }\n    }\n  }\n}\n\nfragment Passenger on Passenger {\n  fullName\n  title\n  birthday\n}\n\nfragment StatusBar on BookingInterface {\n  ...StatusBarIcon\n  databaseId\n}\n\nfragment TripInfo on BookingInterface {\n  __typename\n  ... on BookingOneWay {\n    ...TripInfoOneWay\n  }\n  ... on BookingReturn {\n    ...TripInfoReturn\n  }\n  ... on BookingMulticity {\n    ...TripInfoMulticity\n  }\n}\n\nfragment TripOverview on BookingInterface {\n  __typename\n  ... on BookingOneWay {\n    ...OneWayTimeline\n  }\n  ... on BookingReturn {\n    ...ReturnTimeline\n  }\n  ... on BookingMulticity {\n    ...MulticityTimeline\n  }\n}\n\nfragment OneWayTimeline on BookingOneWay {\n  trip {\n    ...Timeline\n  }\n}\n\nfragment ReturnTimeline on BookingReturn {\n  outbound {\n    ...Timeline\n  }\n  inbound {\n    ...Timeline\n  }\n}\n\nfragment MulticityTimeline on BookingMulticity {\n  trips {\n    ...Timeline\n  }\n}\n\nfragment Timeline on Trip {\n  legs {\n    departure {\n      ...TimelineDeparture_routeStop\n    }\n    arrival {\n      ...TimelineArrival\n    }\n    ...TimelineDeparture_legInfo\n    id\n  }\n}\n\nfragment TimelineDeparture_routeStop on RouteStop {\n  ...TimelineTitle\n}\n\nfragment TimelineArrival on RouteStop {\n  ...TimelineTitle\n}\n\nfragment TimelineDeparture_legInfo on Leg {\n  flightNumber\n  airline {\n    name\n    logoUrl\n  }\n}\n\nfragment TimelineTitle on RouteStop {\n  localTime\n  airport {\n    locationId\n    city {\n      name\n    }\n    id\n  }\n}\n\nfragment TripInfoOneWay on BookingOneWay {\n  trip {\n    ...TripCities\n    ...TripTimes\n  }\n}\n\nfragment TripInfoReturn on BookingReturn {\n  outbound {\n    ...TripCities\n    ...TripTimes\n  }\n  inbound {\n    ...TripTimes\n  }\n}\n\nfragment TripInfoMulticity on BookingMulticity {\n  trips {\n    ...TripCities\n    ...TripTimes\n  }\n}\n\nfragment TripCities on Trip {\n  departure {\n    ...Location\n  }\n  arrival {\n    ...Location\n  }\n}\n\nfragment TripTimes on Trip {\n  ...Duration\n  departure {\n    ...DateTime\n  }\n  arrival {\n    ...DateTime\n  }\n}\n\nfragment Duration on Trip {\n  duration\n}\n\nfragment DateTime on RouteStop {\n  localTime\n}\n\nfragment Location on RouteStop {\n  airport {\n    city {\n      name\n    }\n    ...CountryFlag\n    id\n  }\n}\n\nfragment CountryFlag on Location {\n  countryFlagURL\n}\n\nfragment StatusBarIcon on BookingInterface {\n  status\n  isPastBooking\n}\n",
+  "text": "query MainMenuContainerQuery(\n  $bookingId: ID!\n) {\n  node(id: $bookingId) {\n    __typename\n    ... on BookingInterface {\n      ...MainMenu\n    }\n    id\n  }\n}\n\nfragment MainMenu on BookingInterface {\n  id\n  ...Header\n  ...PassengerMenuGroup\n  ...MissingInformation\n}\n\nfragment Header on BookingInterface {\n  isPastBooking\n  ...StatusBar\n  ...TripInfo\n  ...TripOverview\n}\n\nfragment PassengerMenuGroup on BookingInterface {\n  ...PassengerMenuDetail\n}\n\nfragment MissingInformation on BookingInterface {\n  passengers {\n    travelDocument {\n      idNumber\n    }\n  }\n}\n\nfragment PassengerMenuDetail on BookingInterface {\n  ...Visa\n  passengers {\n    databaseId\n    ...Passenger\n  }\n}\n\nfragment Visa on BookingInterface {\n  passengers {\n    visaInformation {\n      requiredIn {\n        name\n        id\n      }\n      warningIn {\n        name\n        id\n      }\n    }\n  }\n}\n\nfragment Passenger on Passenger {\n  fullName\n  title\n  birthday\n}\n\nfragment StatusBar on BookingInterface {\n  ...StatusBarIcon\n  databaseId\n}\n\nfragment TripInfo on BookingInterface {\n  __typename\n  ... on BookingOneWay {\n    ...TripInfoOneWay\n  }\n  ... on BookingReturn {\n    ...TripInfoReturn\n  }\n  ... on BookingMulticity {\n    ...TripInfoMulticity\n  }\n}\n\nfragment TripOverview on BookingInterface {\n  __typename\n  ... on BookingOneWay {\n    ...OneWayTimeline\n  }\n  ... on BookingReturn {\n    ...ReturnTimeline\n  }\n  ... on BookingMulticity {\n    ...MulticityTimeline\n  }\n}\n\nfragment OneWayTimeline on BookingOneWay {\n  trip {\n    ...Timeline\n  }\n}\n\nfragment ReturnTimeline on BookingReturn {\n  outbound {\n    ...Timeline\n  }\n  inbound {\n    ...Timeline\n  }\n}\n\nfragment MulticityTimeline on BookingMulticity {\n  trips {\n    ...Timeline\n  }\n}\n\nfragment Timeline on Trip {\n  legs {\n    departure {\n      ...TimelineDeparture_routeStop\n    }\n    arrival {\n      ...TimelineArrival\n    }\n    ...TimelineDeparture_legInfo\n    id\n  }\n}\n\nfragment TimelineDeparture_routeStop on RouteStop {\n  ...TimelineTitle\n}\n\nfragment TimelineArrival on RouteStop {\n  ...TimelineTitle\n}\n\nfragment TimelineDeparture_legInfo on Leg {\n  flightNumber\n  airline {\n    name\n    logoUrl\n  }\n}\n\nfragment TimelineTitle on RouteStop {\n  localTime\n  airport {\n    locationId\n    city {\n      name\n    }\n    id\n  }\n}\n\nfragment TripInfoOneWay on BookingOneWay {\n  trip {\n    ...TripCities\n    ...TripTimes\n  }\n}\n\nfragment TripInfoReturn on BookingReturn {\n  outbound {\n    ...TripCities\n    ...TripTimes\n  }\n  inbound {\n    ...TripTimes\n  }\n}\n\nfragment TripInfoMulticity on BookingMulticity {\n  trips {\n    ...TripCities\n    ...TripTimes\n  }\n}\n\nfragment TripCities on Trip {\n  departure {\n    ...Location\n  }\n  arrival {\n    ...Location\n  }\n}\n\nfragment TripTimes on Trip {\n  ...Duration\n  departure {\n    ...DateTime\n  }\n  arrival {\n    ...DateTime\n  }\n}\n\nfragment Duration on Trip {\n  duration\n}\n\nfragment DateTime on RouteStop {\n  localTime\n}\n\nfragment Location on RouteStop {\n  airport {\n    city {\n      name\n    }\n    ...CountryFlag\n    id\n  }\n}\n\nfragment CountryFlag on Location {\n  countryFlagURL\n}\n\nfragment StatusBarIcon on BookingInterface {\n  status\n  isPastBooking\n}\n",
   "metadata": {},
   "fragment": {
     "kind": "Fragment",
@@ -496,6 +497,7 @@ return {
         "concreteType": null,
         "plural": false,
         "selections": [
+          v2,
           {
             "kind": "ScalarField",
             "alias": null,
@@ -510,7 +512,7 @@ return {
             "args": null,
             "storageKey": null
           },
-          v2,
+          v3,
           {
             "kind": "ScalarField",
             "alias": null,
@@ -558,7 +560,7 @@ return {
                   }
                 ]
               },
-              v2,
+              v3,
               {
                 "kind": "ScalarField",
                 "alias": null,
@@ -600,7 +602,6 @@ return {
               }
             ]
           },
-          v4,
           {
             "kind": "InlineFragment",
             "type": "BookingMulticity",
diff --git a/app/MMB/src/__generated__/MainMenuRefetchQuery.graphql.js b/app/MMB/src/__generated__/MainMenuRefetchQuery.graphql.js
new file mode 100644
index 00000000..af42eb60
--- /dev/null
+++ b/app/MMB/src/__generated__/MainMenuRefetchQuery.graphql.js
@@ -0,0 +1,694 @@
+/**
+ * @flow
+ * @relayHash 603ccae9c8ce236ae737c6c17c9d180f
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+type MainMenu$ref = any;
+export type MainMenuRefetchQueryVariables = {|
+  id: string
+|};
+export type MainMenuRefetchQueryResponse = {|
+  +node: ?{|
+    +$fragmentRefs: MainMenu$ref
+  |}
+|};
+*/
+
+
+/*
+query MainMenuRefetchQuery(
+  $id: ID!
+) {
+  node(id: $id) {
+    __typename
+    ... on BookingInterface {
+      ...MainMenu
+    }
+    id
+  }
+}
+
+fragment MainMenu on BookingInterface {
+  id
+  ...Header
+  ...PassengerMenuGroup
+  ...MissingInformation
+}
+
+fragment Header on BookingInterface {
+  isPastBooking
+  ...StatusBar
+  ...TripInfo
+  ...TripOverview
+}
+
+fragment PassengerMenuGroup on BookingInterface {
+  ...PassengerMenuDetail
+}
+
+fragment MissingInformation on BookingInterface {
+  passengers {
+    travelDocument {
+      idNumber
+    }
+  }
+}
+
+fragment PassengerMenuDetail on BookingInterface {
+  ...Visa
+  passengers {
+    databaseId
+    ...Passenger
+  }
+}
+
+fragment Visa on BookingInterface {
+  passengers {
+    visaInformation {
+      requiredIn {
+        name
+        id
+      }
+      warningIn {
+        name
+        id
+      }
+    }
+  }
+}
+
+fragment Passenger on Passenger {
+  fullName
+  title
+  birthday
+}
+
+fragment StatusBar on BookingInterface {
+  ...StatusBarIcon
+  databaseId
+}
+
+fragment TripInfo on BookingInterface {
+  __typename
+  ... on BookingOneWay {
+    ...TripInfoOneWay
+  }
+  ... on BookingReturn {
+    ...TripInfoReturn
+  }
+  ... on BookingMulticity {
+    ...TripInfoMulticity
+  }
+}
+
+fragment TripOverview on BookingInterface {
+  __typename
+  ... on BookingOneWay {
+    ...OneWayTimeline
+  }
+  ... on BookingReturn {
+    ...ReturnTimeline
+  }
+  ... on BookingMulticity {
+    ...MulticityTimeline
+  }
+}
+
+fragment OneWayTimeline on BookingOneWay {
+  trip {
+    ...Timeline
+  }
+}
+
+fragment ReturnTimeline on BookingReturn {
+  outbound {
+    ...Timeline
+  }
+  inbound {
+    ...Timeline
+  }
+}
+
+fragment MulticityTimeline on BookingMulticity {
+  trips {
+    ...Timeline
+  }
+}
+
+fragment Timeline on Trip {
+  legs {
+    departure {
+      ...TimelineDeparture_routeStop
+    }
+    arrival {
+      ...TimelineArrival
+    }
+    ...TimelineDeparture_legInfo
+    id
+  }
+}
+
+fragment TimelineDeparture_routeStop on RouteStop {
+  ...TimelineTitle
+}
+
+fragment TimelineArrival on RouteStop {
+  ...TimelineTitle
+}
+
+fragment TimelineDeparture_legInfo on Leg {
+  flightNumber
+  airline {
+    name
+    logoUrl
+  }
+}
+
+fragment TimelineTitle on RouteStop {
+  localTime
+  airport {
+    locationId
+    city {
+      name
+    }
+    id
+  }
+}
+
+fragment TripInfoOneWay on BookingOneWay {
+  trip {
+    ...TripCities
+    ...TripTimes
+  }
+}
+
+fragment TripInfoReturn on BookingReturn {
+  outbound {
+    ...TripCities
+    ...TripTimes
+  }
+  inbound {
+    ...TripTimes
+  }
+}
+
+fragment TripInfoMulticity on BookingMulticity {
+  trips {
+    ...TripCities
+    ...TripTimes
+  }
+}
+
+fragment TripCities on Trip {
+  departure {
+    ...Location
+  }
+  arrival {
+    ...Location
+  }
+}
+
+fragment TripTimes on Trip {
+  ...Duration
+  departure {
+    ...DateTime
+  }
+  arrival {
+    ...DateTime
+  }
+}
+
+fragment Duration on Trip {
+  duration
+}
+
+fragment DateTime on RouteStop {
+  localTime
+}
+
+fragment Location on RouteStop {
+  airport {
+    city {
+      name
+    }
+    ...CountryFlag
+    id
+  }
+}
+
+fragment CountryFlag on Location {
+  countryFlagURL
+}
+
+fragment StatusBarIcon on BookingInterface {
+  status
+  isPastBooking
+}
+*/
+
+const node/*: ConcreteRequest*/ = (function(){
+var v0 = [
+  {
+    "kind": "LocalArgument",
+    "name": "id",
+    "type": "ID!",
+    "defaultValue": null
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "id",
+    "variableName": "id",
+    "type": "ID!"
+  }
+],
+v2 = {
+  "kind": "ScalarField",
+  "alias": null,
+  "name": "id",
+  "args": null,
+  "storageKey": null
+},
+v3 = {
+  "kind": "ScalarField",
+  "alias": null,
+  "name": "databaseId",
+  "args": null,
+  "storageKey": null
+},
+v4 = {
+  "kind": "ScalarField",
+  "alias": null,
+  "name": "name",
+  "args": null,
+  "storageKey": null
+},
+v5 = [
+  v4,
+  v2
+],
+v6 = {
+  "kind": "LinkedField",
+  "alias": null,
+  "name": "city",
+  "storageKey": null,
+  "args": null,
+  "concreteType": "LocationArea",
+  "plural": false,
+  "selections": [
+    v4
+  ]
+},
+v7 = {
+  "kind": "ScalarField",
+  "alias": null,
+  "name": "localTime",
+  "args": null,
+  "storageKey": null
+},
+v8 = [
+  {
+    "kind": "LinkedField",
+    "alias": null,
+    "name": "airport",
+    "storageKey": null,
+    "args": null,
+    "concreteType": "Location",
+    "plural": false,
+    "selections": [
+      v6,
+      {
+        "kind": "ScalarField",
+        "alias": null,
+        "name": "countryFlagURL",
+        "args": null,
+        "storageKey": null
+      },
+      v2
+    ]
+  },
+  v7
+],
+v9 = {
+  "kind": "ScalarField",
+  "alias": null,
+  "name": "duration",
+  "args": null,
+  "storageKey": null
+},
+v10 = [
+  v7,
+  {
+    "kind": "LinkedField",
+    "alias": null,
+    "name": "airport",
+    "storageKey": null,
+    "args": null,
+    "concreteType": "Location",
+    "plural": false,
+    "selections": [
+      {
+        "kind": "ScalarField",
+        "alias": null,
+        "name": "locationId",
+        "args": null,
+        "storageKey": null
+      },
+      v6,
+      v2
+    ]
+  }
+],
+v11 = {
+  "kind": "LinkedField",
+  "alias": null,
+  "name": "legs",
+  "storageKey": null,
+  "args": null,
+  "concreteType": "Leg",
+  "plural": true,
+  "selections": [
+    {
+      "kind": "LinkedField",
+      "alias": null,
+      "name": "departure",
+      "storageKey": null,
+      "args": null,
+      "concreteType": "RouteStop",
+      "plural": false,
+      "selections": v10
+    },
+    {
+      "kind": "LinkedField",
+      "alias": null,
+      "name": "arrival",
+      "storageKey": null,
+      "args": null,
+      "concreteType": "RouteStop",
+      "plural": false,
+      "selections": v10
+    },
+    {
+      "kind": "ScalarField",
+      "alias": null,
+      "name": "flightNumber",
+      "args": null,
+      "storageKey": null
+    },
+    {
+      "kind": "LinkedField",
+      "alias": null,
+      "name": "airline",
+      "storageKey": null,
+      "args": null,
+      "concreteType": "Airline",
+      "plural": false,
+      "selections": [
+        v4,
+        {
+          "kind": "ScalarField",
+          "alias": null,
+          "name": "logoUrl",
+          "args": null,
+          "storageKey": null
+        }
+      ]
+    },
+    v2
+  ]
+},
+v12 = [
+  {
+    "kind": "LinkedField",
+    "alias": null,
+    "name": "departure",
+    "storageKey": null,
+    "args": null,
+    "concreteType": "RouteStop",
+    "plural": false,
+    "selections": v8
+  },
+  {
+    "kind": "LinkedField",
+    "alias": null,
+    "name": "arrival",
+    "storageKey": null,
+    "args": null,
+    "concreteType": "RouteStop",
+    "plural": false,
+    "selections": v8
+  },
+  v9,
+  v11
+],
+v13 = [
+  v7
+];
+return {
+  "kind": "Request",
+  "operationKind": "query",
+  "name": "MainMenuRefetchQuery",
+  "id": null,
+  "text": "query MainMenuRefetchQuery(\n  $id: ID!\n) {\n  node(id: $id) {\n    __typename\n    ... on BookingInterface {\n      ...MainMenu\n    }\n    id\n  }\n}\n\nfragment MainMenu on BookingInterface {\n  id\n  ...Header\n  ...PassengerMenuGroup\n  ...MissingInformation\n}\n\nfragment Header on BookingInterface {\n  isPastBooking\n  ...StatusBar\n  ...TripInfo\n  ...TripOverview\n}\n\nfragment PassengerMenuGroup on BookingInterface {\n  ...PassengerMenuDetail\n}\n\nfragment MissingInformation on BookingInterface {\n  passengers {\n    travelDocument {\n      idNumber\n    }\n  }\n}\n\nfragment PassengerMenuDetail on BookingInterface {\n  ...Visa\n  passengers {\n    databaseId\n    ...Passenger\n  }\n}\n\nfragment Visa on BookingInterface {\n  passengers {\n    visaInformation {\n      requiredIn {\n        name\n        id\n      }\n      warningIn {\n        name\n        id\n      }\n    }\n  }\n}\n\nfragment Passenger on Passenger {\n  fullName\n  title\n  birthday\n}\n\nfragment StatusBar on BookingInterface {\n  ...StatusBarIcon\n  databaseId\n}\n\nfragment TripInfo on BookingInterface {\n  __typename\n  ... on BookingOneWay {\n    ...TripInfoOneWay\n  }\n  ... on BookingReturn {\n    ...TripInfoReturn\n  }\n  ... on BookingMulticity {\n    ...TripInfoMulticity\n  }\n}\n\nfragment TripOverview on BookingInterface {\n  __typename\n  ... on BookingOneWay {\n    ...OneWayTimeline\n  }\n  ... on BookingReturn {\n    ...ReturnTimeline\n  }\n  ... on BookingMulticity {\n    ...MulticityTimeline\n  }\n}\n\nfragment OneWayTimeline on BookingOneWay {\n  trip {\n    ...Timeline\n  }\n}\n\nfragment ReturnTimeline on BookingReturn {\n  outbound {\n    ...Timeline\n  }\n  inbound {\n    ...Timeline\n  }\n}\n\nfragment MulticityTimeline on BookingMulticity {\n  trips {\n    ...Timeline\n  }\n}\n\nfragment Timeline on Trip {\n  legs {\n    departure {\n      ...TimelineDeparture_routeStop\n    }\n    arrival {\n      ...TimelineArrival\n    }\n    ...TimelineDeparture_legInfo\n    id\n  }\n}\n\nfragment TimelineDeparture_routeStop on RouteStop {\n  ...TimelineTitle\n}\n\nfragment TimelineArrival on RouteStop {\n  ...TimelineTitle\n}\n\nfragment TimelineDeparture_legInfo on Leg {\n  flightNumber\n  airline {\n    name\n    logoUrl\n  }\n}\n\nfragment TimelineTitle on RouteStop {\n  localTime\n  airport {\n    locationId\n    city {\n      name\n    }\n    id\n  }\n}\n\nfragment TripInfoOneWay on BookingOneWay {\n  trip {\n    ...TripCities\n    ...TripTimes\n  }\n}\n\nfragment TripInfoReturn on BookingReturn {\n  outbound {\n    ...TripCities\n    ...TripTimes\n  }\n  inbound {\n    ...TripTimes\n  }\n}\n\nfragment TripInfoMulticity on BookingMulticity {\n  trips {\n    ...TripCities\n    ...TripTimes\n  }\n}\n\nfragment TripCities on Trip {\n  departure {\n    ...Location\n  }\n  arrival {\n    ...Location\n  }\n}\n\nfragment TripTimes on Trip {\n  ...Duration\n  departure {\n    ...DateTime\n  }\n  arrival {\n    ...DateTime\n  }\n}\n\nfragment Duration on Trip {\n  duration\n}\n\nfragment DateTime on RouteStop {\n  localTime\n}\n\nfragment Location on RouteStop {\n  airport {\n    city {\n      name\n    }\n    ...CountryFlag\n    id\n  }\n}\n\nfragment CountryFlag on Location {\n  countryFlagURL\n}\n\nfragment StatusBarIcon on BookingInterface {\n  status\n  isPastBooking\n}\n",
+  "metadata": {},
+  "fragment": {
+    "kind": "Fragment",
+    "name": "MainMenuRefetchQuery",
+    "type": "RootQuery",
+    "metadata": null,
+    "argumentDefinitions": v0,
+    "selections": [
+      {
+        "kind": "LinkedField",
+        "alias": null,
+        "name": "node",
+        "storageKey": null,
+        "args": v1,
+        "concreteType": null,
+        "plural": false,
+        "selections": [
+          {
+            "kind": "FragmentSpread",
+            "name": "MainMenu",
+            "args": null
+          }
+        ]
+      }
+    ]
+  },
+  "operation": {
+    "kind": "Operation",
+    "name": "MainMenuRefetchQuery",
+    "argumentDefinitions": v0,
+    "selections": [
+      {
+        "kind": "LinkedField",
+        "alias": null,
+        "name": "node",
+        "storageKey": null,
+        "args": v1,
+        "concreteType": null,
+        "plural": false,
+        "selections": [
+          v2,
+          {
+            "kind": "ScalarField",
+            "alias": null,
+            "name": "isPastBooking",
+            "args": null,
+            "storageKey": null
+          },
+          {
+            "kind": "ScalarField",
+            "alias": null,
+            "name": "status",
+            "args": null,
+            "storageKey": null
+          },
+          v3,
+          {
+            "kind": "ScalarField",
+            "alias": null,
+            "name": "__typename",
+            "args": null,
+            "storageKey": null
+          },
+          {
+            "kind": "LinkedField",
+            "alias": null,
+            "name": "passengers",
+            "storageKey": null,
+            "args": null,
+            "concreteType": "Passenger",
+            "plural": true,
+            "selections": [
+              {
+                "kind": "LinkedField",
+                "alias": null,
+                "name": "visaInformation",
+                "storageKey": null,
+                "args": null,
+                "concreteType": "Visa",
+                "plural": false,
+                "selections": [
+                  {
+                    "kind": "LinkedField",
+                    "alias": null,
+                    "name": "requiredIn",
+                    "storageKey": null,
+                    "args": null,
+                    "concreteType": "Location",
+                    "plural": true,
+                    "selections": v5
+                  },
+                  {
+                    "kind": "LinkedField",
+                    "alias": null,
+                    "name": "warningIn",
+                    "storageKey": null,
+                    "args": null,
+                    "concreteType": "Location",
+                    "plural": true,
+                    "selections": v5
+                  }
+                ]
+              },
+              v3,
+              {
+                "kind": "ScalarField",
+                "alias": null,
+                "name": "fullName",
+                "args": null,
+                "storageKey": null
+              },
+              {
+                "kind": "ScalarField",
+                "alias": null,
+                "name": "title",
+                "args": null,
+                "storageKey": null
+              },
+              {
+                "kind": "ScalarField",
+                "alias": null,
+                "name": "birthday",
+                "args": null,
+                "storageKey": null
+              },
+              {
+                "kind": "LinkedField",
+                "alias": null,
+                "name": "travelDocument",
+                "storageKey": null,
+                "args": null,
+                "concreteType": "TravelDocument",
+                "plural": false,
+                "selections": [
+                  {
+                    "kind": "ScalarField",
+                    "alias": null,
+                    "name": "idNumber",
+                    "args": null,
+                    "storageKey": null
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "kind": "InlineFragment",
+            "type": "BookingMulticity",
+            "selections": [
+              {
+                "kind": "LinkedField",
+                "alias": null,
+                "name": "trips",
+                "storageKey": null,
+                "args": null,
+                "concreteType": "Trip",
+                "plural": true,
+                "selections": v12
+              }
+            ]
+          },
+          {
+            "kind": "InlineFragment",
+            "type": "BookingReturn",
+            "selections": [
+              {
+                "kind": "LinkedField",
+                "alias": null,
+                "name": "outbound",
+                "storageKey": null,
+                "args": null,
+                "concreteType": "Trip",
+                "plural": false,
+                "selections": v12
+              },
+              {
+                "kind": "LinkedField",
+                "alias": null,
+                "name": "inbound",
+                "storageKey": null,
+                "args": null,
+                "concreteType": "Trip",
+                "plural": false,
+                "selections": [
+                  v9,
+                  {
+                    "kind": "LinkedField",
+                    "alias": null,
+                    "name": "departure",
+                    "storageKey": null,
+                    "args": null,
+                    "concreteType": "RouteStop",
+                    "plural": false,
+                    "selections": v13
+                  },
+                  {
+                    "kind": "LinkedField",
+                    "alias": null,
+                    "name": "arrival",
+                    "storageKey": null,
+                    "args": null,
+                    "concreteType": "RouteStop",
+                    "plural": false,
+                    "selections": v13
+                  },
+                  v11
+                ]
+              }
+            ]
+          },
+          {
+            "kind": "InlineFragment",
+            "type": "BookingOneWay",
+            "selections": [
+              {
+                "kind": "LinkedField",
+                "alias": null,
+                "name": "trip",
+                "storageKey": null,
+                "args": null,
+                "concreteType": "Trip",
+                "plural": false,
+                "selections": v12
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+};
+})();
+// prettier-ignore
+(node/*: any*/).hash = 'f4e207d725167bfbdfd2ef8748e77732';
+module.exports = node;
diff --git a/app/MMB/src/components/ShareButton.js b/app/MMB/src/components/ShareButton.js
index f403ca68..41075cb2 100644
--- a/app/MMB/src/components/ShareButton.js
+++ b/app/MMB/src/components/ShareButton.js
@@ -4,19 +4,19 @@ import * as React from 'react';
 import { Platform } from 'react-native';
 import {
   TextIcon,
-  HeaderRightButton,
+  HeaderButton,
   Color,
   StyleSheet,
 } from '@kiwicom/mobile-shared';
 
 export default function ShareButton({ onPress }: {| +onPress: () => void |}) {
   return (
-    <HeaderRightButton onPress={onPress}>
+    <HeaderButton.Right onPress={onPress}>
       {Platform.select({
         ios: <TextIcon code="&#xe083;" style={styles.icon} />,
         android: <TextIcon code="&#xe068;" style={styles.icon} />,
       })}
-    </HeaderRightButton>
+    </HeaderButton.Right>
   );
 }
 
diff --git a/app/MMB/src/components/header/StatusBarIcon.js b/app/MMB/src/components/header/StatusBarIcon.js
index 075f6ff8..917c308b 100644
--- a/app/MMB/src/components/header/StatusBarIcon.js
+++ b/app/MMB/src/components/header/StatusBarIcon.js
@@ -84,7 +84,7 @@ function Status({ data }: {| data: StatusBarIcon |}) {
       return (
         <StatusIcon
           color={Color.black}
-          title={<Translation id="mmb.status.refused" />}
+          title={<Translation id="mmb.status.refunded" />}
         />
       );
     default:
diff --git a/app/MMB/src/scenes/list/cityImage/StatusBadge.js b/app/MMB/src/scenes/list/cityImage/StatusBadge.js
index 98e763e0..b3a446ed 100644
--- a/app/MMB/src/scenes/list/cityImage/StatusBadge.js
+++ b/app/MMB/src/scenes/list/cityImage/StatusBadge.js
@@ -16,42 +16,87 @@ const StatusBadge = (props: Props) => {
   const status = idx(props.data, _ => _.status) || '';
   const isPastBooking = idx(props.data, _ => _.isPastBooking);
 
+  let renderStatus;
   switch (status) {
-    case 'REFUNDED':
-      return (
-        <AdaptableBadge
-          translation={<Translation id="mmb.booking_state.refunded" />}
-          style={styles.refundedBadge}
-          textStyle={styles.badgeText}
-        />
-      );
-    case 'CONFIRMED':
-      return (
-        <AdaptableBadge
-          translation={
-            <Translation
-              id={
-                isPastBooking
-                  ? 'mmb.booking_state.confirmed.travelled'
-                  : 'mmb.booking_state.confirmed'
-              }
-            />
-          }
-          style={styles.confirmBadge}
-          textStyle={styles.badgeText}
-        />
-      );
-    case 'CLOSED':
-      return (
-        <AdaptableBadge
-          translation={<Translation id="mmb.booking_state.in_process" />}
-          style={styles.inProcessBadge}
-          textStyle={styles.badgeText}
-        />
-      );
-    default:
-      return null;
+    case 'CANCELLED': {
+      renderStatus = {
+        translationId: 'mmb.status.cancelled',
+        style: styles.redBadge,
+      };
+      break;
+    }
+
+    case 'CLOSED': {
+      renderStatus = {
+        translationId: 'mmb.status.closed',
+        style: styles.redBadge,
+      };
+      break;
+    }
+
+    case 'CONFIRMED': {
+      renderStatus = {
+        translationId: isPastBooking
+          ? 'mmb.status.travelled'
+          : 'mmb.status.confirmed',
+        style: styles.greenBadge,
+      };
+      break;
+    }
+
+    case 'DELETED': {
+      renderStatus = {
+        translationId: 'mmb.status.deleted',
+        style: styles.redBadge,
+      };
+      break;
+    }
+
+    case 'EXPIRED': {
+      renderStatus = {
+        translationId: 'mmb.status.expired',
+        style: styles.redBadge,
+      };
+      break;
+    }
+
+    case 'NEW': {
+      renderStatus = {
+        translationId: 'mmb.status.new',
+        style: styles.blueBadge,
+      };
+      break;
+    }
+
+    case 'PENDING': {
+      renderStatus = {
+        translationId: 'mmb.status.pending',
+        style: styles.orangeBadge,
+      };
+      break;
+    }
+
+    case 'REFUNDED': {
+      renderStatus = {
+        translationId: 'mmb.status.refunded',
+        style: styles.blackBadge,
+      };
+      break;
+    }
+    default: {
+      renderStatus = null;
+    }
+  }
+  if (renderStatus) {
+    return (
+      <AdaptableBadge
+        translation={<Translation id={renderStatus.translationId} />}
+        style={[styles.badge, renderStatus.style]}
+        textStyle={styles.badgeText}
+      />
+    );
   }
+  return null;
 };
 
 export default createFragmentContainer(
@@ -65,14 +110,23 @@ export default createFragmentContainer(
 );
 
 const styles = StyleSheet.create({
-  confirmBadge: {
-    backgroundColor: 'rgba(51, 189, 27, 0.6)',
+  badge: {
+    opacity: 0.7,
+  },
+  greenBadge: {
+    backgroundColor: Color.green.normal,
+  },
+  blackBadge: {
+    backgroundColor: Color.black,
+  },
+  orangeBadge: {
+    backgroundColor: Color.orange.normal,
   },
-  refundedBadge: {
-    backgroundColor: 'rgba(48, 54, 61, 0.6)',
+  redBadge: {
+    backgroundColor: Color.red.normal,
   },
-  inProcessBadge: {
-    backgroundColor: 'rgba(249, 151, 30, 0.6)', // TODO: Replace with real color when provided - missing in design.
+  blueBadge: {
+    backgroundColor: Color.blue.normal,
   },
   badgeText: {
     fontSize: 10,
diff --git a/app/hotels/src/navigation/allHotels/AllHotelsNavigationScreen.js b/app/hotels/src/navigation/allHotels/AllHotelsNavigationScreen.js
index 2cabb284..b79f89f0 100644
--- a/app/hotels/src/navigation/allHotels/AllHotelsNavigationScreen.js
+++ b/app/hotels/src/navigation/allHotels/AllHotelsNavigationScreen.js
@@ -1,11 +1,16 @@
 // @flow
 
 import * as React from 'react';
+import { Platform } from 'react-native';
 import { HeaderBackButton } from 'react-navigation';
 import {
   LayoutDoubleColumn,
   AdaptableLayout,
   Color,
+  GestureController,
+  HeaderButton,
+  StyleSheet,
+  Text,
 } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { HeaderTitle, type NavigationType } from '@kiwicom/mobile-navigation';
@@ -25,12 +30,17 @@ type ContainerProps = {|
 
 type NavigationProps = {|
   +onBackClicked: () => void,
+  +lastNavigationMode?: string,
 |};
 
-type Props = ContainerProps & NavigationProps;
+type Props = {| ...ContainerProps, ...NavigationProps |};
 
 export default class AllHotelsNavigationScreen extends React.Component<Props> {
   static navigationOptions = (props: Props) => {
+    function closeNativeModal() {
+      GestureController.closeModal('KiwiHotels');
+    }
+
     function goToAllHotelsMap() {
       props.navigation.navigate({
         routeName: 'AllHotelsMap',
@@ -39,12 +49,19 @@ export default class AllHotelsNavigationScreen extends React.Component<Props> {
     }
 
     return {
-      headerLeft: (
-        <HeaderBackButton
-          tintColor={Color.brand}
-          onPress={props.onBackClicked}
-        />
-      ),
+      headerLeft:
+        props.lastNavigationMode && props.lastNavigationMode === 'present' ? (
+          <HeaderButton.Left onPress={closeNativeModal}>
+            <Text style={styles.closeButton}>
+              <Translation id="hotels.navigation.close.button" />
+            </Text>
+          </HeaderButton.Left>
+        ) : (
+          <HeaderBackButton
+            tintColor={Color.brand}
+            onPress={props.onBackClicked}
+          />
+        ),
       headerTitle: (
         <HeaderTitle>
           <Translation id="hotels.navigation.title.all_hotels" />
@@ -107,3 +124,11 @@ export default class AllHotelsNavigationScreen extends React.Component<Props> {
     );
   };
 }
+
+const styles = StyleSheet.create({
+  closeButton: {
+    color: Color.brand,
+    fontWeight: '600',
+    fontSize: Platform.OS === 'android' ? 18 : 17,
+  },
+});
diff --git a/app/hotels/src/navigation/allHotels/MapHeaderButton.android.js b/app/hotels/src/navigation/allHotels/MapHeaderButton.android.js
index e1fa022f..0b02915d 100644
--- a/app/hotels/src/navigation/allHotels/MapHeaderButton.android.js
+++ b/app/hotels/src/navigation/allHotels/MapHeaderButton.android.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { HeaderRightButton, Color, Icon } from '@kiwicom/mobile-shared';
+import { HeaderButton, Color, Icon } from '@kiwicom/mobile-shared';
 import RNTooltips from 'react-native-tooltips';
 
 type Props = {|
@@ -40,9 +40,9 @@ export default class MapHeaderButton extends React.Component<Props, State> {
 
   render = () => (
     <React.Fragment>
-      <HeaderRightButton onPress={this.onPress} onLongPress={this.onLongPress}>
+      <HeaderButton.Right onPress={this.onPress} onLongPress={this.onLongPress}>
         <Icon name="map" size={24} color={Color.brand} />
-      </HeaderRightButton>
+      </HeaderButton.Right>
       <RNTooltips
         text="Open map"
         visible={this.state.isTooltipVisible}
diff --git a/app/hotels/src/navigation/allHotels/MapHeaderButton.ios.js b/app/hotels/src/navigation/allHotels/MapHeaderButton.ios.js
index 7c2c913c..f93df20e 100644
--- a/app/hotels/src/navigation/allHotels/MapHeaderButton.ios.js
+++ b/app/hotels/src/navigation/allHotels/MapHeaderButton.ios.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { HeaderRightButton, Icon, Color } from '@kiwicom/mobile-shared';
+import { HeaderButton, Icon, Color } from '@kiwicom/mobile-shared';
 
 type Props = {|
   +onPress: () => void,
@@ -9,8 +9,8 @@ type Props = {|
 
 export default function MapHeaderButton(props: Props) {
   return (
-    <HeaderRightButton onPress={props.onPress}>
+    <HeaderButton.Right onPress={props.onPress}>
       <Icon name="map" size={24} color={Color.brand} />
-    </HeaderRightButton>
+    </HeaderButton.Right>
   );
 }
diff --git a/ios/RNKiwiMobile/RNKiwiGestureController.h b/ios/RNKiwiMobile/RNKiwiGestureController.h
index c3182085..a21f5aa8 100644
--- a/ios/RNKiwiMobile/RNKiwiGestureController.h
+++ b/ios/RNKiwiMobile/RNKiwiGestureController.h
@@ -24,4 +24,6 @@ RCT_EXTERN NSString *const RNKiwiEnableGestures;
 
 RCT_EXTERN NSString *const RNKiwiDisableGestures;
 
+RCT_EXTERN NSString *const RNKiwiCloseModal;
+
 @end
diff --git a/ios/RNKiwiMobile/RNKiwiGestureController.m b/ios/RNKiwiMobile/RNKiwiGestureController.m
index e2809994..576e3b79 100644
--- a/ios/RNKiwiMobile/RNKiwiGestureController.m
+++ b/ios/RNKiwiMobile/RNKiwiGestureController.m
@@ -4,6 +4,7 @@
 
 NSString *const RNKiwiEnableGestures = @"RNKiwiEnableGestures";
 NSString *const RNKiwiDisableGestures = @"RNKiwiDisableGestures";
+NSString *const RNKiwiCloseModal = @"RNKiwiCloseModal";
 
 @implementation RNKiwiGestureController
 
@@ -30,6 +31,12 @@ RCT_EXPORT_METHOD(enableGestures:(NSString *)moduleName) {
                                                     userInfo:@{ @"moduleName": moduleName }];
 }
 
+RCT_EXPORT_METHOD(closeModal:(NSString *)moduleName) {
+  [[NSNotificationCenter defaultCenter] postNotificationName:RNKiwiCloseModal
+                                                      object:nil
+                                                    userInfo:@{ @"moduleName": moduleName }];
+}
+
 RCT_EXPORT_METHOD(invokeDefaultBackButton) {
   dispatch_async(dispatch_get_main_queue(), ^{
     [self.gestureControllerDelegate invokeDefaultBackButton];
diff --git a/ios/RNKiwiMobile/RNKiwiViewController.m b/ios/RNKiwiMobile/RNKiwiViewController.m
index bed6fdf9..4aa80c8b 100644
--- a/ios/RNKiwiMobile/RNKiwiViewController.m
+++ b/ios/RNKiwiMobile/RNKiwiViewController.m
@@ -60,6 +60,7 @@
   
   if ([self isBeingDismissed] || [self isMovingFromParentViewController]) {
     [self notifyFinish];
+    [self closeModal];
     [self setupReactWrappersWithObject:nil];
   }
 }
@@ -126,6 +127,12 @@
   }
 }
 
+- (void)closeModal:(NSNotification *)notification {
+  if ([notification.userInfo[@"moduleName"] isEqualToString:[_options moduleName]]) {
+     [self dismissViewControllerAnimated:YES completion:nil];
+  }
+}
+
 - (void)startObservingGestures {
   [[NSNotificationCenter defaultCenter] addObserver:self
                                            selector:@selector(disableGestures:)
@@ -136,8 +143,14 @@
                                            selector:@selector(enableGestures:)
                                                name:RNKiwiEnableGestures
                                              object:nil];
+  
+  [[NSNotificationCenter defaultCenter] addObserver:self
+                                           selector:@selector(closeModal:)
+                                               name:RNKiwiCloseModal
+                                             object:nil];
 }
 
+
 - (void)stopObservingGestures {
   [[NSNotificationCenter defaultCenter] removeObserver:self];
 }
@@ -152,4 +165,8 @@
   [self notifyFinish];
 }
 
+- (void)closeModal {
+  [self dismissViewControllerAnimated:YES completion:nil];
+}
+
 @end
diff --git a/ios/RNNativePlayground/Base.lproj/Main.storyboard b/ios/RNNativePlayground/Base.lproj/Main.storyboard
index 33f5a9c9..a21f7763 100644
--- a/ios/RNNativePlayground/Base.lproj/Main.storyboard
+++ b/ios/RNNativePlayground/Base.lproj/Main.storyboard
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14109" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="9LU-Kd-CUw">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14113" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="9LU-Kd-CUw">
     <device id="retina4_7" orientation="portrait">
         <adaptation id="fullscreen"/>
     </device>
@@ -19,11 +19,19 @@
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <button opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="tJh-yV-LXh">
-                                <rect key="frame" x="165" y="100" width="45" height="30"/>
+                                <rect key="frame" x="106" y="100" width="163" height="30"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
-                                <state key="normal" title="Hotels"/>
+                                <state key="normal" title="Present Hotels Package"/>
                                 <connections>
-                                    <action selector="showHotelsView:" destination="BYZ-38-t0r" eventType="touchUpInside" id="Lgz-E8-h0R"/>
+                                    <action selector="presentHotelsView:" destination="BYZ-38-t0r" eventType="touchUpInside" id="OzQ-cL-mfe"/>
+                                </connections>
+                            </button>
+                            <button opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="5GD-7O-2Ie">
+                                <rect key="frame" x="116" y="138" width="145" height="30"/>
+                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                                <state key="normal" title="Push Hotels Package"/>
+                                <connections>
+                                    <action selector="pushHotelsView:" destination="BYZ-38-t0r" eventType="touchUpInside" id="OhK-8A-I70"/>
                                 </connections>
                             </button>
                         </subviews>
diff --git a/ios/RNNativePlayground/ViewController.m b/ios/RNNativePlayground/ViewController.m
index 7ff32669..8feaaf19 100644
--- a/ios/RNNativePlayground/ViewController.m
+++ b/ios/RNNativePlayground/ViewController.m
@@ -5,6 +5,7 @@
 @interface ViewController () <UIGestureRecognizerDelegate, RNKiwiOptions, RNKiwiCurrencyManager, RNKiwiTranslationProvider, RNKiwiViewControllerFlowDelegate>
 
 @property (nonatomic, strong) RNKiwiViewController *vc;
+@property (nonatomic, strong) NSString *lastNavigationMode;
 
 @end
 
@@ -26,32 +27,48 @@
   return self;
 }
 
-- (IBAction)showHotelsView:(id)sender {
+-(void)setUpVC {
   __weak typeof(self) weakSelf = self;
   _vc = [[RNKiwiViewController alloc] initWithOptions:weakSelf];
   [_vc setCurrencyFormatter:weakSelf];
   [_vc setTranslationProvider:weakSelf];
   [_vc setFlowDelegate:weakSelf];
+}
+
+- (IBAction)presentHotelsView:(id)sender {
+    [self setUpVC];
   
-  [[self navigationController] pushViewController:_vc animated:YES];
+    _lastNavigationMode = @"present";
+  
+    [[self navigationController] presentViewController:_vc animated:YES completion:nil];
 }
 
+- (IBAction)pushHotelsView:(UIButton *)sender {
+    [self setUpVC];
+  
+    _lastNavigationMode = @"push";
+    
+    [[self navigationController] pushViewController:_vc animated:YES];
+}
+
+
 # pragma mark - RNKiwiOptions
 
 - (NSDictionary<NSString *, NSObject *> *)initialProperties {
   CGRect windowRect = self.view.window.frame;
   return @{
-           @"coordinates": @{
-               @"latitude" : @59.9139,
-               @"longitude": @10.7522
-               },
-           @"language": @"en",
-           @"currency": @"EUR",
-           @"dimensions": @{
-               @"width": @(windowRect.size.width),
-               @"height": @(windowRect.size.height)
-               }
-           };
+    @"coordinates": @{
+        @"latitude" : @59.9139,
+        @"longitude": @10.7522
+    },
+    @"language": @"en",
+    @"currency": @"EUR",
+    @"lastNavigationMode": _lastNavigationMode,
+    @"dimensions": @{
+        @"width": @(windowRect.size.width),
+        @"height": @(windowRect.size.height)
+    }
+  };
 }
 
 - (NSString *)moduleName {
diff --git a/packages/localization/src/vocabularies/Hotels.js b/packages/localization/src/vocabularies/Hotels.js
index f1f841a0..4d9f155b 100644
--- a/packages/localization/src/vocabularies/Hotels.js
+++ b/packages/localization/src/vocabularies/Hotels.js
@@ -13,6 +13,7 @@ export default {
   'hotels.navigation.title.payment': 'Hotel',
   'hotels.navigation.title.single_hotel': 'Details',
   'hotels.navigation.title.single_hotel_map': 'Map',
+  'hotels.navigation.close.button': 'Close',
 
   'hotels_search.all_hotels.please_search':
     'Please search for your desired destination.',
diff --git a/packages/localization/src/vocabularies/ManageMyBooking.js b/packages/localization/src/vocabularies/ManageMyBooking.js
index ab496ee5..909406fe 100644
--- a/packages/localization/src/vocabularies/ManageMyBooking.js
+++ b/packages/localization/src/vocabularies/ManageMyBooking.js
@@ -1,11 +1,6 @@
 // @flow strict
 
 export default {
-  'mmb.booking_state.confirmed': 'Confirmed',
-  'mmb.booking_state.confirmed.travelled': 'Travelled',
-  'mmb.booking_state.refunded': 'Refunded',
-  'mmb.booking_state.in_process': 'In process',
-
   'mmb.my_bookings.title.bookings': 'My Bookings',
   'mmb.my_bookings.future_trips': 'Future trips',
   'mmb.my_bookings.past_trips': 'Past trips',
@@ -22,7 +17,7 @@ export default {
   'mmb.status.expired': 'Expired',
   'mmb.status.new': 'New',
   'mmb.status.pending': 'Pending',
-  'mmb.status.refused': 'Refused',
+  'mmb.status.refunded': 'Refunded',
   'mmb.status.travelled': 'Travelled',
   'mmb.status.unknown': 'Unknown',
 
diff --git a/packages/shared/index.js b/packages/shared/index.js
index 3082f707..8b107071 100644
--- a/packages/shared/index.js
+++ b/packages/shared/index.js
@@ -37,7 +37,7 @@ export { default as Modal } from './src/Modal';
 
 export { default as AdaptableBadge } from './src/AdaptableBadge';
 export { default as DropMarker } from './src/DropMarker';
-export { default as HeaderRightButton } from './src/HeaderRightButton';
+export { default as HeaderButton } from './src/HeaderButton';
 export { default as Price } from './src/Price';
 export { default as Stars } from './src/Stars';
 export { default as Text } from './src/Text';
diff --git a/packages/shared/src/GestureController.js b/packages/shared/src/GestureController.js
index 7154e99d..e3614553 100644
--- a/packages/shared/src/GestureController.js
+++ b/packages/shared/src/GestureController.js
@@ -14,6 +14,7 @@ const isNativeGestureModule = () => {
 const {
   enableGestures = noop,
   disableGestures = noop,
+  closeModal = noop,
   invokeDefaultBackButton = noop,
 } =
   Platform.OS === 'ios'
@@ -23,6 +24,7 @@ const {
 export default {
   enableGestures,
   disableGestures,
+  closeModal,
   invokeDefaultBackButton,
   isNativeGestureModule: isNativeGestureModule(),
 };
diff --git a/packages/shared/src/HeaderRightButton.js b/packages/shared/src/HeaderButton.js
similarity index 68%
rename from packages/shared/src/HeaderRightButton.js
rename to packages/shared/src/HeaderButton.js
index d85537e0..2f086c24 100644
--- a/packages/shared/src/HeaderRightButton.js
+++ b/packages/shared/src/HeaderButton.js
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
+import { type StylePropType } from '@kiwicom/mobile-shared';
 
 import StyleSheet from './PlatformStyleSheet';
 import Touchable from './Touchable';
@@ -10,16 +11,23 @@ type Props = {|
   +onPress: () => void,
   +onLongPress?: (React.ElementRef<typeof Touchable>) => void,
   +children?: React.Node,
+  +left?: boolean,
+  +style?: StylePropType,
 |};
 
 type State = {|
   reference: React.ElementRef<typeof Touchable> | null,
 |};
 
-export default class HeaderRightButton extends React.PureComponent<
-  Props,
-  State,
-> {
+export default class HeaderButton extends React.PureComponent<Props, State> {
+  static Right = (props: Props) => (
+    <HeaderButton {...props} style={[props.style, styles.right]} />
+  );
+
+  static Left = (props: Props) => (
+    <HeaderButton {...props} style={[props.style, styles.left]} />
+  );
+
   state = {
     reference: null,
   };
@@ -35,7 +43,7 @@ export default class HeaderRightButton extends React.PureComponent<
   };
 
   render = () => {
-    const { onPress } = this.props;
+    const { onPress, style } = this.props;
 
     return (
       <Touchable
@@ -49,7 +57,9 @@ export default class HeaderRightButton extends React.PureComponent<
         ref={this.storeReference}
       >
         <View style={styles.container}>
-          <View style={styles.innerContainer}>{this.props.children}</View>
+          <View style={[styles.innerContainer, style]}>
+            {this.props.children}
+          </View>
         </View>
       </Touchable>
     );
@@ -64,12 +74,22 @@ const styles = StyleSheet.create({
   },
   innerContainer: {
     ios: {
-      marginStart: 22,
-      marginEnd: 10,
       paddingVertical: 12,
     },
     android: {
       margin: 16,
     },
   },
+  right: {
+    ios: {
+      marginStart: 22,
+      marginEnd: 10,
+    },
+  },
+  left: {
+    ios: {
+      marginStart: 10,
+      marginEnd: 22,
+    },
+  },
 });
diff --git a/packages/shared/src/view/Layout.js b/packages/shared/src/view/Layout.js
index 45690106..ca19062a 100644
--- a/packages/shared/src/view/Layout.js
+++ b/packages/shared/src/view/Layout.js
@@ -13,7 +13,6 @@ export default function Layout(props: Props) {
       <StatusBar
         animated={true}
         barStyle="default"
-        translucent={true} // Android only
         backgroundColor="rgba(0, 0, 0, 0.3)" // Android only
       />
       {props.children}


Test patch:
diff --git a/app/hotels/src/navigation/allHotels/__tests__/AllHotelsNavigationScreen.test.js b/app/hotels/src/navigation/allHotels/__tests__/AllHotelsNavigationScreen.test.js
new file mode 100644
index 00000000..f1a0f9cb
--- /dev/null
+++ b/app/hotels/src/navigation/allHotels/__tests__/AllHotelsNavigationScreen.test.js
@@ -0,0 +1,47 @@
+// @flow
+
+import ShallowRenderer from 'react-test-renderer/shallow';
+import { DateUtils } from '@kiwicom/mobile-localization';
+
+import AllHotelsNavigationScreen from '../AllHotelsNavigationScreen';
+
+const renderer = new ShallowRenderer();
+const checkin = new Date();
+const checkout = DateUtils().addDays(6);
+const navigation = {
+  navigate: jest.fn(),
+  setParams: jest.fn(),
+  goBack: jest.fn(),
+  state: {
+    params: {},
+  },
+};
+
+const getNavigationOptions = (lastNavigationMode?: string) => {
+  const NavigationOptions = AllHotelsNavigationScreen.navigationOptions({
+    navigation: navigation,
+    currency: 'EUR',
+    coordinates: {
+      latitude: 51.5,
+      longitude: 0,
+    },
+    checkin: checkin,
+    checkout: checkout,
+    onBackClicked: jest.fn(),
+    lastNavigationMode: lastNavigationMode,
+  });
+
+  return renderer.render(NavigationOptions.headerLeft);
+};
+
+it('renders close button with `closeNativeModal` onPress function when lastNavigationMode is `present`', () => {
+  expect(getNavigationOptions('present')).toMatchSnapshot();
+});
+
+it('renders arrow icon button with `goBack` onPress function when lastNavigationMode is `push`', () => {
+  expect(getNavigationOptions('push')).toMatchSnapshot();
+});
+
+it('renders arrow icon button with `goBack` onPress function when lastNavigationMode is null', () => {
+  expect(getNavigationOptions()).toMatchSnapshot();
+});
diff --git a/app/hotels/src/navigation/allHotels/__tests__/__snapshots__/AllHotelsNavigationScreen.test.js.snap b/app/hotels/src/navigation/allHotels/__tests__/__snapshots__/AllHotelsNavigationScreen.test.js.snap
new file mode 100644
index 00000000..4d82efbc
--- /dev/null
+++ b/app/hotels/src/navigation/allHotels/__tests__/__snapshots__/AllHotelsNavigationScreen.test.js.snap
@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders arrow icon button with \`goBack\` onPress function when lastNavigationMode is \`push\` 1`] = `
+<TouchableItem
+  accessibilityComponentType="button"
+  accessibilityTraits="button"
+  borderless={true}
+  delayPressIn={0}
+  onPress={[MockFunction]}
+  pressColor="rgba(0, 0, 0, .32)"
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "transparent",
+      "flexDirection": "row",
+    }
+  }
+  testID="header-back"
+>
+  <Component
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "flexDirection": "row",
+      }
+    }
+  >
+    <Image
+      source={
+        Object {
+          "testUri": "../../react-navigation/src/views/assets/back-icon.png",
+        }
+      }
+      style={
+        Array [
+          Object {
+            "height": 21,
+            "marginLeft": 9,
+            "marginRight": 22,
+            "marginVertical": 12,
+            "resizeMode": "contain",
+            "transform": Array [
+              Object {
+                "scaleX": 1,
+              },
+            ],
+            "width": 13,
+          },
+          false,
+          Object {
+            "tintColor": "#00a991",
+          },
+        ]
+      }
+    />
+  </Component>
+</TouchableItem>
+`;
+
+exports[`renders arrow icon button with \`goBack\` onPress function when lastNavigationMode is null 1`] = `
+<TouchableItem
+  accessibilityComponentType="button"
+  accessibilityTraits="button"
+  borderless={true}
+  delayPressIn={0}
+  onPress={[MockFunction]}
+  pressColor="rgba(0, 0, 0, .32)"
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "transparent",
+      "flexDirection": "row",
+    }
+  }
+  testID="header-back"
+>
+  <Component
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "flexDirection": "row",
+      }
+    }
+  >
+    <Image
+      source={
+        Object {
+          "testUri": "../../react-navigation/src/views/assets/back-icon.png",
+        }
+      }
+      style={
+        Array [
+          Object {
+            "height": 21,
+            "marginLeft": 9,
+            "marginRight": 22,
+            "marginVertical": 12,
+            "resizeMode": "contain",
+            "transform": Array [
+              Object {
+                "scaleX": 1,
+              },
+            ],
+            "width": 13,
+          },
+          false,
+          Object {
+            "tintColor": "#00a991",
+          },
+        ]
+      }
+    />
+  </Component>
+</TouchableItem>
+`;
+
+exports[`renders close button with \`closeNativeModal\` onPress function when lastNavigationMode is \`present\` 1`] = `
+<HeaderButton
+  onPress={[Function]}
+  style={
+    Array [
+      undefined,
+      Object {
+        "marginEnd": 22,
+        "marginStart": 10,
+      },
+    ]
+  }
+>
+  <Text
+    style={
+      Object {
+        "color": "#00a991",
+        "fontSize": 17,
+        "fontWeight": "600",
+      }
+    }
+  >
+    <Translation
+      id="hotels.navigation.close.button"
+    />
+  </Text>
+</HeaderButton>
+`;