fix: in app guides orientation on ipad (#1055)

Signed-off-by: Bryce McMath <[email protected]>
openwallet-foundation · Jan 3, 2024 · 79c1e53 · 79c1e53
1 parent 4f26617
commit 79c1e53
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 36 deletions.
diff --git a/packages/legacy/core/App/components/tour/AttachTourStep.tsx b/packages/legacy/core/App/components/tour/AttachTourStep.tsx
@@ -1,5 +1,5 @@
 import React, { cloneElement, ReactElement, ReactNode, RefObject, useContext, useEffect, useRef } from 'react'
-import { StyleProp, View } from 'react-native'
+import { StyleProp, useWindowDimensions, View } from 'react-native'
 
 import { TourContext } from '../../contexts/tour/tour-context'
 import { TourID } from '../../types/tour'
@@ -46,7 +46,7 @@ export interface AttachTourStepProps<T> {
  */
 export function AttachTourStep<T>({ children, fill = false, index, tourID }: AttachTourStepProps<T>): ReactElement {
   const { currentStep, currentTour, changeSpot } = useContext(TourContext)
-
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions()
   const childRef = useRef<View>(null)
 
   useEffect(() => {
@@ -55,7 +55,7 @@ export function AttachTourStep<T>({ children, fill = false, index, tourID }: Att
         changeSpot({ height, width, x, y })
       })
     }
-  }, [changeSpot, currentTour, currentStep, index])
+  }, [windowWidth, windowHeight, changeSpot, currentTour, currentStep, index])
 
   const { style, ...rest } = children.props
   const childStyle = style ?? {}

