remove safe from portal and move into menu (#25619)

keybase · Apr 11, 2023 · 32a23c1 · 32a23c1
1 parent 6a120ad
commit 32a23c1
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 67 deletions.
diff --git a/shared/common-adapters/floating-box/index.native.tsx b/shared/common-adapters/floating-box/index.native.tsx
@@ -4,6 +4,11 @@ import {Keyboard, StyleSheet} from 'react-native'
 import {Portal} from '../portal.native'
 import type {Props} from '.'
 
+const Kb = {
+  Box,
+  Portal,
+}
+
 const FloatingBox = (p: Props) => {
   const {hideKeyboard, children, containerStyle} = p
 
@@ -14,11 +19,11 @@ const FloatingBox = (p: Props) => {
   }, [hideKeyboard])
 
   return (
-    <Portal hostName="popup-root">
-      <Box pointerEvents="box-none" style={[StyleSheet.absoluteFill, containerStyle]}>
+    <Kb.Portal hostName="popup-root">
+      <Kb.Box pointerEvents="box-none" style={[StyleSheet.absoluteFill, containerStyle]}>
         {children}
-      </Box>
-    </Portal>
+      </Kb.Box>
+    </Kb.Portal>
   )
 }
 

diff --git a/shared/common-adapters/floating-menu/menu-layout/index.native.tsx b/shared/common-adapters/floating-menu/menu-layout/index.native.tsx
@@ -10,6 +10,7 @@ import ScrollView from '../../scroll-view'
 import ProgressIndicator from '../../progress-indicator'
 import SafeAreaView from '../../safe-area-view'
 import type {MenuItem, MenuLayoutProps} from '.'
