Repository: kiwicom/mobile (js)

Issue:
Search form - shadows/padding
[Trello](https://trello.com/c/EDVTo03z/304-design-search-form-shadows-padding)

Elevation only visible on location input, should be on date input and guests input as well

Pull request:
fix: Add elevation to guests picker and date picker
Fixes #910.

Patch:
diff --git a/app/hotels/src/allHotels/searchForm/guests/Guests.js b/app/hotels/src/allHotels/searchForm/guests/Guests.js
index d7fc2d1c..f58fa7ae 100644
--- a/app/hotels/src/allHotels/searchForm/guests/Guests.js
+++ b/app/hotels/src/allHotels/searchForm/guests/Guests.js
@@ -56,6 +56,7 @@ const buttonStyles = StyleSheet.create({
   button: {
     android: {
       borderRadius: 2,
+      elevation: 1,
     },
   },
   buttonWrapper: {
diff --git a/packages/shared/src/WithNativeNavigation.js b/packages/shared/src/WithNativeNavigation.js
index 89660a29..01fa799e 100644
--- a/packages/shared/src/WithNativeNavigation.js
+++ b/packages/shared/src/WithNativeNavigation.js
@@ -4,9 +4,10 @@ import * as React from 'react';
 import { GestureController } from '@kiwicom/mobile-shared';
 
 type NavigationState = {|
-  +routes: $ReadOnlyArray<{
-    +routes?: $ReadOnlyArray<mixed>,
-  }>,
+  +index: number,
+  +routes: $ReadOnlyArray<{|
+    +index: number,
+  |}>,
 |};
 
 type InjectedProps = {|
@@ -24,26 +25,25 @@ function withNativeNavigation<Props: {}>(
 
     constructor(props) {
       super(props);
+      // First time we open the app, it should be enabled
       this.isEnabled = true;
-      this.lastCall = '';
+      this.lastCall = 'enabled';
+      GestureController.enableGestures(moduleName);
     }
     onNavigationStateChange = (
       previousState: NavigationState,
       currentState: NavigationState,
     ) => {
       // Native gesture should only be enabled in the very first screen
-      // Also, there should not be modal (like first screen + modal)
+      // We also check the nested index in case there is a modal opened
+      this.isEnabled =
+        currentState.index === 0 && currentState.routes[0].index === 0;
 
-      const isDisabled =
-        currentState.routes.length > 1 ||
-        (currentState.routes[0].routes &&
-          currentState.routes[0].routes.length > 1);
-
-      if (!isDisabled && this.lastCall !== 'enabled') {
+      if (this.isEnabled && this.lastCall !== 'enabled') {
         GestureController.enableGestures(moduleName);
         this.lastCall = 'enabled';
         this.isEnabled = true;
-      } else if (this.lastCall !== 'disabled') {
+      } else if (!this.isEnabled && this.lastCall !== 'disabled') {
         GestureController.disableGestures(moduleName);
         this.lastCall = 'disabled';
         this.isEnabled = false;
diff --git a/packages/shared/src/forms/datePicker/DatePickerButton.js b/packages/shared/src/forms/datePicker/DatePickerButton.js
index 25815198..4b9202de 100644
--- a/packages/shared/src/forms/datePicker/DatePickerButton.js
+++ b/packages/shared/src/forms/datePicker/DatePickerButton.js
@@ -45,6 +45,7 @@ const styles = StyleSheet.create({
     android: {
       height: 48,
       borderRadius: 2,
+      elevation: 1,
     },
     ios: {
       borderRadius: 6,


Test patch:
diff --git a/packages/shared/src/__tests__/WithNativeNavigation.test.js b/packages/shared/src/__tests__/WithNativeNavigation.test.js
index f2bf2307..47ff350a 100644
--- a/packages/shared/src/__tests__/WithNativeNavigation.test.js
+++ b/packages/shared/src/__tests__/WithNativeNavigation.test.js
@@ -28,21 +28,27 @@ describe('WithNativeNavigation', () => {
     jest.clearAllMocks();
   });
 
+  const sharedInstance = getComponent().getInstance();
+
+  it('calls enable when we init WithNativeNavigation', () => {
+    getComponent().getInstance();
+    expect(GestureController.enableGestures).toHaveBeenCalledTimes(1);
+  });
+
   it('enables gestures if it was not enabled', () => {
-    const onNavigationStateChange = getComponent().getInstance()
-      .onNavigationStateChange;
+    sharedInstance.isEnabled = false;
+    sharedInstance.lastCall = 'disabled';
+    const onNavigationStateChange = sharedInstance.onNavigationStateChange;
 
-    const callEnable = () =>
+    const callEnable = () => {
       onNavigationStateChange(
         {},
         {
-          routes: [
-            {
-              routes: [],
-            },
-          ],
+          index: 0,
+          routes: [{ index: 0 }],
         },
       );
+    };
 
     callEnable();
     expect(GestureController.enableGestures).toHaveBeenCalledTimes(1);
@@ -52,19 +58,17 @@ describe('WithNativeNavigation', () => {
     expect(GestureController.enableGestures).toHaveBeenCalledTimes(1);
   });
 
-  it('disables gestures if it was not enabled 1', () => {
-    const onNavigationStateChange = getComponent().getInstance()
-      .onNavigationStateChange;
+  it('disables gestures if it was not disabled 1', () => {
+    sharedInstance.isEnabled = true;
+    sharedInstance.lastCall = 'enabled';
+    const onNavigationStateChange = sharedInstance.onNavigationStateChange;
 
     const callDisable = () =>
       onNavigationStateChange(
         {},
         {
-          routes: [
-            {
-              routes: [{ index: 0 }, { index: 1 }],
-            },
-          ],
+          index: 1,
+          routes: [{ index: 1 }],
         },
       );
 
@@ -76,30 +80,28 @@ describe('WithNativeNavigation', () => {
     expect(GestureController.disableGestures).toHaveBeenCalledTimes(1);
   });
 
-  it('disables gestures if it was not enabled 2', () => {
-    const onNavigationStateChange = getComponent().getInstance()
-      .onNavigationStateChange;
+  it('disables gestures if it was not disabled 2', () => {
+    sharedInstance.isEnabled = true;
+    sharedInstance.lastCall = 'enabled';
+    const onNavigationStateChange = sharedInstance.onNavigationStateChange;
 
     onNavigationStateChange(
       {},
       {
-        routes: [
-          {
-            routes: [],
-          },
-          {
-            routes: [],
-          },
-        ],
+        index: 0,
+        routes: [{ index: 1 }],
       },
     );
+
     expect(GestureController.disableGestures).toHaveBeenCalledTimes(1);
   });
 
   it('handles the back button', () => {
-    const instance = getComponent().getInstance();
-    const onNavigationStateChange = instance.onNavigationStateChange;
-    const onBackClicked = instance.onBackClicked;
+    sharedInstance.isEnabled = true;
+    sharedInstance.lastCall = 'enabled';
+
+    const onNavigationStateChange = sharedInstance.onNavigationStateChange;
+    const onBackClicked = sharedInstance.onBackClicked;
 
     // Enabled first state
     expect(onBackClicked()).toBe(true);
@@ -111,13 +113,11 @@ describe('WithNativeNavigation', () => {
     onNavigationStateChange(
       {},
       {
-        routes: [
-          {
-            routes: [{ index: 0 }, { index: 1 }],
-          },
-        ],
+        index: 0,
+        routes: [{ index: 1 }],
       },
     );
+
     expect(onBackClicked()).toBe(false);
     expect(GestureController.invokeDefaultBackButton).toHaveBeenCalledTimes(0);
   });