Hotels: RoomSummary and HotelCard on SingleHotelMap are also swipeabl…

…e on Android This fixes MOBILE-4113. It seems that VerticalSwipeResponder does not like too much to be nested in `View` components for the swiping to work on Android. :man-shrugging: These changes can be seen in Room Summary after selecting rooms and on the map view for a given hotel; it's now possible to swipe the card up on Android (was already working on iOS). Another issue was spotted during this fix: the RoomSummary card computes the allowed space given for the price tag for SummaryRow component based on the width of the device, and it should be half the width in Tablet view. Issue created: #1607
kiwicom · May 6, 2019 · 6055507 · 6055507
1 parent 1a8e109
commit 6055507
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 20 deletions.
diff --git a/app/hotels/src/map/singleHotel/AdditionalInfo.js b/app/hotels/src/map/singleHotel/AdditionalInfo.js
@@ -9,6 +9,7 @@ import {
   Device,
   BottomSheetHandle,
 } from '@kiwicom/mobile-shared';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import BottomSheet from './BottomSheet';
 import HotelDetailPreview from '../hotelDetailPreview/HotelDetailPreview';
@@ -75,6 +76,13 @@ const styles = StyleSheet.create({
     start: 8,
     end: 8,
     bottom: Device.isIPhoneX ? 88 : 60,
+    shadowColor: defaultTokens.paletteInkDark,
+    shadowOpacity: 0.2,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 4,
+    android: {
+      elevation: 1,
+    },
   },
   detailPreviewContainer: {
     flex: 1,

diff --git a/app/hotels/src/map/singleHotel/SingleMap.js b/app/hotels/src/map/singleHotel/SingleMap.js
@@ -4,7 +4,6 @@ import * as React from 'react';
 import { View } from 'react-native';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
 import { StyleSheet, StretchedImage } from '@kiwicom/mobile-shared';
-import { defaultTokens } from '@kiwicom/mobile-orbit';
 import {
   withNavigation,
   type NavigationType,
@@ -31,9 +30,7 @@ const SingleMap = (props: Props) => {
       <View style={styles.underlay}>
         <StretchedImage source={gradient} />
       </View>
-      <View style={styles.dropShadow}>
-        <AdditionalInfo data={props.hotel} />
-      </View>
+      <AdditionalInfo data={props.hotel} />
       <CloseModal onPress={goBack} />
     </View>
   );
@@ -45,15 +42,6 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
   },
   underlay: { height: 132 },
-  dropShadow: {
-    shadowColor: defaultTokens.paletteInkDark,
-    shadowOpacity: 0.2,
-    shadowOffset: { width: 0, height: 2 },
-    shadowRadius: 4,
-    android: {
-      elevation: 1,
-    },
-  },
 });
 
 export default createFragmentContainer(withNavigation(SingleMap), {

diff --git a/app/hotels/src/singleHotel/summary/RoomSummary.js b/app/hotels/src/singleHotel/summary/RoomSummary.js
@@ -174,11 +174,11 @@ export class RoomSummary extends React.Component<Props, State> {
     return (
       <>
         {amount != null && currency != null && (
-          <View style={styles.container}>
-            <VerticalSwipeResponder
-              onSwipeDown={this.onSwipeDown}
-              onSwipeUp={this.onSwipeUp}
-            >
+          <VerticalSwipeResponder
+            onSwipeDown={this.onSwipeDown}
+            onSwipeUp={this.onSwipeUp}
+          >
+            <View style={styles.container}>
               <BottomSheetHandle style={styles.handle} />
               <ExtraCharges
                 rooms={rooms}
@@ -198,8 +198,8 @@ export class RoomSummary extends React.Component<Props, State> {
                   }
                 />
               </View>
-            </VerticalSwipeResponder>
-          </View>
+            </View>
+          </VerticalSwipeResponder>
         )}
         <SummaryButtons
           amount={amount.toString()}