Repository: kiwicom/mobile
Pull request #1206 (2018-10-09 18:52:36)

docs: Add step "Check it builds correctly"


Patch:
diff --git a/app/hotels/src/gallery/GalleryGrid.js b/app/hotels/src/gallery/GalleryGrid.js
index 13cd1cb9..b3e1b6c6 100644
--- a/app/hotels/src/gallery/GalleryGrid.js
+++ b/app/hotels/src/gallery/GalleryGrid.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { FlatList } from 'react-native';
+import { FlatList, StatusBar } from 'react-native';
 import {
   GeneralError,
   Modal,
@@ -125,6 +125,7 @@ export default class GalleryGrid extends React.Component<Props, State> {
     if (this.props.images) {
       return (
         <React.Fragment>
+          <StatusBar barStyle="dark-content" />
           <FlatList
             data={this.props.images}
             extraData={this.state}
diff --git a/app/hotels/src/navigation/HotelsNavigationStack.js b/app/hotels/src/navigation/HotelsNavigationStack.js
index f038323e..5d4d6658 100644
--- a/app/hotels/src/navigation/HotelsNavigationStack.js
+++ b/app/hotels/src/navigation/HotelsNavigationStack.js
@@ -1,16 +1,13 @@
 // @flow strict
 
-import * as React from 'react';
 import {
   StackNavigator,
   StackNavigatorOptions,
   type NavigationType,
-  HeaderTitle,
   createTransparentHeaderStyle,
 } from '@kiwicom/mobile-navigation';
 import { Dimensions as RNDimensions } from 'react-native';
 import { withMappedNavigationAndConfigProps as withMappedProps } from 'react-navigation-props-mapper';
-import { Translation } from '@kiwicom/mobile-localization';
 
 import SingleHotel from './singleHotel/SingleHotelNavigationScreen';
 import SearchResults from './allHotels/SearchResultsScreen';
@@ -26,11 +23,8 @@ export type NavigationProps = {|
   currency: string,
 |};
 
-export default StackNavigator(
+const DetailStack = StackNavigator(
   {
-    SearchResults: {
-      screen: withMappedProps(SearchResults),
-    },
     SingleHotel: {
       screen: withMappedProps(SingleHotel),
       navigationOptions: {
@@ -41,6 +35,27 @@ export default StackNavigator(
     GalleryGrid: {
       screen: withMappedProps(GalleryGrid, AdditionalPropsInjector),
     },
+    Payment: {
+      screen: withMappedProps(Payment),
+    },
+  },
+  {
+    ...StackNavigatorOptions,
+    initialRouteName: 'SingleHotel',
+  },
+);
+
+export default StackNavigator(
+  {
+    SearchResults: {
+      screen: withMappedProps(SearchResults),
+    },
+    DetailStack: {
+      screen: DetailStack,
+      navigationOptions: {
+        header: null,
+      },
+    },
     SingleHotelMap: {
       screen: SingleHotelMapNavigationScreen,
       navigationOptions: {
@@ -48,17 +63,6 @@ export default StackNavigator(
         ...createTransparentHeaderStyle(RNDimensions.get('screen')),
       },
     },
-    Payment: {
-      screen: withMappedProps(Payment),
-      navigationOptions: {
-        mode: 'modal',
-        headerTitle: (
-          <HeaderTitle>
-            <Translation id="hotels.navigation.title.payment" />
-          </HeaderTitle>
-        ),
-      },
-    },
   },
   {
     ...StackNavigatorOptions,
diff --git a/app/hotels/src/navigation/singleHotel/SingleHotelNavigationScreen.js b/app/hotels/src/navigation/singleHotel/SingleHotelNavigationScreen.js
index 9496d200..9f0d0f15 100644
--- a/app/hotels/src/navigation/singleHotel/SingleHotelNavigationScreen.js
+++ b/app/hotels/src/navigation/singleHotel/SingleHotelNavigationScreen.js
@@ -21,6 +21,10 @@ class SingleHotelNavigationScreen extends React.Component<Props> {
     isStandAlonePackage: false,
   };
 
+  static navigationOptions = {
+    header: null,
+  };
+
   componentDidMount = () => {
     this.props.navigation.setParams({
       goBack: this.goBack,
diff --git a/app/hotels/src/navigation/singleHotel/SingleHotelStack.js b/app/hotels/src/navigation/singleHotel/SingleHotelStack.js
index fb138105..ae833954 100644
--- a/app/hotels/src/navigation/singleHotel/SingleHotelStack.js
+++ b/app/hotels/src/navigation/singleHotel/SingleHotelStack.js
@@ -1,15 +1,12 @@
 // @flow
 
-import * as React from 'react';
 import { Dimensions as RNDimensions } from 'react-native';
 import { withMappedNavigationAndConfigProps as withMappedProps } from 'react-navigation-props-mapper';
 import {
-  HeaderTitle,
   StackNavigator,
   StackNavigatorOptions,
   createTransparentHeaderStyle,
 } from '@kiwicom/mobile-navigation';
-import { Translation } from '@kiwicom/mobile-localization';
 
 import SingleHotelNavigationScreen from './SingleHotelNavigationScreen';
 import SingleHotelMapNavigationScreen from './SingleHotelMapNavigationScreen';
@@ -17,10 +14,32 @@ import GalleryGrid from '../../gallery/GalleryGrid';
 import { PaymentScreen } from '../../singleHotel/PaymentScreen';
 import AdditionalPropsInjector from './AdditionalPropsInjector';
 
-export default StackNavigator(
+const DetailStack = StackNavigator(
   {
     SingleHotel: {
-      screen: SingleHotelNavigationScreen,
+      screen: withMappedProps(SingleHotelNavigationScreen),
+      navigationOptions: {
+        headerLeft: null,
+        ...createTransparentHeaderStyle(RNDimensions.get('screen')),
+      },
+    },
+    GalleryGrid: {
+      screen: withMappedProps(GalleryGrid, AdditionalPropsInjector),
+    },
+    Payment: {
+      screen: withMappedProps(PaymentScreen),
+    },
+  },
+  {
+    ...StackNavigatorOptions,
+    initialRouteName: 'SingleHotel',
+  },
+);
+
+export default StackNavigator(
+  {
+    DetailStack: {
+      screen: DetailStack,
       navigationOptions: {
         headerLeft: null,
         /**
@@ -41,23 +60,10 @@ export default StackNavigator(
         ...createTransparentHeaderStyle(RNDimensions.get('screen')),
       },
     },
-    GalleryGrid: {
-      screen: withMappedProps(GalleryGrid, AdditionalPropsInjector),
-    },
-    Payment: {
-      screen: withMappedProps(PaymentScreen),
-      navigationOptions: {
-        headerTitle: (
-          <HeaderTitle>
-            <Translation id="hotels.navigation.title.payment" />
-          </HeaderTitle>
-        ),
-      },
-    },
   },
   {
     ...StackNavigatorOptions,
-    initialRouteName: 'SingleHotel',
+    initialRouteName: 'DetailStack',
     mode: 'modal',
   },
 );
diff --git a/app/hotels/src/singleHotel/PaymentScreen.js b/app/hotels/src/singleHotel/PaymentScreen.js
index 30c94447..4879eee9 100644
--- a/app/hotels/src/singleHotel/PaymentScreen.js
+++ b/app/hotels/src/singleHotel/PaymentScreen.js
@@ -1,14 +1,15 @@
 // @flow
 
 import * as React from 'react';
-import { Platform } from 'react-native';
+import { Platform, StatusBar } from 'react-native';
 import {
   WebView,
   Logger,
   type WebViewStateChangeEvent,
 } from '@kiwicom/mobile-shared';
-import { DateUtils } from '@kiwicom/mobile-localization';
+import { DateUtils, Translation } from '@kiwicom/mobile-localization';
 import querystring from 'querystring';
+import { HeaderTitle } from '@kiwicom/mobile-navigation';
 
 import { sanitizeDate } from '../GraphQLSanitizers';
 import { withHotelsContext } from '../HotelsContext';
@@ -28,6 +29,13 @@ export type PaymentParameters = {|
 |};
 
 export class PaymentScreen extends React.Component<PaymentParameters> {
+  static navigationOptions = () => ({
+    headerTitle: (
+      <HeaderTitle>
+        <Translation id="hotels.navigation.title.payment" />
+      </HeaderTitle>
+    ),
+  });
   componentDidMount = () => {
     Logger.ancillaryDisplayed(Logger.Type.ANCILLARY_STEP_PAYMENT);
   };
@@ -39,12 +47,15 @@ export class PaymentScreen extends React.Component<PaymentParameters> {
   };
 
   render = () => (
-    <WebView
-      source={{
-        uri: createURI(this.props),
-      }}
-      onNavigationStateChange={this.onNavigationStateChange}
-    />
+    <React.Fragment>
+      <StatusBar barStyle="dark-content" />
+      <WebView
+        source={{
+          uri: createURI(this.props),
+        }}
+        onNavigationStateChange={this.onNavigationStateChange}
+      />
+    </React.Fragment>
   );
 }
 
diff --git a/docs/android/external-native-dependencies.md b/docs/android/external-native-dependencies.md
index 96ffc0ec..f96d8e03 100644
--- a/docs/android/external-native-dependencies.md
+++ b/docs/android/external-native-dependencies.md
@@ -1,4 +1,4 @@
-## Add a new external native dependency
+# Add a new external native dependency
 
 When we update a dependency there are no major changes as versions will be taken from [.build/package.json](../../.build/package.json) and a new [snapshot](http://trinerdis.cz:8000/repository/snapshots/com/trinerdis/skypicker/) will be deployed.
 
@@ -45,3 +45,19 @@ deployDependency('react-native-vector-icons', ...),
 deployDependency('react-native-tooltips', ...),
 // Your new dependency here
 ```
+
+## Check it builds correctly
+
+In order to check if our new dependency builds correctly, we just need to go to our dependency directory:
+
+```shell
+cd /android/native/our-dependency
+```
+
+And run:
+
+```shell
+../../gradlew
+```
+
+It should output `BUILD SUCCESSFUL`.
diff --git a/packages/navigation/index.js b/packages/navigation/index.js
index 8ffebdcb..bcbe895e 100644
--- a/packages/navigation/index.js
+++ b/packages/navigation/index.js
@@ -64,6 +64,7 @@ export const StackNavigator = (
         +mode?: 'modal',
         +headerTransparent?: boolean,
         +headerLeft?: Object | null,
+        +header?: Object | null,
       |},
     |},
   },


Test patch:
diff --git a/app/hotels/src/singleHotel/__tests__/__snapshots__/PaymentScreen.test.js.snap b/app/hotels/src/singleHotel/__tests__/__snapshots__/PaymentScreen.test.js.snap
index 23f001a9..61b4b316 100644
--- a/app/hotels/src/singleHotel/__tests__/__snapshots__/PaymentScreen.test.js.snap
+++ b/app/hotels/src/singleHotel/__tests__/__snapshots__/PaymentScreen.test.js.snap
@@ -5,12 +5,19 @@ exports[`creates correct URL 1`] = `"https://secure.booking.com/book.html?from_s
 exports[`creates correct URL 2`] = `"https://secure.booking.com/book.html?from_source=hotel&hostname=hotels.kiwi.com&hotel_id=2&stage=1&checkin=1970-01-03&interval=14&children_extrabeds=&nr_rooms_7709411_91461863_1_1_0=5&rt_pos_selected=&aid=321&label=kiwi-ios-react-rn-test&lang=cs&selected_currency=JPY"`;
 
 exports[`creates correct URL 3`] = `
-<WebView
-  onNavigationStateChange={[Function]}
-  source={
-    Object {
-      "uri": "https://secure.booking.com/book.html?from_source=hotel&hostname=hotels.kiwi.com&hotel_id=2&stage=1&checkin=1970-01-03&interval=14&children_extrabeds=&nr_rooms_7709411_91461863_1_1_0=5&rt_pos_selected=&aid=321&label=kiwi-ios-react-rn-test&lang=cs&selected_currency=JPY",
+<React.Fragment>
+  <StatusBar
+    animated={false}
+    barStyle="dark-content"
+    showHideTransition="fade"
+  />
+  <WebView
+    onNavigationStateChange={[Function]}
+    source={
+      Object {
+        "uri": "https://secure.booking.com/book.html?from_source=hotel&hostname=hotels.kiwi.com&hotel_id=2&stage=1&checkin=1970-01-03&interval=14&children_extrabeds=&nr_rooms_7709411_91461863_1_1_0=5&rt_pos_selected=&aid=321&label=kiwi-ios-react-rn-test&lang=cs&selected_currency=JPY",
+      }
     }
-  }
-/>
+  />
+</React.Fragment>
 `;