+import {SafeAreaProvider, initialWindowMetrics} from 'react-native-safe-area-context'
 
 type MenuRowProps = {
   centered?: boolean
@@ -101,60 +102,62 @@ const MenuLayout = (props: MenuLayoutProps) => {
   const firstIsUnWrapped = props.items[0] !== 'Divider' && props.items[0]?.unWrapped
 
   return (
-    <SafeAreaView
-      style={Styles.collapseStyles([
-        styles.safeArea,
-        props.backgroundColor && {backgroundColor: props.backgroundColor},
-      ])}
-    >
-      <Box
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      <SafeAreaView
         style={Styles.collapseStyles([
-          styles.menuBox,
-          firstIsUnWrapped && styles.firstIsUnWrapped,
+          styles.safeArea,
           props.backgroundColor && {backgroundColor: props.backgroundColor},
         ])}
       >
-        {/* Display header if there is one */}
-        {props.header}
-        {beginningDivider && <Divider />}
-        <ScrollView
-          alwaysBounceVertical={false}
-          style={Styles.collapseStyles([styles.scrollView, firstIsUnWrapped && styles.firstIsUnWrapped])}
-          contentContainerStyle={styles.menuGroup}
+        <Box
+          style={Styles.collapseStyles([
+            styles.menuBox,
+            firstIsUnWrapped && styles.firstIsUnWrapped,
+            props.backgroundColor && {backgroundColor: props.backgroundColor},
+          ])}
         >
-          {menuItemsWithDividers.map((mi, idx) =>
-            mi === 'Divider' ? (
-              idx !== 0 && idx !== props.items.length ? (
-                <Divider key={idx} style={styles.dividerInScrolleView} />
-              ) : null
-            ) : (
-              <MenuRow
-                key={idx}
-                {...mi}
-                index={idx}
-                numItems={menuItemsWithDividers.length}
-                onHidden={props.closeOnClick ? props.onHidden : undefined}
-                textColor={props.textColor}
-                backgroundColor={props.backgroundColor}
-              />
-            )
-          )}
-        </ScrollView>
-        <Divider style={styles.divider} />
-        <Box style={Styles.collapseStyles([styles.menuGroup, props.listStyle])}>
-          <MenuRow
-            centered={true}
-            title={props.closeText || 'Close'}
-            index={0}
-            numItems={1}
-            onClick={props.onHidden} // pass in nothing to onHidden so it doesn't trigger it twice
-            onHidden={() => {}}
-            textColor={props.textColor}
-            backgroundColor={props.backgroundColor}
-          />
+          {/* Display header if there is one */}
+          {props.header}
+          {beginningDivider && <Divider />}
+          <ScrollView
+            alwaysBounceVertical={false}
+            style={Styles.collapseStyles([styles.scrollView, firstIsUnWrapped && styles.firstIsUnWrapped])}
+            contentContainerStyle={styles.menuGroup}
+          >
+            {menuItemsWithDividers.map((mi, idx) =>
+              mi === 'Divider' ? (
+                idx !== 0 && idx !== props.items.length ? (
+                  <Divider key={idx} style={styles.dividerInScrolleView} />
+                ) : null
+              ) : (
+                <MenuRow
+                  key={idx}
+                  {...mi}
+                  index={idx}
+                  numItems={menuItemsWithDividers.length}
+                  onHidden={props.closeOnClick ? props.onHidden : undefined}
+                  textColor={props.textColor}
+                  backgroundColor={props.backgroundColor}
+                />
+              )
+            )}
+          </ScrollView>
+          <Divider style={styles.divider} />
+          <Box style={Styles.collapseStyles([styles.menuGroup, props.listStyle])}>
+            <MenuRow
+              centered={true}
+              title={props.closeText || 'Close'}
+              index={0}
+              numItems={1}
+              onClick={props.onHidden} // pass in nothing to onHidden so it doesn't trigger it twice
+              onHidden={() => {}}
+              textColor={props.textColor}
+              backgroundColor={props.backgroundColor}
+            />
+          </Box>
         </Box>
-      </Box>
-    </SafeAreaView>
+      </SafeAreaView>
+    </SafeAreaProvider>
   )
 }
 

diff --git a/shared/common-adapters/portal.native.tsx b/shared/common-adapters/portal.native.tsx
@@ -1,8 +1,6 @@
 import {Portal as GPortal} from '@gorhom/portal'
 import * as Styles from '../styles'
 import {FullWindowOverlay} from 'react-native-screens'
-import {SafeAreaView} from '../common-adapters'
-import {SafeAreaProvider, initialWindowMetrics} from 'react-native-safe-area-context'
 
 // useFullScreenOverlay=false is useful to stick to an onscreen element like the audio recorder
 // otherwise you want it to be true so you can go above modals, aka the ... menu in an image attachment modal
@@ -11,22 +9,11 @@ export const Portal = (p: {children: React.ReactNode; hostName?: string; useFull
   const fullWindow = (useFullScreenOverlay ?? true) && Styles.isIOS
   return fullWindow ? (
     <GPortal hostName={hostName}>
-      <FullWindowOverlay>
-        <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-          <SafeAreaView style={styles.safe}>{children}</SafeAreaView>
-        </SafeAreaProvider>
-      </FullWindowOverlay>
+      <FullWindowOverlay>{children}</FullWindowOverlay>
     </GPortal>
   ) : (
     <GPortal hostName={hostName}>{children}</GPortal>
   )
 }
 
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      safe: {flex: 1},
-    } as const)
-)
-
 export {PortalHost, PortalProvider} from '@gorhom/portal'
diff --git a/shared/common-adapters/safe-area-view.native.tsx b/shared/common-adapters/safe-area-view.native.tsx
@@ -7,7 +7,11 @@ import * as Styles from '../styles'
 export const SafeAreaViewTop = (p: Props) => {
   const {children, style} = p
   const insets = useSafeAreaInsets()
-  return <View style={[{paddingTop: insets.top}, styles.topSafeArea, style]}>{children}</View>
+  return (
+    <View style={[{paddingTop: insets.top}, styles.topSafeArea, style]} pointerEvents="box-none">
+      {children}
+    </View>
+  )
 }
 
 const styles = Styles.styleSheetCreate(() => ({