diff --git a/packages/legacy/core/App/components/tour/TourBox.tsx b/packages/legacy/core/App/components/tour/TourBox.tsx
@@ -1,9 +1,9 @@
 import React, { ReactElement, ReactNode, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from 'react-native'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialIcons'
 
-import { tourMargin, hitSlop } from '../../constants'
+import { hitSlop } from '../../constants'
 import { useTheme } from '../../contexts/theme'
 import { RenderProps } from '../../contexts/tour/tour-context'
 import { testIdWithKey } from '../../utils/testable'
@@ -74,7 +74,6 @@ export function TourBox(props: TourBoxProps): ReactElement {
     stepsOutOf,
   } = props
   const { TextTheme, ColorPallet, OnboardingTheme } = useTheme()
-  const { width } = useWindowDimensions()
   const iconSize = 30
   const dismissIconName = 'clear'
   const iconColor = ColorPallet.notification.infoIcon
@@ -89,7 +88,7 @@ export function TourBox(props: TourBoxProps): ReactElement {
       borderRadius: 5,
       borderWidth: 1,
       padding: 20,
-      width: width - tourMargin * 2,
+      flex: 1,
       margin: 'auto',
     },
     headerContainer: {

diff --git a/packages/legacy/core/App/components/tour/TourOverlay.tsx b/packages/legacy/core/App/components/tour/TourOverlay.tsx
@@ -24,7 +24,7 @@ interface TourOverlayProps {
 export const TourOverlay = (props: TourOverlayProps) => {
   const { width: windowWidth, height: windowHeight } = useWindowDimensions()
   const { color, currentTour, currentStep, onBackdropPress, backdropOpacity, changeSpot, spot, tourStep } = props
-
+  const [viewBox, setViewBox] = useState(`0 0 ${windowWidth} ${windowHeight}`)
   const { next, previous, start, stop } = useContext(TourContext)
 
   const [tooltipStyle, setTooltipStyle] = useState<ViewStyle>({})
@@ -52,11 +52,12 @@ export const TourOverlay = (props: TourOverlayProps) => {
     const gapBetweenSpotAndTooltip = 50
     // if origin spot (ie. no spotlight)
     if (spot.x === 0 && spot.y === 0) {
-      const top = windowHeight / 5
+      // a relative margin so that the tooltip doesn't start at the very top of the screen
+      const oneSixthOfScreenHeight = windowHeight / 6
       setTooltipStyle({
         left: tourMargin,
         right: tourMargin,
-        top,
+        top: oneSixthOfScreenHeight,
       })
       // if spot is in the lower half of the screen
     } else if (spot.y >= windowHeight / 2) {
@@ -75,7 +76,13 @@ export const TourOverlay = (props: TourOverlayProps) => {
         top,
       })
     }
-  }, [spot.height, spot.width, spot.x, spot.y])
+  }, [windowWidth, windowHeight, spot.width, spot.height, spot.x, spot.y])
+
+  useEffect(() => {
+    // + 1 pixel to account for an svg size rounding issue that would cause
+    // a tiny gap around the overlay
+    setViewBox(`0 0 ${windowWidth + 1} ${windowHeight + 1}`)
+  }, [windowWidth, windowHeight])
 
   return (
     <Modal
@@ -84,24 +91,30 @@ export const TourOverlay = (props: TourOverlayProps) => {
       transparent={true}
       visible={currentStep !== undefined}
     >
-      <View style={{ height: windowHeight, width: windowWidth }} testID={testIdWithKey('SpotlightOverlay')}>
+      <View style={{ height: windowHeight + 1, width: windowWidth + 1 }} testID={testIdWithKey('SpotlightOverlay')}>
         <Svg
           testID={testIdWithKey('SpotOverlay')}
-          height="100%"
-          width="100%"
-          viewBox={`0 0 ${windowWidth} ${windowHeight}`}
+          height={windowHeight + 1}
+          width={windowWidth + 1}
+          viewBox={viewBox}
           onPress={handleBackdropPress}
           shouldRasterizeIOS={true}
           renderToHardwareTextureAndroid={true}
         >
           <Defs>
-            <Mask id="mask" x={0} y={0} height="100%" width="100%">
-              <Rect height="100%" width="100%" fill="#fff" />
+            <Mask id="mask" x={0} y={0} height={windowHeight + 1} width={windowWidth + 1}>
+              <Rect height={windowHeight + 1} width={windowWidth + 1} fill="#fff" />
               <SpotCutout />
             </Mask>
           </Defs>
 
-          <Rect height="100%" width="100%" fill={color} mask="url(#mask)" opacity={backdropOpacity} />
+          <Rect
+            height={windowHeight + 1}
+            width={windowWidth + 1}
+            fill={color}
+            mask="url(#mask)"
+            opacity={backdropOpacity}
+          />
         </Svg>
 
         <View

diff --git a/packages/legacy/core/__tests__/components/__snapshots__/TourBox.test.tsx.snap b/packages/legacy/core/__tests__/components/__snapshots__/TourBox.test.tsx.snap
@@ -11,9 +11,9 @@ Array [
         "borderColor": "#0099FF",
         "borderRadius": 5,
         "borderWidth": 1,
+        "flex": 1,
         "margin": "auto",
         "padding": 20,
-        "width": 700,
       }
     }
   >

diff --git a/packages/legacy/core/__tests__/components/__snapshots__/TourOverlay.test.tsx.snap b/packages/legacy/core/__tests__/components/__snapshots__/TourOverlay.test.tsx.snap
@@ -12,18 +12,18 @@ Array [
     <View
       style={
         Object {
-          "height": 1334,
-          "width": 750,
+          "height": 1335,
+          "width": 751,
         }
       }
       testID="com.ariesbifold:id/SpotlightOverlay"
     >
       <RNSVGSvgView
         align="xMidYMid"
-        bbHeight="100%"
-        bbWidth="100%"
+        bbHeight={1335}
+        bbWidth={751}
         focusable={false}
-        height="100%"
+        height={1335}
         meetOrSlice={0}
         minX={0}
         minY={0}
@@ -45,20 +45,20 @@ Array [
             },
             Object {
               "flex": 0,
-              "height": "100%",
-              "width": "100%",
+              "height": 1335,
+              "width": 751,
             },
           ]
         }
         testID="com.ariesbifold:id/SpotOverlay"
-        vbHeight={1334}
-        vbWidth={750}
-        width="100%"
+        vbHeight={1335}
+        vbWidth={751}
+        width={751}
       >
         <RNSVGGroup>
           <RNSVGDefs>
             <RNSVGMask
-              height="100%"
+              height={1335}
               maskContentUnits={1}
               maskTransform={
                 Array [
@@ -72,35 +72,35 @@ Array [
               }
               maskUnits={0}
               name="mask"
-              width="100%"
+              width={751}
               x={0}
               y={0}
             >
               <RNSVGRect
                 fill={4294967295}
-                height="100%"
+                height={1335}
                 propList={
                   Array [
                     "fill",
                   ]
                 }
-                width="100%"
+                width={751}
                 x={0}
                 y={0}
               />
             </RNSVGMask>
           </RNSVGDefs>
           <RNSVGRect
             fill={4286611584}
-            height="100%"
+            height={1335}
             mask="mask"
             opacity={0.7}
             propList={
               Array [
                 "fill",
               ]
             }
-            width="100%"
+            width={751}
             x={0}
             y={0}
           />
@@ -113,7 +113,7 @@ Array [
             "opacity": 1,
             "position": "absolute",
             "right": 25,
-            "top": 266.8,
+            "top": 222.33333333333334,
           }
         }
         testID="com.ariesbifold:id/SpotTooltip"